/* ============================================
   Design Tokens - VoxDeck
   ============================================ */

:root {
  /* ── Brand palette ── */
  --color-navy-900: #102A43;
  --color-navy-800: #16385A;
  --color-navy-700: #1D4A73;

  --color-white:   #FFFFFF;
  --color-cream:   #F8FAFC;
  --color-mist:    #EEF5F8;

  --color-teal:      #27C2B8;
  --color-teal-bright: #35D8CD;
  --color-mint:      #74E0D5;
  --color-green:     #3BB273;
  --color-gold:      #F2B84B;
  --color-clay:      #D95D39;

  /* ── Semantic backgrounds ── */
  --color-bg:      var(--color-cream);
  --color-bg-soft: var(--color-mist);
  --color-bg-mist: var(--color-mist);
  --color-bg-dark: var(--color-navy-900);

  /* ── Text (light sections) ── */
  --color-text-primary:   var(--color-navy-900);
  --color-text-secondary: #4C6178;
  --color-text-muted:     #7C8FA3;

  /* ── Text (dark sections) ── */
  --color-text-on-dark:       #F8FAFC;
  --color-text-on-dark-soft:  rgba(248, 250, 252, 0.80);
  --color-text-on-dark-muted: rgba(248, 250, 252, 0.50);

  /* ── Accents ── */
  --color-accent:      var(--color-teal);
  --color-accent-gold: var(--color-gold);
  --color-accent-clay: var(--color-clay);

  /* ── Borders ── */
  --color-border:       rgba(16, 42, 67, 0.12);
  --color-border-hover: rgba(16, 42, 67, 0.26);
  --color-border-light: rgba(248, 250, 252, 0.16);
  --color-border-teal:  rgba(39, 194, 184, 0.34);

  /* ── Shadows ── */
  --shadow-sm:       0 2px 10px rgba(16, 42, 67, 0.06);
  --shadow-md:       0 8px 30px rgba(16, 42, 67, 0.10);
  --shadow-lg:       0 20px 60px rgba(16, 42, 67, 0.17);
  --shadow-card:     0 2px 14px rgba(16, 42, 67, 0.07), 0 1px 0 rgba(255,255,255,0.9) inset;
  --shadow-phone:    0 34px 90px rgba(0,0,0,0.30), 0 0 50px rgba(39,194,184,0.10);
  --shadow-elevated: 0 24px 70px rgba(0,0,0,0.22);

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  --text-display: clamp(3rem, 6.6vw, 6.4rem);
  --text-h1:      clamp(2rem, 4vw, 3.6rem);
  --text-h2:      clamp(1.05rem, 2vw, 1.35rem);
  --text-body:    1rem;
  --text-sm:      0.9rem;
  --text-xs:      0.78rem;
  --text-2xs:     0.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;

  /* ── Layout ── */
  --container-max:     1180px;
  --container-padding: var(--space-6);

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Motion ── */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 360ms ease;
}