/* Léo Larchevêque — Creative Maker : variables compilées depuis tokens.json. */

:root, [data-theme="light"] {
  --surface-000: #ffffff;
  --surface-100: #f4f4f4;
  --surface-200: #ececec;
  --surface-300: #e0e0e0;
  --surface-inverse: #0a0a0a;
  --surface-glass: #ffffffd9;
  --surface-glass-dark: #0a0a0acc;
  --ink: #0a0a0a;
  --ink-muted: #6b6b6b;
  --ink-faint: #767676;
  --ink-inverse: #ffffff;
  --ink-inverse-muted: #b0b0b0;
  --accent: #e8552b;
  --accent-soft: #fdeee9;
  --accent-ink: #a93a17;
  --on-accent: #ffffff;
  --hairline: #e4e4e4;
  --hairline-strong: #8f8f8f;
  --hairline-inverse: #333333;
  --focus-ring: #0a0a0a;
  --focus-ring-inverse: #ffffff;
  --sky-from: #2f9cc4;
  --sky-to: #ffffff;
  --scrim: #0a0a0a59;

  --shadow-card: 0 1px 2px #0a0a0a0f, 0 8px 24px #0a0a0a0a;
  --shadow-card-hover: 0 2px 6px #0a0a0a14, 0 18px 40px #0a0a0a1a;
  --shadow-pill: 0 2px 8px #0a0a0a14, 0 12px 32px #0a0a0a1f;
  --shadow-float: 0 20px 60px #0a0a0a2e;
  --shadow-leo: 0 24px 60px #0a0a0a59;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 140px;
  --gutter-mobile: 20px;
  --measure: 1200px;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --blur-reveal: 14px;
  --blur-reveal-strong: 26px;
  --blur-glass: 22px;

  --opacity-reveal: 0;
  --opacity-muted: 0.6;
  --opacity-scrim: 0.35;

  --z-content: 1;
  --z-nav: 50;
  --z-sticky: 60;

  --font-sans: "Poppins", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
}

.display-hero { font-family: var(--font-sans); font-size: 76px; line-height: 76px; font-weight: 600; letter-spacing: -0.06em; }
.display-xl { font-family: var(--font-sans); font-size: 58px; line-height: 58px; font-weight: 600; letter-spacing: -0.06em; }
.display-lg { font-family: var(--font-sans); font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.05em; }
.display-md { font-family: var(--font-sans); font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.04em; }
.display-sm { font-family: var(--font-sans); font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.03em; }
.display-leo { font-family: var(--font-sans); font-size: 220px; line-height: 180px; font-weight: 700; letter-spacing: -0.07em; }

.accent-hero { font-family: var(--font-serif); font-size: 76px; line-height: 76px; font-weight: 600; font-style: italic; letter-spacing: -0.02em; }
.accent-xl { font-family: var(--font-serif); font-size: 58px; line-height: 58px; font-weight: 600; font-style: italic; letter-spacing: -0.02em; }
.accent-lg { font-family: var(--font-serif); font-size: 44px; line-height: 48px; font-weight: 600; font-style: italic; letter-spacing: -0.02em; }
.accent-md { font-family: var(--font-serif); font-size: 32px; line-height: 36px; font-weight: 600; font-style: italic; letter-spacing: -0.02em; }

.lead { font-family: var(--font-sans); font-size: 22px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.meta { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.badge { font-family: var(--font-sans); font-size: 12px; line-height: 12px; font-weight: 500; letter-spacing: 0.01em; }
.tag { font-family: var(--font-sans); font-size: 11px; line-height: 11px; font-weight: 500; }
.button { font-family: var(--font-sans); font-size: 15px; line-height: 15px; font-weight: 500; letter-spacing: -0.01em; }