/* ============================================================
   Advengers OS — Design System Tokens
   Rebrand foundation · lime + periwinkle · light + dark
   These CSS custom properties are the single source of truth.
   The MUI theme (theme.ts) is generated from these exact values.
   ============================================================ */

:root {
  /* ---- Brand core (mode-independent) ---- */
  --brand-lime:        #c4f400;
  --brand-lime-mid:    #dbfa5c;
  --brand-lime-pale:   #e2ff6d;
  --brand-peri:        #7b91ff;
  --brand-peri-deep:   #5858f9;
  --brand-peri-pale:   #a6c8ff;
  --brand-ink:         #222221;
  --brand-ink-2:       #383836;
  --brand-grey:        #d9d9d9;

  /* ---- Type ---- */
  --font-sans: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* type scale (1.250 major-third-ish, tuned) */
  --fs-display: 44px;  --lh-display: 1.05;  --tk-display: -0.03em;
  --fs-h1: 32px;       --lh-h1: 1.1;        --tk-h1: -0.025em;
  --fs-h2: 25px;       --lh-h2: 1.15;       --tk-h2: -0.02em;
  --fs-h3: 20px;       --lh-h3: 1.25;       --tk-h3: -0.015em;
  --fs-title: 16px;    --lh-title: 1.4;     --tk-title: -0.01em;
  --fs-body: 14px;     --lh-body: 1.55;     --tk-body: 0;
  --fs-sm: 13px;       --lh-sm: 1.5;        --tk-sm: 0;
  --fs-xs: 11px;       --lh-xs: 1.45;       --tk-xs: 0.02em;
  --fs-mono: 12.5px;   --lh-mono: 1.5;      --tk-mono: 0;

  --fw-regular: 400; --fw-medium: 500; --fw-demi: 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; --sp-20: 80px;

  /* ---- Radii ---- */
  --r-xs: 3px; --r-sm: 5px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.16,.84,.24,1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms;

  /* ---- Z ---- */
  --z-nav: 100; --z-dropdown: 200; --z-dialog: 1000; --z-toast: 1200;
}

/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root, [data-theme="light"] {
  --bg-base:    #eef0f2;   /* app canvas — soft grey */
  --bg-sunken:  #eceee8;   /* wells, track backgrounds */
  --bg-surface: #ffffff;   /* cards, sheets */
  --bg-raised:  #ffffff;   /* popovers, menus (with shadow) */
  --bg-inset:   #f1f2ee;   /* inputs, code */

  --line:        #e2e4dd;  /* hairlines */
  --line-strong: #cdd0c6;  /* stronger dividers */

  --ink:        #161a14;   /* primary text */
  --ink-2:      #3f463b;   /* secondary text */
  --ink-3:      #6b7264;   /* tertiary / captions */
  --ink-mute:   #98a08f;   /* placeholder / disabled */
  --ink-on-accent: #161a14;/* text on lime */
  --ink-on-deep:   #ffffff;/* text on periwinkle-deep */

  --accent:        var(--brand-peri-deep);  /* primary action (light needs the deeper peri) */
  --accent-hover:  #4a59d8;
  --accent-soft:   #eaedff;
  --accent-on:     #ffffff;

  --lime:        #5f7a00;   /* lime is too bright for text on light — use deep for fg */
  --lime-bg:     var(--brand-lime);
  --lime-soft:   #eef8c2;

  /* status hues unified with dark so bars/chips read identically across modes */
  --success:  #2f9e4f;  --success-soft: #e2f3e4;
  --warning:  #f47919;  --warning-soft: #fdebda;
  --danger:   #e0584c;  --danger-soft:  #fbe6e3;
  --info:     #4b86e8;  --info-soft:    #e4eefb;
  --neutral:  #6b7280;  --neutral-soft: #ebedf0;
  --violet:   #7c3aed;  --violet-soft:  #ede6fb;
  --teal:     #0d9488;  --teal-soft:    #d4f3ef;
  --pink:     #db2777;  --pink-soft:    #fbe0ee;
  --amber:    #b8860b;  --amber-soft:   #f8efd0;

  --shadow-sm: 0 1px 2px rgba(20,24,16,.06), 0 1px 1px rgba(20,24,16,.04);
  --shadow-md: 0 4px 12px rgba(20,24,16,.08), 0 1px 3px rgba(20,24,16,.05);
  --shadow-lg: 0 16px 40px -12px rgba(20,24,16,.18), 0 4px 12px rgba(20,24,16,.08);
  --shadow-pop: 0 12px 32px -8px rgba(20,24,16,.22);

  --focus-ring: 0 0 0 3px rgba(88,104,242,.32);
}

/* ============================================================
   DARK MODE (Obsidian — matches the login)
   ============================================================ */
[data-theme="dark"] {
  /* Obsidian with a blue-purple cast (matches the login's periwinkle glow) */
  --bg-base:    #0b0c16;
  --bg-sunken:  #07080f;
  --bg-surface: #14151f;
  --bg-raised:  #1a1b29;
  --bg-inset:   #1c1e2d;

  --line:        rgba(196,205,255,.10);
  --line-strong: rgba(196,205,255,.18);

  --ink:        #f1f2f8;
  --ink-2:      #b6bace;
  --ink-3:      #828699;
  --ink-mute:   #585c70;
  --ink-on-accent: #0d1117;
  --ink-on-deep:   #ffffff;

  --accent:        var(--brand-lime);  /* on dark, lime is the hero accent */
  --accent-hover:  #d4ff2e;
  --accent-soft:   rgba(196,244,0,.12);
  --accent-on:     #0d1117;

  --lime:        var(--brand-lime);
  --lime-bg:     var(--brand-lime);
  --lime-soft:   rgba(196,244,0,.12);

  --peri:        var(--brand-peri);
  --peri-soft:   rgba(123,145,255,.16);

  --success:  #5bd07a;  --success-soft: rgba(91,208,122,.14);
  --warning:  #ff8a3d;  --warning-soft: rgba(255,138,61,.16);
  --danger:   #ff7a6e;  --danger-soft:  rgba(255,122,110,.14);
  --info:     #6fa8ff;  --info-soft:    rgba(111,168,255,.14);
  --neutral:  #9aa0b0;  --neutral-soft: rgba(154,160,176,.14);
  --violet:   #a98bf0;  --violet-soft:  rgba(169,139,240,.18);
  --teal:     #2ad9c5;  --teal-soft:    rgba(42,217,197,.16);
  --pink:     #ff5fa8;  --pink-soft:    rgba(255,95,168,.16);
  --amber:    #d4af37;  --amber-soft:   rgba(212,175,55,.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.5);
  --shadow-pop: 0 16px 44px -10px rgba(0,0,0,.7);

  --focus-ring: 0 0 0 3px rgba(196,244,0,.32);
}