/* ═══════════════════════════════════════════════════════
   Design System — Thaïs Bendixen Portfolio
   ═══════════════════════════════════════════════════════
   Single source of truth for colors, typography, spacing,
   radii, and transitions. Reference the hero section as
   the canonical design language.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Color Palette ── */
  --color-primary:       #758bfd;
  --color-dark:          #180d34;
  --color-light:         #aeb8fe;
  --color-bg:            #fafaff;
  --color-text:          #1a1230;
  --color-text-muted:    #6b6580;
  --color-primary-soft:  rgba(117, 139, 253, 0.10);
  --color-primary-mid:   rgba(117, 139, 253, 0.25);

  /* ── Font Families ── */
  --font-sans:   'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-retro:  'Press Start 2P', monospace;
  --font-mono:   'Courier New', Courier, monospace;

  /* ── Type Scale (fluid, clamp-based) ──
     Display → Hero name
     H1      → Section headings (hero-level emphasis)
     H2      → Sub-section headings (coming-soon, etc.)
     Body    → Subtitles, intros, descriptions
     Small   → Captions, hints                           */
  --text-display:    clamp(2.6rem, 7vw, 5.5rem);
  --text-h2:         clamp(1.25rem, 2.5vw, 1.55rem);
  --text-body:       clamp(1.05rem, 2vw, 1.25rem);
  --text-body-sm:    clamp(0.95rem, 1.8vw, 1.1rem);
  --text-btn:        1rem;

  /* ── Font Weights ── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ── Line Heights ── */
  --leading-tight:   1.05;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ── Letter Spacing ── */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;

  /* ── Spacing Scale ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 56px;
  --space-6xl: 80px;
  --space-7xl: 96px;

  /* ── Border Radius ── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 50%;

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-smooth: 0.4s ease-out;

  /* ── Shadows ── */
  --shadow-btn-primary: 0 4px 14px rgba(117, 139, 253, 0.35);
  --shadow-btn-primary-hover: 0 6px 20px rgba(117, 139, 253, 0.45);
  --shadow-card: 0 20px 60px rgba(10, 6, 30, 0.6);
}