/*
 * Les Centristes — tokens (charte v2.4, DESIGN.md fait foi).
 * Trois niveaux : primitives → sémantiques → composants.
 * Aucun hex en dur ailleurs que dans ce fichier.
 */

@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/pretendard-variable-latin.woff2") format("woff2-variations"),
       url("../fonts/pretendard-variable-latin.woff2") format("woff2");
  font-weight: 45 930;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 1. Primitives */
  --hz-navy: #32508C;
  --hz-navy-deep: #243A6B;
  --hz-ink: #243A6B;
  --hz-sub: #4A5A78;
  --hz-blue: #4A6EB4;
  --hz-blue-deep: #3D5FA3;
  --hz-periwinkle: #8DA5D3;
  --hz-blue-soft: #E4EAF6;
  --hz-red: #E01E3C;
  --hz-red-deep: #C0112E;
  --hz-cream: #F3EFE4;
  --hz-cream-deep: #EFE9D8;
  --hz-bg: #F6F7F9;
  --hz-white: #FFFFFF;
  --hz-green: #1FA87A;

  /* 2. Sémantiques */
  --hz-fg: var(--hz-ink);
  --hz-fg-muted: var(--hz-sub);
  --hz-inverse-fg: var(--hz-white);
  --hz-hero-bg: var(--hz-navy);
  --hz-action: var(--hz-blue);
  --hz-action-hover: var(--hz-blue-deep);
  --hz-give: var(--hz-red);
  --hz-give-hover: var(--hz-red-deep);
  --hz-rule: var(--hz-cream-deep);
  --hz-focus-on-light: var(--hz-navy);
  --hz-focus-on-dark: var(--hz-white);
  --hz-success: var(--hz-green);
  --hz-error: var(--hz-red-deep);

  /* Typographie */
  --hz-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hz-display: clamp(2.5rem, 1rem + 8vw, 7.25rem);
  --hz-h1: clamp(2.25rem, 1.2rem + 4.5vw, 4.5rem);
  --hz-h2: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  --hz-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  --hz-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --hz-body-1: 1.0625rem;
  --hz-body-2: 1rem;
  --hz-small: 0.875rem;
  --hz-kicker: 0.75rem;
  --hz-measure: 66ch;

  /* Espacements — base 4 px */
  --hz-space-1: 4px;
  --hz-space-2: 8px;
  --hz-space-3: 12px;
  --hz-space-4: 16px;
  --hz-space-5: 24px;
  --hz-space-6: 32px;
  --hz-space-7: 48px;
  --hz-space-8: 64px;
  --hz-space-9: 96px;
  --hz-space-10: 128px;
  --hz-section-y: clamp(4rem, 3rem + 5vw, 8rem);

  /* Grille */
  --hz-container: 1240px;
  --hz-gutter: clamp(16px, 2.5vw, 32px);

  /* Rayons : rond = on agit, vif = on lit */
  --hz-radius: 2px;
  --hz-radius-pill: 999px;

  /* Profondeur et mouvement */
  --hz-glass: color-mix(in srgb, var(--hz-navy) 86%, transparent);
  --hz-glass-blur: blur(14px) saturate(140%);
  --hz-dur-fast: 160ms;
  --hz-dur: 240ms;
  --hz-dur-slow: 400ms;
  --hz-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* 3. Composants */
  --hz-btn-h: 48px;
  --hz-btn-h-xl: 60px;
  --hz-header-h: 72px;
  --hz-header-top: 12px;
  --hz-logo-h: 36px;
  --hz-field-h: 48px;
  --hz-card-pad: 20px;
}

@media (min-width: 1024px) {
  :root {
    --hz-header-h: 84px;
    --hz-header-top: 16px;
    --hz-logo-h: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}