design-system/tokens.css

/* ==========================================================================
   @transformer/ui — tokens.css
   Schéma canonique de tokens. Nommage par RÔLE, jamais par couleur brute.
   Les valeurs ci-dessous sont le thème NEUTRE par défaut ; chaque site les
   surcharge via un fichier theme/*.css (palette + polices UNIQUEMENT).

   Échelle fluide calibrée entre 360px (22.5rem) et 1280px (80rem).
   Breakpoints (constantes, voir PROTOCOLE.md) :
   base 360 · sm 480 · md 768 · lg 1024 · xl 1280

   Tout le fichier vit dans @layer tf-tokens : un theme/*.css (non-layeré)
   gagne TOUJOURS sur ces valeurs, quel que soit l'ordre de chargement.
   ========================================================================== */

@layer tf-tokens, tf-reset;

@layer tf-tokens {

:root {
  color-scheme: light dark;

  /* --- Couleur : rôles (mode clair par défaut) --------------------------- */
  --bg: #ffffff;
  --bg-alt: #f5f5f3;
  --surface: #ffffff;
  --surface-2: #eeeeeb;

  --text: #1b1b1f;
  --text-muted: #4b4b52;
  --text-subtle: #6e6e76;

  --border: #e0e0dd;
  --border-strong: #a8a8a2;

  --primary: #1b1b1f;
  --primary-hover: #333338;
  --on-primary: #ffffff;

  --accent: #1b1b1f;
  --on-accent: #ffffff;

  --link: #1d4ed8;
  --link-hover: #1e40af;

  --focus-ring: #2563eb;

  --success: #15803d;
  --warning: #a16207;
  --danger: #b91c1c;

  /* --- Ombres (discrètes ; surchargées en sombre) ------------------------ */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);

  /* --- Typographie ------------------------------------------------------- */
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, monospace;

  /* Échelle fluide 360→1280 (min → max) */
  --fs-xs: clamp(0.75rem, 0.728rem + 0.098vw, 0.8125rem);   /* 12 → 13 */
  --fs-sm: clamp(0.875rem, 0.851rem + 0.109vw, 0.9375rem);  /* 14 → 15 */
  --fs-base: clamp(1rem, 0.951rem + 0.217vw, 1.125rem);     /* 16 → 18 */
  --fs-lg: clamp(1.125rem, 1.076rem + 0.217vw, 1.25rem);    /* 18 → 20 */
  --fs-xl: clamp(1.25rem, 1.152rem + 0.435vw, 1.5rem);      /* 20 → 24 */
  --fs-2xl: clamp(1.5rem, 1.304rem + 0.87vw, 2rem);         /* 24 → 32 */
  --fs-3xl: clamp(1.875rem, 1.533rem + 1.522vw, 2.75rem);   /* 30 → 44 */
  --fs-4xl: clamp(2.25rem, 1.761rem + 2.174vw, 3.5rem);     /* 36 → 56 */

  --lh-tight: 1.15;
  --lh-base: 1.6;
  --lh-loose: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Spacing (base 4/8px, fluide sur les grands paliers) --------------- */
  --space-2xs: 0.25rem;                                     /* 4 */
  --space-xs: 0.5rem;                                       /* 8 */
  --space-sm: 0.75rem;                                      /* 12 */
  --space-md: 1rem;                                         /* 16 */
  --space-lg: 1.5rem;                                       /* 24 */
  --space-xl: 2rem;                                         /* 32 */
  --space-2xl: clamp(2.5rem, 1.913rem + 2.609vw, 4rem);     /* 40 → 64 */
  --space-3xl: clamp(4rem, 3.217rem + 3.478vw, 6rem);       /* 64 → 96 */

  /* --- Rayons ------------------------------------------------------------ */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 999px;

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 75rem;                                   /* ~1200px */
  --container-pad: clamp(1rem, 0.609rem + 1.739vw, 2rem);   /* 16 → 32 */

  /* --- Z-index ------------------------------------------------------------ */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ==========================================================================
   Mode sombre — deux portes d'entrée, le toggle explicite gagne toujours :
   1. préférence système (tant que data-theme n'est pas forcé à "light")
   2. attribut data-theme="dark" posé par le toggle du site
   Un theme/*.css surcharge ces mêmes blocs avec sa palette.
   ========================================================================== */

:root[data-theme="dark"] {
  --bg: #121214;
  --bg-alt: #18181b;
  --surface: #1e1e21;
  --surface-2: #26262a;

  --text: #ededf0;
  --text-muted: #b4b4bb;
  --text-subtle: #8b8b93;

  --border: #2f2f34;
  --border-strong: #4d4d55;

  --primary: #ededf0;
  --primary-hover: #ffffff;
  --on-primary: #121214;

  --accent: #ededf0;
  --on-accent: #121214;

  --link: #8ab4f8;
  --link-hover: #aecbfa;

  --focus-ring: #8ab4f8;

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121214;
    --bg-alt: #18181b;
    --surface: #1e1e21;
    --surface-2: #26262a;

    --text: #ededf0;
    --text-muted: #b4b4bb;
    --text-subtle: #8b8b93;

    --border: #2f2f34;
    --border-strong: #4d4d55;

    --primary: #ededf0;
    --primary-hover: #ffffff;
    --on-primary: #121214;

    --accent: #ededf0;
    --on-accent: #121214;

    --link: #8ab4f8;
    --link-hover: #aecbfa;

    --focus-ring: #8ab4f8;

    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
  }
}

} /* @layer tf-tokens */