/* ============================================
   Design Tokens
   ============================================ */

:root {
  /* ── Brand palette ── */
  --color-teal-900: #023D43;
  --color-teal-800: #03484F;
  --color-teal-700: #045A63;
  --color-teal-600: #0B6B72;

  --color-cream-50:    #FCF7EF;
  --color-cream-100:   #FDF5E0;
  --color-beige:       #EADCB6;
  --color-gold:        #F6C666;
  --color-gold-bright: #FFD47A;
  --color-mist:        #E8F0F0;
  --color-blush:       #FBEAE8;
  --color-clay:        #BD5138;

  /* ── Semantic backgrounds ── */
  --color-bg:      var(--color-cream-50);
  --color-bg-soft: var(--color-cream-100);
  --color-bg-mist: var(--color-mist);
  --color-bg-dark: var(--color-teal-700);

  /* ── Text (light sections) ── */
  --color-text-primary:   #10292D;
  --color-text-secondary: #52686B;
  --color-text-muted:     #789094;

  /* ── Text (dark sections) ── */
  --color-text-on-dark:       #FCF7EF;
  --color-text-on-dark-soft:  rgba(252, 247, 239, 0.78);
  --color-text-on-dark-muted: rgba(252, 247, 239, 0.48);

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

  /* ── Borders ── */
  --color-border:       rgba(4, 90, 99, 0.12);
  --color-border-hover: rgba(4, 90, 99, 0.26);
  --color-border-light: rgba(252, 247, 239, 0.16);
  --color-border-gold:  rgba(246, 198, 102, 0.34);

  /* ── Shadows ── */
  --shadow-sm:       0 2px 10px rgba(2, 61, 67, 0.06);
  --shadow-md:       0 8px 30px rgba(2, 61, 67, 0.10);
  --shadow-lg:       0 20px 60px rgba(2, 61, 67, 0.17);
  --shadow-card:     0 2px 14px rgba(2, 61, 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(246,198,102,0.08);
  --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(3.25rem, 7vw, 6.9rem);
  --text-h1:      clamp(2rem, 4vw, 3.75rem);
  --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;
}