/* ============================================================
   Vega Command — Design Tokens
   Light-first premium SaaS palette
   Brand: White / Soft Gray / Deep Charcoal / Red / Orange / intelligence / Blue
   ============================================================ */

:root {
  /* ------ TYPE SCALE ------ */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    7rem);

  /* ------ SPACING ------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ------ RADII ------ */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* ------ TRANSITIONS ------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --trans-fast:  150ms var(--ease-out);
  --trans-base:  220ms var(--ease-out);
  --trans-slow:  400ms var(--ease-out);

  /* ------ CONTENT WIDTHS ------ */
  --w-narrow:  640px;
  --w-default: 960px;
  --w-wide:    1200px;
  --w-full:    1440px;

  /* ------ FONTS ------ */
  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body:    'Satoshi', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
}

/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root, [data-theme="light"] {

  /* Surfaces */
  --bg:           #ffffff;
  --bg-2:         #f8f8f8;
  --bg-3:         #f2f2f0;
  --surface:      #ffffff;
  --surface-2:    #f5f5f3;
  --surface-3:    #ececea;
  --border:       rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);
  --divider:      rgba(0,0,0,0.06);

  /* Text */
  --text:         #111110;
  --text-2:       #3a3a38;
  --text-muted:   #6b6b68;
  --text-faint:   #a8a8a5;
  --text-inverse: #ffffff;

  /* Brand accents — from logo */
  --intelligence:        #2563EB;    /* Vega intelligence */
  --intelligence-light:  #2563EB;
  --intelligence-subtle: #EFF6FF;
  --orange:       #e8721e;    /* Vega Orange */
  --orange-light: #f5914a;
  --orange-subtle:#fff1e8;
  --red:          #C22222;    /* Vega Red */
  --red-subtle:   #fdecea;
  --blue:         #1a73e8;    /* Vega Blue */
  --blue-light:   #4a9eff;
  --blue-subtle:  #e8f1fd;
  --charcoal:     #2d2d2b;    /* Deep charcoal */

  /* Primary CTA — intelligence */
  --primary:         var(--red);
  --primary-hover:   #A91E1E;
  --primary-fg:      #ffffff;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.14);
  --shadow-2xl: 0 40px 100px rgba(0,0,0,0.18);

  /* Glow effects */
  --glow-intelligence:  0 0 60px rgba(37,99,235,0.15);
  --glow-orange: 0 0 60px rgba(232,114,30,0.15);

  /* Hero gradient */
  --hero-bg: linear-gradient(160deg,
    #EFF6FF 0%,
    #ffffff 35%,
    #fef6ef 65%,
    #ffffff 100%);

  /* Glass */
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.9);
  --glass-blur:   blur(20px);
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           #0e0e0d;
    --bg-2:         #141413;
    --bg-3:         #1a1a18;
    --surface:      #161615;
    --surface-2:    #1e1e1c;
    --surface-3:    #252523;
    --border:       rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --divider:      rgba(255,255,255,0.05);

    --text:         #f0f0ee;
    --text-2:       #c8c8c5;
    --text-muted:   #8a8a87;
    --text-faint:   #555552;
    --text-inverse: #111110;

    --intelligence:        #2563EB;
    --intelligence-light:  #2563EB;
    --intelligence-subtle: rgba(37,99,235,0.12);
    --orange:       #f5914a;
    --orange-light: #f9b080;
    --orange-subtle: rgba(245,145,74,0.12);
    --red:          #f2665c;
    --red-subtle:   rgba(242,102,92,0.12);
    --blue:         #4a9eff;
    --blue-light:   #7bbeff;
    --blue-subtle:  rgba(74,158,255,0.12);
    --charcoal:     #d0d0ce;

    --primary:         var(--red);
    --primary-hover:   #A91E1E;
    --primary-fg:      #ffffff;

    --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
    --shadow-md:  0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.45);
    --shadow-xl:  0 24px 64px rgba(0,0,0,0.5);
    --shadow-2xl: 0 40px 100px rgba(0,0,0,0.55);

    --glow-intelligence:  0 0 80px rgba(37,99,235,0.2);
    --glow-orange: 0 0 80px rgba(245,145,74,0.2);

    --hero-bg: linear-gradient(160deg,
      #101a0b 0%,
      #0e0e0d 35%,
      #180e08 65%,
      #0e0e0d 100%);

    --glass-bg:     rgba(22,22,21,0.72);
    --glass-border: rgba(255,255,255,0.1);
    --glass-blur:   blur(20px);
  }
}

[data-theme="dark"] {
  --bg:           #0e0e0d;
  --bg-2:         #141413;
  --bg-3:         #1a1a18;
  --surface:      #161615;
  --surface-2:    #1e1e1c;
  --surface-3:    #252523;
  --border:       rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --divider:      rgba(255,255,255,0.05);

  --text:         #f0f0ee;
  --text-2:       #c8c8c5;
  --text-muted:   #8a8a87;
  --text-faint:   #555552;
  --text-inverse: #111110;

  --intelligence:        #2563EB;
  --intelligence-light:  #2563EB;
  --intelligence-subtle: rgba(37,99,235,0.12);
  --orange:       #f5914a;
  --orange-light: #f9b080;
  --orange-subtle: rgba(245,145,74,0.12);
  --red:          #f2665c;
  --red-subtle:   rgba(242,102,92,0.12);
  --blue:         #4a9eff;
  --blue-light:   #7bbeff;
  --blue-subtle:  rgba(74,158,255,0.12);
  --charcoal:     #d0d0ce;

  --primary:         var(--red);
  --primary-hover:   #A91E1E;
  --primary-fg:      #ffffff;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.45);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.5);
  --shadow-2xl: 0 40px 100px rgba(0,0,0,0.55);

  --glow-intelligence:  0 0 80px rgba(37,99,235,0.2);
  --glow-orange: 0 0 80px rgba(245,145,74,0.2);

  --hero-bg: linear-gradient(160deg,
    #101a0b 0%,
    #0e0e0d 35%,
    #180e08 65%,
    #0e0e0d 100%);

  --glass-bg:     rgba(22,22,21,0.72);
  --glass-border: rgba(255,255,255,0.1);
  --glass-blur:   blur(20px);
}