/* ============================================================
   GLOBALLISTWORK — Obsidian UI tokens
   Single source of truth for color, spacing, typography, geometry.
   ============================================================ */

:root {
  /* ---- LIGHT MODE (default) ---- */
  --bg:              #F2F3F5;
  --bg-elevated:     #FFFFFF;
  --card:            #FFFFFF;
  --card-2:          #FAFAFA;
  --surface-hover:   #F5F5F7;
  --border:          #E0E0E0;
  --border-strong:   #D4D4D4;
  --text-primary:    #0A0A0A;
  --text-secondary:  #6B6B6B;
  --text-tertiary:   #9A9A9A;
  --text-inverse:    #FFFFFF;
  --overlay:         rgba(10, 10, 10, 0.48);

  /* ---- BRAND / ACCENT (same in both modes) ---- */
  --blue:            #0079E4;
  --blue-tint:       rgba(0, 121, 228, 0.10);
  --green:           #22C55E;
  --green-tint:      rgba(34, 197, 94, 0.12);
  --amber:           #F59E0B;
  --amber-tint:      rgba(245, 158, 11, 0.12);
  --red:             #EF4444;
  --red-tint:        rgba(239, 68, 68, 0.12);
  --purple:          #8B5CF6;
  --purple-tint:     rgba(139, 92, 246, 0.12);

  /* ---- GEOMETRY ---- */
  --radius:          14px;
  --radius-sm:       10px;
  --radius-xs:       8px;
  --radius-lg:       18px;
  --radius-pill:     999px;
  --border-w:        1px;

  /* ---- SPACING (4pt scale) ---- */
  --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;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---- TYPOGRAPHY ---- */
  --font-family-base: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 5vw, 4.5rem);   /* 40 → 72 */
  --fs-h1:      clamp(2rem, 4vw, 3rem);       /* 32 → 48 */
  --fs-h2:      1.75rem;                       /* 28 */
  --fs-h3:      1.25rem;                       /* 20 */
  --fs-h4:      1.0625rem;                     /* 17 */
  --fs-body:    1rem;                          /* 16 */
  --fs-small:   0.875rem;                      /* 14 */
  --fs-tiny:    0.8125rem;                     /* 13 */
  --fs-label:   0.75rem;                       /* 12 */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---- LAYOUT ---- */
  --container-max: 1200px;
  --container-narrow: 880px;
  --container-text: 720px;
  --navbar-h: 64px;

  /* ---- MOTION ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-slow: 0.35s;

  /* ---- Z-INDEX SCALE ---- */
  --z-base:    1;
  --z-sticky:  100;
  --z-nav:     200;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;

  /* ---- FOCUS ---- */
  --focus-ring: 0 0 0 3px rgba(0, 121, 228, 0.35);
  color-scheme: light;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --bg:              #141416;
  --bg-elevated:     #1E1E1E;
  --card:            #1E1E1E;
  --card-2:          #252528;
  --surface-hover:   #2A2A2D;
  --border:          #2A2A2A;
  --border-strong:   #353538;
  --text-primary:    #F5F5F0;
  --text-secondary:  #9A9A9A;
  --text-tertiary:   #6B6B6B;
  --text-inverse:    #0A0A0A;
  --overlay:         rgba(0, 0, 0, 0.66);

  --blue-tint:       rgba(0, 121, 228, 0.18);
  --green-tint:      rgba(34, 197, 94, 0.18);
  --amber-tint:      rgba(245, 158, 11, 0.18);
  --red-tint:        rgba(239, 68, 68, 0.18);
  --purple-tint:     rgba(139, 92, 246, 0.18);

  --focus-ring: 0 0 0 3px rgba(0, 121, 228, 0.55);
  color-scheme: dark;
}

/* Respect system preference when no explicit choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              #141416;
    --bg-elevated:     #1E1E1E;
    --card:            #1E1E1E;
    --card-2:          #252528;
    --surface-hover:   #2A2A2D;
    --border:          #2A2A2A;
    --border-strong:   #353538;
    --text-primary:    #F5F5F0;
    --text-secondary:  #9A9A9A;
    --text-tertiary:   #6B6B6B;
    --text-inverse:    #0A0A0A;
    --overlay:         rgba(0, 0, 0, 0.66);
    color-scheme: dark;
  }
}