/* ─── Psytools Design Tokens ───
   Single source of truth for colours, spacing, and semantic roles.
   Anchored to Delosis brand palette (#38405F primary).
   ─────────────────────────────── */

:root {
  /* base palette */
  --ink-900: #0a0d1a;
  --ink-800: #121628;
  --ink-700: #1a1f36;
  --ink-600: #242a46;
  --ink-500: #38405f;
  --ink-400: #5a607a;
  --ink-300: #888c9f;
  --ink-250: #a8acc0;
  --ink-200: #c3c6d4;
  --ink-100: #eaecf2;
  --ink-50:  #f7f8fb;

  /* Accent: dark variant darker so white text on bg meets ≥4.5:1.
     --accent       — for backgrounds carrying white text (4.6:1 vs white)
     --accent-bright — lighter, for icons/borders/highlights on dark surfaces */
  --accent: #4663e8;
  --accent-bright: #8aa3ff;
  --accent-weak: #6b8aff22;
  /* CTA red: #FF0035 (Delosis brand) gives 4.06:1 vs white — fails AA.
     --cta is dropped to #e60030 (4.65:1) to clear AA on the login button
     and segment-control checked label. The brand red is preserved as
     --cta-brand for non-text decorative uses (focus rings, indicators). */
  --cta-brand: #FF0035;
  --cta: #e60030;
  --cta-hover: #c2002a;
  --danger: #ff4a6b;
  --success: #4ad39b;
  --warning: #f5b454;

  /* semantic roles — dark by default. Tuned for WCAG AA on dark bg:
     --text-muted ≈ 8.4:1 vs --bg, --text-faint ≈ 5.9:1 vs --bg.
     Surfaces match delosis.com's near-black card treatment — the lighter
     ink-500 navy is reserved for accents, not surface fills. */
  --bg:            var(--ink-900);
  --bg-overlay:    rgba(10,13,26,0.78);
  --surface:       color-mix(in srgb, var(--ink-800) 92%, transparent);
  --surface-hi:    color-mix(in srgb, var(--ink-700) 92%, transparent);
  --border:        color-mix(in srgb, var(--ink-400) 32%, transparent);
  --border-strong: color-mix(in srgb, var(--ink-400) 60%, transparent);
  --text:          var(--ink-50);
  --text-muted:    var(--ink-250);
  --text-faint:    var(--ink-300);

  /* spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* shadows */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25);
}

/* ─── light mode ─── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:            var(--ink-50);
    --bg-overlay:    rgba(247,248,251,0.70);
    /* Bumped from 0.72 → 0.88 — at 72% the brain background bled through and
       made cards look murky; 88% reads as a clean frosted surface */
    --surface:       rgba(255,255,255,0.88);
    --surface-hi:    rgba(255,255,255,0.96);
    --border:        color-mix(in srgb, var(--ink-500) 18%, transparent);
    --border-strong: color-mix(in srgb, var(--ink-500) 36%, transparent);
    --text:          var(--ink-800);
    --text-muted:    var(--ink-500);
    --text-faint:    var(--ink-400);
    --shadow-card:   0 1px 2px rgba(56,64,95,0.08), 0 8px 24px rgba(56,64,95,0.08);
  }
}

/* ─── forced-theme data attributes ─── */
html[data-force-theme="light"],
html[data-force-theme="light"] :root {
  --bg:            var(--ink-50);
  --bg-overlay:    rgba(247,248,251,0.70);
  --surface:       rgba(255,255,255,0.88);
  --surface-hi:    rgba(255,255,255,0.96);
  --border:        color-mix(in srgb, var(--ink-500) 18%, transparent);
  --border-strong: color-mix(in srgb, var(--ink-500) 36%, transparent);
  --text:          var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --shadow-card:   0 1px 2px rgba(56,64,95,0.08), 0 8px 24px rgba(56,64,95,0.08);
}

html[data-force-theme="dark"],
html[data-force-theme="dark"] :root {
  --bg:            var(--ink-900);
  --bg-overlay:    rgba(10,13,26,0.72);
  --surface:       color-mix(in srgb, var(--ink-700) 75%, transparent);
  --surface-hi:    color-mix(in srgb, var(--ink-600) 80%, transparent);
  --border:        color-mix(in srgb, var(--ink-400) 38%, transparent);
  --border-strong: color-mix(in srgb, var(--ink-400) 65%, transparent);
  --text:          var(--ink-50);
  --text-muted:    var(--ink-250);
  --text-faint:    var(--ink-300);
  --shadow-card:   0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25);
}

html { color-scheme: light dark; }
html[data-force-theme="light"] { color-scheme: light; }
html[data-force-theme="dark"]  { color-scheme: dark; }