/*
 * tokens.css — Portfolio W3-NEXTGen · Design System
 *
 * [THÈSE DE RUPTURE]
 * 1. Axe Culturel : Bauhaus — fonctionnalisme pur, géométrie, typographie
 *    structurée. Une infrastructure se donne à voir comme telle : grille
 *    nette, hiérarchie assumée, zéro ornement gratuit.
 * 2. Contre-Pattern évité : dégradé aurora violet/indigo/cyan « AI-native »,
 *    Inter par défaut, rounded-2xl systématique, glassmorphism SaaS,
 *    « Look Claude » crème chaud + orange brûlé + serif.
 * 3. Palette Physique (oklch) :
 *    Teinte 1 — oklch(97% 0.006 75)  papier kraft clair   — fond/structure
 *    Teinte 2 — oklch(19% 0.012 55)  encre dense chaude    — texte/contenu
 *    Teinte 3 — oklch(52% 0.150 35)  cuivre forgé          — signal/action
 *
 * Fusion doctrinale : vocabulaire spectral CHROMATIC (espacements/durées
 * dérivés de primitives spectrales certifiées, non nommées — cf. règle
 * RESONANCE) + vocabulaire de composants issu de l'implémentation réelle
 * VITRA/Calzedonia (z-index nommé, radius, shadow, transitions). Dark
 * mode réellement implémenté ici (bascule `html.dark` + repli
 * `prefers-color-scheme` au premier rendu), clair par défaut.
 */

:root {
  /* ── Palette physique — mode clair (par défaut) ── */
  --color-surface: oklch(97% 0.006 75); /* papier kraft clair — fond shell */
  --color-surface-2: oklch(94% 0.008 75); /* fond légèrement relevé — cartes */
  --color-surface-3: oklch(91% 0.010 75); /* fond encore relevé — hover */
  --color-ink: oklch(19% 0.012 55); /* texte principal */
  --color-ink-soft: oklch(38% 0.014 55); /* texte secondaire */
  --color-ink-faint: oklch(48% 0.012 55); /* texte tertiaire, métadonnées — AA sur surface-2 */
  --color-border: oklch(85% 0.010 75); /* bordures discrètes */
  --color-signal: oklch(52% 0.150 35); /* cuivre forgé — CTA, liens actifs — AA sur surface-2 */
  --color-signal-dim: oklch(52% 0.150 35 / 0.14); /* fond teinté du signal */
  --color-signal-ink: oklch(98% 0.010 75); /* texte sur fond signal */
  --color-success: oklch(58% 0.130 150);
  --color-error: oklch(55% 0.180 25);

  /* ── Typographie — familles (aucun webfont importé : stacks système
       délibérés, sobriété Bauhaus, jamais Inter par défaut) ── */
  --font-sans: "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Typographie — poids ── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ── Typographie physique — tailles fluides (clamp), 2 tailles/vue max ── */
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --text-2xl: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  --text-3xl: clamp(3.25rem, 2.5rem + 3vw, 5.25rem);

  /* ── Ligne de base stricte ── */
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-loose: 1.75;

  /* ── Rythme spectral — espacements dérivés de primitives spectrales
       certifiées (ancres a₁/a₂/a₃ /10, vocabulaire fonctionnel exclusif) ── */
  --space-1: 0.353rem;
  --space-2: 0.706rem;
  --space-3: 1.413rem; /* z1 */
  --space-4: 1.767rem;
  --space-5: 2.102rem; /* z2 */
  --space-6: 2.501rem; /* z3 */
  --space-7: 3.531rem;
  --space-8: 5.003rem;
  --space-9: 7.062rem;

  /* ── Fréquences spectrales dérivées — durées d'animation ── */
  --duration-z1: calc(1s / 2.2497); /* ≈ 444ms — transitions courtes */
  --duration-z2: calc(1s / 3.3460); /* ≈ 299ms — transitions standard */
  --duration-z3: calc(1s / 3.9814); /* ≈ 251ms — micro-interactions */
  --ease-signature: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Rayons — logique géométrique, jamais arbitraire ── */
  --radius-none: 0;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-full: 9999px;

  /* ── Bordures ── */
  --border-thin: 1px;
  --border-card: 1px;

  /* ── Ombres — sobres, jamais décoratives ── */
  --shadow-sm: 0 1px 2px oklch(19% 0.012 55 / 0.06);
  --shadow-md: 0 4px 16px oklch(19% 0.012 55 / 0.08);
  --shadow-lg: 0 12px 32px oklch(19% 0.012 55 / 0.12);

  /* ── Structure — header, container, breakpoints ── */
  --header-height-mobile: 3.75rem;
  --header-height-desktop: 4.75rem;
  --container-max: 100rem;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* ── Z-index stack nommé ── */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 150; /* scrim derrière le mega-menu ouvert, sous le header */
  --z-megamenu: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-header: 1000; /* toujours au sommet — au-dessus de tout, sans exception */

  /* ── Transitions ── */
  --transition-fast: var(--duration-z3) var(--ease-signature);
  --transition-normal: var(--duration-z2) var(--ease-signature);
  --transition-slow: var(--duration-z1) var(--ease-signature);

  /* ── Bouton ── */
  --btn-height: 2.75rem;
  --btn-pad-x: var(--space-4);
  --btn-font-size: var(--text-sm);
  --btn-radius: var(--radius-xs);

  /* ── Carte ── */
  --card-pad: var(--space-4);
  --card-border: var(--border-card) solid var(--color-border);
  --card-radius: var(--radius-sm);

  color-scheme: light;
}

/* ─────────────────────────────────────────────
   Mode sombre — bascule manuelle (theme-toggle.js → html.dark)
   Repli automatique : prefers-color-scheme (voir bloc @media plus bas)
   ───────────────────────────────────────────── */
html.dark {
  --color-surface: #1e1e2e; /* bg — fond shell */
  --color-surface-2: #313244; /* overlay — cartes, éléments élevés */
  --color-surface-3: #181825; /* surface — puces/code imbriqués, encart en retrait */
  --color-ink: oklch(93% 0.008 75);
  --color-ink-soft: oklch(76% 0.010 75);
  --color-ink-faint: oklch(72% 0.010 75); /* AA sur surface-2 */
  --color-border: oklch(32% 0.014 260);
  --color-signal: oklch(72% 0.160 35); /* cuivre éclairci — AA sur surface-2 */
  --color-signal-dim: oklch(72% 0.160 35 / 0.18);
  --color-signal-ink: oklch(14% 0.010 260);
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.24);
  --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.32);
  --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.44);

  color-scheme: dark;
}

/* Repli premier rendu si aucune préférence explicite n'est stockée
   (theme-toggle.js pose html.dark/html.light dès le <head>, avant CSS,
   pour éviter le FOUC — ce bloc ne couvre que le cas JS désactivé). */
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark) {
    --color-surface: #1e1e2e;
    --color-surface-2: #313244;
    --color-surface-3: #181825;
    --color-ink: oklch(93% 0.008 75);
    --color-ink-soft: oklch(76% 0.010 75);
    --color-ink-faint: oklch(72% 0.010 75);
    --color-border: oklch(32% 0.014 260);
    --color-signal: oklch(72% 0.160 35);
    --color-signal-dim: oklch(72% 0.160 35 / 0.18);
    --color-signal-ink: oklch(14% 0.010 260);
    color-scheme: dark;
  }
}