/* Neosaku.sh : variables du thème.
 * Chargé avant /style.css sur chaque page. style.css n'utilise que ces variables.
 */

:root {
  color-scheme: dark;

  /* Fonds (le « noir », légèrement bleuté) */
  --color-paper:        oklch(15.5% 0.006 255);
  --color-paper-2:      oklch(18.5% 0.007 255);
  --color-paper-3:      oklch(22% 0.008 255);

  /* Filets */
  --color-rule-2:       oklch(25% 0.008 255);
  --color-rule:         oklch(31% 0.009 255);
  --color-rule-strong:  oklch(52% 0.012 255);   /* bordures des champs, contraste 3:1 */

  /* Textes (le « blanc ») */
  --color-muted:        oklch(68% 0.012 255);   /* contraste 6,8:1 */
  --color-ink-2:        oklch(84% 0.008 255);   /* texte courant */
  --color-ink:          oklch(95.5% 0.005 255); /* titres, chiffres */

  /* Accent : le bleu du « .sh », du drapeau trans et de l'avatar */
  --color-accent:       oklch(80% 0.11 228);
  --color-accent-hover: oklch(88% 0.07 228);
  --color-accent-ink:   oklch(17% 0.02 240);    /* texte sur fond accent, 10,5:1 */
  --color-focus:        oklch(86% 0.09 228);

  /* Rose du drapeau, une touche par page */
  --color-signal:       oklch(80% 0.085 358);

  /* États, toujours accompagnés d'un mot ou d'un symbole */
  --color-ok:           oklch(78% 0.14 152);
  --color-ko:           oklch(72% 0.15 25);
  --color-warn:         oklch(82% 0.12 82);

  /* Courbes Steam */
  --color-linux:        oklch(77% 0.13 62);
  --color-windows:      oklch(70% 0.02 255);

  /* Teintes : mélange d'une couleur dans le fond. En OKLab plutôt qu'en OKLCH,
   * sinon le fond quasi neutre tire toutes les teintes vers le bleu. */
  --color-accent-tint:  color-mix(in oklab, var(--color-accent) 13%, var(--color-paper));
  --color-signal-tint:  color-mix(in oklab, var(--color-signal) 14%, var(--color-paper));
  --color-ok-tint:      color-mix(in oklab, var(--color-ok) 12%, var(--color-paper));
  --color-ko-tint:      color-mix(in oklab, var(--color-ko) 13%, var(--color-paper));
  --color-warn-tint:    color-mix(in oklab, var(--color-warn) 12%, var(--color-paper));

  /* Voiles et graphiques (seules valeurs transparentes) */
  --color-scrim:        oklch(11% 0.006 255 / 0.94);
  --color-chart-fill:   oklch(80% 0.11 228 / 0.14);
  --color-chart-grid:   oklch(95.5% 0.005 255 / 0.08);

  /* Polices : titres, texte, code */
  --font-display: "Bricolage Grotesque", "Fira Sans Fallback", ui-sans-serif, sans-serif;
  --font-body:    "Fira Sans", "Fira Sans Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Fira Code", ui-monospace, monospace;

  /* Tailles de texte (ratio 1,25 depuis 16 px) */
  --text-sm:         0.875rem;   /* 14 */
  --text-base:       1rem;       /* 16 */
  --text-prose:      1.125rem;   /* 18 */
  --text-md:         1.25rem;    /* 20 */
  --text-lg:         1.5625rem;  /* 25 */
  --text-xl:         1.953rem;   /* 31 */
  --text-2xl:        2.441rem;   /* 39 */
  --text-display-s:  clamp(2.25rem, 2.6vw + 1.5rem, 3.5rem);
  --text-display:    clamp(2.6rem, 5vw + 1rem, 5.25rem);

  --leading-display: 1.02;
  --leading-snug:    1.2;
  --leading-body:    1.6;
  --leading-prose:   1.7;
  --tracking-display: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-label:   0.04em;

  --measure:        64ch;
  --measure-narrow: 52ch;

  /* Espacements (multiples de 4 px) */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-gutter: clamp(1rem, 4vw, 3rem);
  --page-max:    72rem;
  --page-wide:   100rem;
  --size-hit:    2.75rem;   /* zone tactile de 44 px */
  --size-hit-s:  2.25rem;   /* 36 px, souris uniquement */

  /* Filets et arrondis */
  --rule-hair:   1px;
  --rule-thick:  2px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-round: 50%;

  /* Animations */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  /* Superpositions */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}