/* ═══════════════════════════════════════════════════════════
   TIANX STUDIO — Design Tokens
   "Midnight Architect" Design System
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── PRIMARY: Deep Navy ─────────────────────────────── */
  --primary:        #0C1222;
  --primary-90:     #141D33;
  --primary-70:     #1E2A45;
  --primary-50:     rgba(12, 18, 34, 0.50);
  --primary-30:     rgba(12, 18, 34, 0.30);
  --primary-10:     rgba(12, 18, 34, 0.08);
  --primary-05:     rgba(12, 18, 34, 0.04);

  /* ─── SURFACE: Cool Ivory ────────────────────────────── */
  --surface:        #F7F8FA;
  --surface-warm:   #F2F0ED;
  --surface-card:   #FFFFFF;
  --surface-dark:   #0C1222;

  /* ─── ACCENT: Platinum Gold ──────────────────────────── */
  --accent:         #A89068;
  --accent-light:   #C4AA7E;
  --accent-dark:    #8A7554;
  --accent-pale:    rgba(168, 144, 104, 0.10);
  --accent-glow:    rgba(168, 144, 104, 0.20);

  /* ─── SIGNAL: Electric Blue ──────────────────────────── */
  --signal:         #4A7BF7;
  --signal-light:   #7DA0FA;
  --signal-dark:    #3460D0;
  --signal-pale:    rgba(74, 123, 247, 0.08);
  --signal-glow:    rgba(74, 123, 247, 0.15);

  /* ─── TEXT HIERARCHY ─────────────────────────────────── */
  --text-primary:   #0C1222;
  --text-secondary: #5A6175;
  --text-muted:     #8B91A0;
  --text-inverse:   #F7F8FA;
  --text-accent:    #A89068;

  /* ─── BORDERS & DIVIDERS ─────────────────────────────── */
  --border:         rgba(12, 18, 34, 0.08);
  --border-strong:  rgba(12, 18, 34, 0.15);
  --border-accent:  rgba(168, 144, 104, 0.30);
  --border-light:   rgba(255, 255, 255, 0.10);
  --border-light-strong: rgba(255, 255, 255, 0.20);

  /* ─── SHADOWS ────────────────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(12, 18, 34, 0.04);
  --shadow-md:      0 4px 16px rgba(12, 18, 34, 0.06);
  --shadow-lg:      0 8px 32px rgba(12, 18, 34, 0.08);
  --shadow-xl:      0 16px 48px rgba(12, 18, 34, 0.12);
  --shadow-glow:    0 0 40px rgba(74, 123, 247, 0.10);

  /* ─── TYPOGRAPHY ─────────────────────────────────────── */
  --font-display:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:      'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ─── SPACING ────────────────────────────────────────── */
  --space-2xs:  0.25rem;    /* 4px   */
  --space-xs:   0.5rem;     /* 8px   */
  --space-sm:   1rem;       /* 16px  */
  --space-md:   2rem;       /* 32px  */
  --space-lg:   4rem;       /* 64px  */
  --space-xl:   7rem;       /* 112px */
  --space-2xl:  11rem;      /* 176px */
  --space-3xl:  16rem;      /* 256px */

  /* ─── BORDER RADIUS ──────────────────────────────────── */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-pill:  100px;

  /* ─── TRANSITIONS ────────────────────────────────────── */
  --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --duration-sm:  0.2s;
  --duration-md:  0.45s;
  --duration-lg:  0.8s;
  --transition:   0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ─── LAYOUT ─────────────────────────────────────────── */
  --container-max:  1200px;
  --container-wide: 1400px;
  --container-pad:  2rem;

  /* ─── Z-INDEX SCALE ──────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   50;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    300;
}