/* ============================================================
   SPLIT — design tokens
   Phase 3 / Step 3.1 — mobile shell (safe-area, tabbar, drawer)
   One source of truth for colors, type, spacing, z-layers, motion.
   ============================================================ */

:root {
  /* ── dark mode (default) ─────────────────────────────── */
  --bg:            #0A0E15;
  --surface:       #0F1520;
  --surface-2:     #151C2A;
  --surface-3:     #1D2636;
  --surface-hover: #232E42;

  --border:        #1F2A3A;
  --border-strong: #2F3D50;
  --divider:       #19222F;

  --text:          #F0F3F7;
  --text-strong:   #FFFFFF;
  --text-muted:    #8E99A8;
  --text-subtle:   #5C6675;

  --accent:        #E4B21A;
  --accent-hover:  #F5C636;
  --accent-dim:    #8A6800;
  --accent-soft:   #4A3A0D;
  --accent-glow:   rgba(228, 178, 26, 0.18);

  --success:       #3FAD6C;
  --danger:        #E05551;
  --warning:       #F5A524;
  --info:          #4DA3E2;
  --steel:         #5A6A7A;

  --shadow-sm:     0 1px 0 rgba(255,255,255,0.03), 0 2px 6px rgba(0,0,0,0.20);
  --shadow-md:     0 1px 0 rgba(255,255,255,0.03), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:     0 1px 0 rgba(255,255,255,0.04), 0 16px 48px rgba(0,0,0,0.50);

  color-scheme: dark;

  /* ── typography ──────────────────────────────────────── */
  --font-display:  'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-data:     'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-xs:         11px;
  --fs-sm:         13px;
  --fs-base:       14px;
  --fs-md:         16px;
  --fs-lg:         18px;
  --fs-xl:         22px;
  --fs-2xl:        28px;
  --fs-3xl:        36px;
  --fs-4xl:        48px;
  --fs-5xl:        64px;
  --fs-display:    96px;

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.5;

  /* ── spacing (4px grid) ──────────────────────────────── */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   28px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-14:  56px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;

  /* ── motion ──────────────────────────────────────────── */
  --d-fast:  120ms;
  --d-med:   200ms;
  --d-slow:  350ms;
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── z-layers ────────────────────────────────────────── */
  --z-sidebar:   90;
  --z-topbar:    100;
  --z-tabbar:    110;
  --z-drawer:    400;
  --z-backdrop:  390;
  --z-dropdown:  200;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;
  --z-overlay:   9000;

  /* ── layout ──────────────────────────────────────────── */
  --max-w:          1440px;
  --sidebar-w:      240px;
  --mobile-topbar:  56px;
  --tabbar-h:       64px;
  --tabbar-cta:     58px;   /* prominent center CTA disc diameter */
  --touch-min:      44px;   /* Apple HIG minimum touch target */

  /* ── safe-area (iOS notch + home indicator) ──────────── */
  --safe-top:       env(safe-area-inset-top, 0px);
  --safe-right:     env(safe-area-inset-right, 0px);
  --safe-bottom:    env(safe-area-inset-bottom, 0px);
  --safe-left:      env(safe-area-inset-left, 0px);
}

/* ── light mode override ────────────────────────────────── */
:root[data-theme="light"] {
  --bg:            #F7F7F3;
  --surface:       #FFFFFF;
  --surface-2:     #F1F2EE;
  --surface-3:     #E8EAE3;
  --surface-hover: #DEE1D8;

  --border:        #D8DDD0;
  --border-strong: #B8C0AE;
  --divider:       #E5E8DE;

  --text:          #0F1720;
  --text-strong:   #000000;
  --text-muted:    #4C5765;
  --text-subtle:   #7A8594;

  --accent:        #B8860B;
  --accent-hover:  #9E7209;
  --accent-dim:    #6B4E00;
  --accent-soft:   #F3E8C4;
  --accent-glow:   rgba(184, 134, 11, 0.12);

  --success:       #2A8C52;
  --danger:        #C5403C;
  --warning:       #CC7A00;
  --info:          #2979B8;

  --shadow-sm:     0 1px 0 rgba(0,0,0,0.02), 0 1px 3px rgba(15,23,32,0.06);
  --shadow-md:     0 1px 0 rgba(0,0,0,0.03), 0 4px 14px rgba(15,23,32,0.08);
  --shadow-lg:     0 1px 0 rgba(0,0,0,0.04), 0 12px 36px rgba(15,23,32,0.12);

  color-scheme: light;
}