/*
 * Sympa — tokens.css
 *
 * Le « vocabulaire » visuel du thème : variables CSS (couleurs, typo,
 * espacement, radius, ombres, motion, container) + déclarations @font-face.
 * Aucun style n'est appliqué ici — uniquement des valeurs réutilisables.
 *
 * Les styles de base (reset, body, typographie) sont dans global.css ;
 * les animations dans motion.css.
 *
 * Tokens repris de colors_and_type.css du design system (source de vérité).
 * Seule adaptation : chemins @font-face 'fonts/…' → '../fonts/…'.
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Brand (primary at 600) ─────────────────────── */
  --sympa-brand-50:  #EDEEF9;
  --sympa-brand-100: #D5D8F2;
  --sympa-brand-200: #B5BAE8;
  --sympa-brand-300: #9098DD;
  --sympa-brand-400: #7078D2;
  --sympa-brand-500: #5C67D8;
  --sympa-brand-600: #4F5BD5;  /* PRIMARY */
  --sympa-brand-700: #4550BC;
  --sympa-brand-800: #3B45A0;
  --sympa-brand-900: #2C3375;

  /* ── Pastel accents ─────────────────────────────── */
  --sympa-mint:    #D2F0E3;
  --sympa-peach:   #FFE0D0;
  --sympa-lavande: #E8E0F0;
  --sympa-jaune:   #FFF3D0;
  /* Pastels d'extension : utilisés uniquement par les badges (.s-badge--*)
   * pour différencier davantage de tags et catégories. Même luminance et
   * saturation que les 4 pastels ci-dessus. */
  --sympa-rose:      #FFD8E5;
  --sympa-bleu:      #D0E5F5;
  --sympa-sauge:     #DDE9D2;
  --sympa-corail:    #FFCDB8;  /* rouge-saumon — n8n */
  --sympa-orange:    #FFD8B8;  /* orange vif — Zapier */
  --sympa-gris:      #E5E2DA;  /* neutre — Notion */
  --sympa-emeraude:  #BFE5D5;  /* vert ChatGPT/OpenAI */
  --sympa-ocre:      #F0D5A8;  /* ocre/cuivre — Claude */
  --sympa-rouge:     #FFCCCC;  /* rouge Google — Gmail */
  --sympa-prune:     #DDC8F0;  /* violet vif — Make */
  --sympa-turquoise: #BFE5E5;  /* cyan (réserve) */

  /* Pastel deep text (paired with the matching pastel bg) */
  --sympa-mint-ink:      #1B5E3F;
  --sympa-mint-label:    #2D7A52;
  --sympa-peach-ink:     #8B4026;
  --sympa-peach-label:   #A85A3A;
  --sympa-lavande-ink:   #4A3670;
  --sympa-lavande-label: #6B5A8A;
  --sympa-jaune-ink:     #7A6520;
  --sympa-jaune-label:   #9A8540;
  --sympa-rose-ink:      #8B3A5A;
  --sympa-bleu-ink:      #234A6B;
  --sympa-sauge-ink:     #3F5E2A;
  --sympa-corail-ink:    #8B3520;
  --sympa-orange-ink:    #8B5018;
  --sympa-gris-ink:      #3E3E4A;
  --sympa-emeraude-ink:  #1F5A45;
  --sympa-ocre-ink:      #6B4818;
  --sympa-rouge-ink:     #8B2828;
  --sympa-prune-ink:     #4A2B7A;
  --sympa-turquoise-ink: #1F5C5F;

  /* ── Ink (text) ─────────────────────────────────── */
  --sympa-ink-100: #E8E4DC;
  --sympa-ink-200: #D0CBC0;
  --sympa-ink-300: #B5B0A5;
  --sympa-ink-400: #8A857A;
  --sympa-ink-500: #6A6A7A;
  --sympa-ink-600: #4A4A5A;
  --sympa-ink-700: #2E2E3E;
  --sympa-ink-900: #1A1A2E;  /* primary text + button border */

  /* ── Surfaces ───────────────────────────────────── */
  --sympa-paper:     #FAF5EB;  /* page background — never pure white */
  --sympa-surface:   #FFFFFF;  /* content cards */
  --sympa-line:      #2A2A3A;  /* strong borders (buttons) */
  --sympa-line-soft: #DDD8CE;  /* fine borders (content cards) */

  /* ── Semantic ───────────────────────────────────── */
  --sympa-success-100: #E2F5EC;
  --sympa-success-600: #2D8F5C;
  --sympa-warn-100:    #FBF2DC;
  --sympa-warn-600:    #D4A017;
  --sympa-danger-100:  #FAE4E2;
  --sympa-danger-600:  #C94040;
  --sympa-info-100:    #EDEEF9;
  --sympa-info-600:    #4F5BD5;

  /* ── Type ───────────────────────────────────────── */
  --sympa-font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sympa-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Base sizes */
  --sympa-text-display-xl: 56px / 64px var(--sympa-font-sans);
  --sympa-text-display-lg: 44px / 52px var(--sympa-font-sans);
  --sympa-text-h1:         36px / 44px var(--sympa-font-sans);
  --sympa-text-h2:         28px / 36px var(--sympa-font-sans);
  --sympa-text-h3:         22px / 30px var(--sympa-font-sans);
  --sympa-text-h4:         18px / 26px var(--sympa-font-sans);
  --sympa-text-body-lg:    18px / 28px var(--sympa-font-sans);
  --sympa-text-body:       16px / 24px var(--sympa-font-sans);
  --sympa-text-body-sm:    14px / 20px var(--sympa-font-sans);
  --sympa-text-caption:    12px / 16px var(--sympa-font-sans);
  --sympa-text-overline:   11px / 16px var(--sympa-font-sans);
  --sympa-text-code:       14px / 20px var(--sympa-font-mono);

  /* ── Spacing (4px base) ─────────────────────────── */
  --sympa-space-0:   0px;
  --sympa-space-1:   4px;
  --sympa-space-2:   8px;
  --sympa-space-3:   12px;
  --sympa-space-4:   16px;
  --sympa-space-5:   20px;
  --sympa-space-6:   24px;
  --sympa-space-8:   32px;
  --sympa-space-10:  40px;
  --sympa-space-12:  48px;
  --sympa-space-16:  64px;
  --sympa-space-20:  80px;
  --sympa-space-24:  96px;
  --sympa-space-32:  128px;

  /* ── Radius ─────────────────────────────────────── */
  --sympa-radius-none: 0px;
  --sympa-radius-xs:   4px;
  --sympa-radius-sm:   6px;
  --sympa-radius-md:   8px;   /* buttons, inputs */
  --sympa-radius-lg:   12px;  /* cards, modals */
  --sympa-radius-xl:   16px;  /* large cards, sections */
  --sympa-radius-full: 9999px;

  /* ── Shadow ─────────────────────────────────────── */
  --sympa-shadow-none:   none;
  --sympa-shadow-xs:     0 1px 2px rgba(26, 26, 46, 0.04);
  --sympa-shadow-sm:     0 1px 3px rgba(26, 26, 46, 0.06), 0 1px 2px rgba(26, 26, 46, 0.04);
  --sympa-shadow-md:     0 4px 12px rgba(26, 26, 46, 0.06), 0 2px 4px rgba(26, 26, 46, 0.04);
  --sympa-shadow-lg:     0 12px 32px rgba(26, 26, 46, 0.08), 0 4px 8px rgba(26, 26, 46, 0.04);
  --sympa-shadow-offset: 3px 3px 0 #1A1A2E;  /* signature CTA */

  /* ── Motion ─────────────────────────────────────── */
  --sympa-dur-xs:    80ms;
  --sympa-dur-sm:   160ms;
  --sympa-dur-md:   240ms;
  --sympa-dur-lg:   480ms;
  --sympa-dur-xl:   720ms;
  --sympa-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --sympa-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Container ──────────────────────────────────── */
  --sympa-container-max:     1200px;
  --sympa-container-reading: 680px;
  --sympa-gutter-mobile:     16px;
  --sympa-gutter-desktop:    24px;

  /* ── Semantic mapping (consumer-facing) ─────────── */
  --color-bg:        var(--sympa-paper);
  --color-surface:   var(--sympa-surface);
  --color-fg:        var(--sympa-ink-900);
  --color-fg-muted:  var(--sympa-ink-500);
  --color-fg-soft:   var(--sympa-ink-400);
  --color-border:    var(--sympa-line-soft);
  --color-border-strong: var(--sympa-line);
  --color-accent:    var(--sympa-brand-600);
  --color-accent-hover: var(--sympa-brand-700);
  --color-link:      var(--sympa-brand-500);

  --font-sans: var(--sympa-font-sans);
  --font-mono: var(--sympa-font-mono);
}