/* ─── 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-200: #c3c6d4;
  --ink-100: #eaecf2;
  --ink-50:  #f7f8fb;

  --accent: #6b8aff;
  --accent-weak: #6b8aff22;
  --cta: #FF0035;
  --cta-hover: #e6002f;
  --danger: #ff4a6b;
  --success: #4ad39b;
  --warning: #f5b454;

  /* semantic roles — dark by default */
  --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) 30%, transparent);
  --border-strong: color-mix(in srgb, var(--ink-400) 55%, transparent);
  --text:          var(--ink-50);
  --text-muted:    var(--ink-300);
  --text-faint:    var(--ink-400);

  /* 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);
    --surface:       rgba(255,255,255,0.72);
    --surface-hi:    rgba(255,255,255,0.92);
    --border:        color-mix(in srgb, var(--ink-500) 14%, transparent);
    --border-strong: color-mix(in srgb, var(--ink-500) 28%, transparent);
    --text:          var(--ink-800);
    --text-muted:    var(--ink-400);
    --text-faint:    var(--ink-300);
    --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.72);
  --surface-hi:    rgba(255,255,255,0.92);
  --border:        color-mix(in srgb, var(--ink-500) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--ink-500) 28%, transparent);
  --text:          var(--ink-800);
  --text-muted:    var(--ink-400);
  --text-faint:    var(--ink-300);
  --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) 30%, transparent);
  --border-strong: color-mix(in srgb, var(--ink-400) 55%, transparent);
  --text:          var(--ink-50);
  --text-muted:    var(--ink-300);
  --text-faint:    var(--ink-400);
  --shadow-card:   0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25);
}