/* ============================================================
   EXTRATIME — Design tokens
   Source unique des couleurs, typographies, espacements, rythmes.
   Le vert d'accent et le logo sont PROVISOIRES : ne rien coder en
   dur ailleurs, tout passe par --et-accent / .wordmark.
   ============================================================ */

:root {
  /* ---- Couleurs de marque (brief) ---- */
  --et-ink: #0A0A0A;
  --et-paper: #F5F4EF;
  --et-accent: #B4F071;          /* PROVISOIRE — valeur non confirmée par le client */
  --et-accent-ink: #0A0A0A;      /* texte posé sur l'accent */

  /* ---- Dérivés neutres (calculés une fois, jamais improvisés) ---- */
  --et-ink-92: #16161499;
  --et-paper-dim: #E8E7E0;
  --et-paper-line: #CFCDC2;
  --et-ink-line: #262624;
  --et-ink-raise: #131311;
  --et-ink-raise-2: #1B1B18;

  /* Textes secondaires : contraste vérifié sur leur fond respectif */
  --et-on-ink: #F5F4EF;
  --et-on-ink-soft: #A8A69C;     /* 7.0:1 sur #0A0A0A */
  --et-on-paper: #0A0A0A;
  --et-on-paper-soft: #55534C;   /* 7.3:1 sur #F5F4EF */

  --et-danger: #C8452F;
  --et-danger-on-ink: #FF8A72;

  /* ---- Typographie ----
     Aucune webfont externe : pas de dépendance réseau, pas de
     question de licence. Le caractère vient de l'échelle et du
     tracking, pas d'un fichier de police. */
  --et-font-display: "Helvetica Neue", "Inter", "Segoe UI", Arial, system-ui, sans-serif;
  --et-font-text: "Inter", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --et-font-mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  /* Voix éditoriale : italique à empattements pour chapôs et citations,
     contrepoint « magazine » aux titres en capitales. Polices système. */
  --et-font-editorial: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* Échelle fluide 320 → 1440 */
  /* d1 est calibré sur la COLONNE du hero, pas sur le viewport :
     « CONVERSATION » doit tenir dans la colonne à 320 comme à 1440. */
  --et-d1: clamp(2.4rem, 0.9rem + 6.9vw, 7.25rem);     /* hero pleine largeur : « CONVERSATION » tient à 320 */
  --et-d2: clamp(2.1rem, 1.15rem + 4.7vw, 4.75rem);    /* titres de page */
  --et-d3: clamp(1.75rem, 1.1rem + 3.2vw, 3.5rem);     /* titres de section */
  --et-d4: clamp(1.4rem, 1.05rem + 1.7vw, 2.25rem);    /* titres de carte */
  --et-t1: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);    /* chapô */
  --et-t2: 0.9375rem;                                   /* corps */
  --et-t3: 0.8125rem;                                   /* corps secondaire */
  --et-label: 0.625rem;                                 /* eyebrow / meta */
  --et-label-lg: 0.6875rem;

  --et-track-display: -0.045em;
  --et-track-display-tight: -0.06em;
  --et-track-label: 0.18em;

  /* ---- Espacement (échelle 4px) ---- */
  --et-1: 4px;  --et-2: 8px;  --et-3: 12px; --et-4: 16px;
  --et-5: 24px; --et-6: 32px; --et-7: 44px; --et-8: 60px;
  --et-9: 80px; --et-10: 112px;

  --et-section-y: clamp(56px, 7vw, 112px);
  --et-gutter: clamp(18px, 4.2vw, 56px);
  --et-container: 1360px;
  --et-measure: 62ch;

  /* ---- Traits, rayons, ombres ---- */
  --et-hairline: 1px;
  --et-radius: 0px;              /* parti pris éditorial : pas d'arrondi */
  --et-radius-pill: 999px;

  /* ---- Mouvement (discret, respecte prefers-reduced-motion) ---- */
  --et-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --et-fast: 140ms;
  --et-slow: 320ms;

  /* ---- Empilement ---- */
  --z-header: 60;
  --z-menu: 70;
  --z-dialog: 90;
  --z-skip: 100;

  color-scheme: dark;
}

/* Le site est en noir par défaut ; .surface-paper inverse localement. */
.surface-ink {
  --surface: var(--et-ink);
  --surface-raise: var(--et-ink-raise);
  --surface-line: var(--et-ink-line);
  --on-surface: var(--et-on-ink);
  --on-surface-soft: var(--et-on-ink-soft);
  --on-surface-danger: var(--et-danger-on-ink);
  background: var(--surface);
  color: var(--on-surface);
}

.surface-paper {
  --surface: var(--et-paper);
  --surface-raise: var(--et-paper-dim);
  --surface-line: var(--et-paper-line);
  --on-surface: var(--et-on-paper);
  --on-surface-soft: var(--et-on-paper-soft);
  --on-surface-danger: var(--et-danger);
  background: var(--surface);
  color: var(--on-surface);
}