/* ═══════════════════════════════════════════
   Hoyeende — Design Tokens
   Source unique de toutes les valeurs visuelles.
   © 2026 Hoyeende — Tous droits réservés
   ═══════════════════════════════════════════ */

/* ─── Polices ─── */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Bree Serif';
  src: url('../assets/fonts/BreeSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ─── Tokens ─── */

:root {
  /* Surface */
  --surface-ground:    #F7F6F2;
  --surface-raised:    #FFFFFF;
  --surface-sunken:    #EEEDEA;
  --surface-inverse:   #1B1D21;

  /* Encre */
  --ink-primary:       #1B1D21;
  --ink-secondary:     #5A5D66;
  --ink-tertiary:      #9A9DA6;
  --ink-inverse:       #F0EFE9;

  /* Accent — indigo profond */
  --accent:            #3B3F8C;
  --accent-hover:      #2F3270;
  --accent-soft:       #E8E8F5;
  --accent-text:       #26215C;

  /* Signaux */
  --signal-success:    #1A7A4C;
  --signal-success-bg: #E6F5ED;
  --signal-warning:    #B8860B;
  --signal-warning-bg: #FEF7E6;
  --signal-error:      #C53030;
  --signal-error-bg:   #FEE8E8;

  /* Bordures */
  --border:            #D8D7D3;
  --border-strong:     #B0AFB0;
  --border-focus:      var(--accent);

  /* Ombres */
  --shadow-sm:         0 1px 2px rgba(27,29,33,0.06);
  --shadow-md:         0 4px 12px rgba(27,29,33,0.08);
  --shadow-lg:         0 12px 32px rgba(27,29,33,0.12);

  /* Rayons — angles francs partout, seule la pilule reste arrondie (badges) */
  --radius-sm:         0;
  --radius-md:         0;
  --radius-lg:         0;
  --radius-pill:       100px;

  /* Typographie */
  --font-display:      'Space Grotesk', system-ui, sans-serif;
  --font-body:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:         'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace;
  --font-accent:       'Bree Serif', Georgia, serif; /* accent éditorial ciblé : accroche + logo uniquement */

  --text-xs:           0.75rem;
  --text-sm:           0.875rem;
  --text-base:         1rem;
  --text-lg:           1.125rem;
  --text-xl:           1.25rem;
  --text-2xl:          1.563rem;
  --text-3xl:          1.953rem;
  --text-4xl:          2.441rem;

  --leading-tight:     1.2;
  --leading-normal:    1.55;
  --leading-relaxed:   1.7;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.12em;

  /* Espacement (base 8px) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Transitions */
  --ease:              150ms ease;
  --ease-progress:     300ms linear;

  /* Largeur du conteneur */
  --container-width:   1120px;
  --container-pad:     20px;

  /* Fonds média — noir/blanc physiques (letterboxing vidéo, contour de texte
     incrusté), volontairement identiques en mode clair et sombre : contrairement
     aux couleurs de surface, un bandeau vidéo ne doit pas suivre le thème. */
  --media-black:       #000;
  --media-white:       #fff;
}

/* ─── Mode sombre ─── */

html.dark {
  --surface-ground:    #111215;
  --surface-raised:    #1B1D22;
  --surface-sunken:    #0C0D0F;
  --surface-inverse:   #F0EFE9;

  --ink-primary:       #E8E7E3;
  --ink-secondary:     #9A9DA6;
  --ink-tertiary:      #5A5D66;
  --ink-inverse:       #1B1D21;

  --accent:            #9498E8;
  --accent-hover:      #ADB0EF;
  --accent-soft:       #2A2C5C;
  --accent-text:       #C4C7F5;

  --signal-success:    #3CD584;
  --signal-success-bg: #132E1F;
  --signal-warning:    #E0A820;
  --signal-warning-bg: #2E2510;
  --signal-error:      #F06060;
  --signal-error-bg:   #301414;

  --border:            #2C2E33;
  --border-strong:     #44464D;
}

/* ─── Base ─── */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-primary);
  background: var(--surface-ground);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

code, pre, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Accent éditorial ciblé : titre d'accroche + nom de marque uniquement.
   Un seul poids disponible (400) : ne pas forcer de graisse dessus. */
.accent-serif {
  font-family: var(--font-accent);
  font-weight: 400;
}