/* ═══════════════════════════════════════════════
   ANDORIA DESIGN SYSTEM v1.0 — DESIGN TOKENS
   variables.css
   Single source of truth for all design decisions.
   See docs/ANDORIA-DESIGN-SYSTEM.md for the full spec.
═══════════════════════════════════════════════ */

:root {
  /* ── Colors ──────────────────────────────── */
  --color-bg:          #071A12;  /* Deep Forest Green */
  --color-surface:     #0B2419;  /* Dark Emerald */
  --color-surface2:    #10301F;
  --color-surface3:    #163B27;
  --color-border:      rgba(242, 182, 50, 0.12);
  --color-border-gold: rgba(242, 182, 50, 0.28);

  /* Gold — primary accent (solar energy) */
  --color-gold:        #F2B632;  /* Rich Solar Gold */
  --color-gold-light:  #FFC94A;  /* Warm Golden Yellow */
  --color-gold-dim:    rgba(242, 182, 50, 0.12);
  --color-gold-glow:   rgba(242, 182, 50, 0.35);

  /* Logo mark stripes */
  --color-logo-red:    #C1272D;
  --color-logo-orange: #E8862E;

  /* Text */
  --color-text:        #FFFFFF;
  --color-text-bone:   #F5F3EC;
  --color-text-muted:  #D9D9D9;
  --color-text-dim:    #8FA398;

  /* Semantic (state only — never decorative) */
  --color-success:     #34D399;
  --color-warning:     #FBBF24;
  --color-danger:      #F0554F;

  /* ── Typography ──────────────────────────── */
  --font-primary:   'Cairo', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ── Spacing ─────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── Border Radius ───────────────────────── */
  --radius-sm:  8px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-full:9999px;

  /* ── Shadows ─────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow:      0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 48px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 0 32px rgba(242, 182, 50, 0.22);
  --shadow-glow: 0 0 48px rgba(242, 182, 50, 0.18);

  /* ── Motion ──────────────────────────────── */
  --ease-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-page:   260ms; /* subtle step transition — was 450ms, felt slow/dramatic */

  /* ── Layout ──────────────────────────────── */
  --progress-height:    64px;
  --max-content-width:  480px;
  --footer-height:      80px;
  --brand-footer-height: 34px;

  /* ── Z-Index ─────────────────────────────── */
  --z-base:    0;
  --z-sticky:  10;
  --z-progress:50;
  --z-overlay: 80;
  --z-modal:   90;
  --z-loading: 9999;
}

/* ── Dark mode is the only mode ── */
/* All styles use var(--color-bg) etc. */
/* No light mode variant needed for this product. */