/* ==========================================================================
   PsiJulia Design System — Tokens
   Mobile-first. Dark Mode ready. WCAG-aware contrast.
   Single source of truth for color, type, space, radius, shadow, motion.
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --c-brand-50:  #eef2ff;
  --c-brand-100: #e0e7ff;
  --c-brand-200: #c7d2fe;
  --c-brand-300: #a5b4fc;
  --c-brand-400: #818cf8;
  --c-brand-500: #6366f1;
  --c-brand-600: #4f46e5;
  --c-brand-700: #4338ca;
  --c-brand-800: #3730a3;
  --c-brand-900: #312e81;

  /* ---- Accent (JulIA / AI) ---- */
  --c-accent-400: #c084fc;
  --c-accent-500: #a855f7;
  --c-accent-600: #9333ea;

  /* ---- Semantic ---- */
  --c-success-500: #10b981;
  --c-success-600: #059669;
  --c-warning-500: #f59e0b;
  --c-danger-500:  #ef4444;
  --c-danger-600:  #dc2626;
  --c-info-500:    #3b82f6;

  /* ---- Neutral scale ---- */
  --c-n-0:   #ffffff;
  --c-n-50:  #f8fafc;
  --c-n-100: #f1f5f9;
  --c-n-200: #e2e8f0;
  --c-n-300: #cbd5e1;
  --c-n-400: #94a3b8;
  --c-n-500: #64748b;
  --c-n-600: #475569;
  --c-n-700: #334155;
  --c-n-800: #1e293b;
  --c-n-900: #0f172a;
  --c-n-950: #020617;

  /* ---- Surface roles (LIGHT default) ---- */
  --bg-app:       var(--c-n-50);
  --bg-surface:   var(--c-n-0);
  --bg-surface-2: var(--c-n-100);
  --bg-elevated:  var(--c-n-0);
  --bg-sunken:    var(--c-n-100);
  --bg-overlay:   rgba(15, 23, 42, .45);

  --text-strong:  var(--c-n-900);
  --text-base:    var(--c-n-700);
  --text-muted:   var(--c-n-500);
  --text-faint:   var(--c-n-400);
  --text-on-brand:#ffffff;

  --border:       var(--c-n-200);
  --border-strong:var(--c-n-300);

  --brand:        var(--c-brand-600);
  --brand-hover:  var(--c-brand-700);
  --brand-soft:   var(--c-brand-50);
  --accent:       var(--c-accent-600);
  --accent-soft:  #f5f0ff;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.125rem;  /* 34 */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---- Shadow (light) ---- */
  --sh-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --sh-md: 0 2px 8px rgba(15,23,42,.08), 0 4px 16px rgba(15,23,42,.06);
  --sh-lg: 0 8px 28px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.08);
  --sh-brand: 0 6px 20px rgba(79,70,229,.30);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* ---- Layout ---- */
  --shell-max: 540px;          /* app feels native, centered on desktop */
  --nav-h: 64px;               /* bottom navigation height */
  --header-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --z-header: 50;
  --z-nav: 60;
  --z-fab: 65;
  --z-sheet: 80;
  --z-modal: 90;
  --z-toast: 100;
}

/* ---- DARK MODE ---- */
:root[data-theme="dark"] {
  --bg-app:       var(--c-n-950);
  --bg-surface:   var(--c-n-900);
  --bg-surface-2: var(--c-n-800);
  --bg-elevated:  #16203a;
  --bg-sunken:    var(--c-n-950);
  --bg-overlay:   rgba(0,0,0,.6);

  --text-strong:  var(--c-n-50);
  --text-base:    var(--c-n-200);
  --text-muted:   var(--c-n-400);
  --text-faint:   var(--c-n-500);

  --border:       #1f2b45;
  --border-strong:#2c3a5a;

  --brand:        var(--c-brand-400);
  --brand-hover:  var(--c-brand-300);
  --brand-soft:   rgba(99,102,241,.14);
  --accent:       var(--c-accent-400);
  --accent-soft:  rgba(168,85,247,.14);

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 2px 10px rgba(0,0,0,.45);
  --sh-lg: 0 10px 30px rgba(0,0,0,.55);
  --sh-brand: 0 6px 20px rgba(99,102,241,.35);
}

/* Auto dark if user has no explicit choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-app: var(--c-n-950); --bg-surface: var(--c-n-900); --bg-surface-2: var(--c-n-800);
    --bg-elevated:#16203a; --bg-sunken: var(--c-n-950); --bg-overlay: rgba(0,0,0,.6);
    --text-strong: var(--c-n-50); --text-base: var(--c-n-200); --text-muted: var(--c-n-400); --text-faint: var(--c-n-500);
    --border:#1f2b45; --border-strong:#2c3a5a;
    --brand: var(--c-brand-400); --brand-hover: var(--c-brand-300);
    --brand-soft: rgba(99,102,241,.14); --accent: var(--c-accent-400); --accent-soft: rgba(168,85,247,.14);
    --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh-md: 0 2px 10px rgba(0,0,0,.45); --sh-lg: 0 10px 30px rgba(0,0,0,.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}