/* Hallmark · tokens · theme: studied-DNA (source: https://codex-resets.com/), raised under discipline 7 (ambition request)
 * paper-band: light · display-style: rounded-sans (Baloo 2) · accent-hue: multi (sun 93 / rose 1 / sky 237 / coral 36)
 */
:root {
  /* surfaces */
  --color-paper:      oklch(97% 0.032 85);    /* crème de la page */
  --color-card:       oklch(99.4% 0.008 91);  /* fond des cartes */
  --color-paper-deep: oklch(93.5% 0.045 85);  /* crème plus soutenue */

  /* encre */
  --color-ink:        oklch(24.8% 0.014 67);  /* texte, bords, ombres */
  --color-ink-soft:   oklch(31% 0.016 67);    /* fond de la bande sombre, un cran au-dessus */
  --color-muted:      oklch(44% 0.022 67);    /* texte secondaire */
  --color-faint:      oklch(78% 0.03 80);     /* lignes de cahier */

  /* couleurs des parcours */
  --color-sun:        oklch(89.2% 0.157 93);  /* Découvrir · action principale */
  --color-sun-deep:   oklch(82% 0.165 88);
  --color-rose:       oklch(85.6% 0.084 1);   /* Construire */
  --color-sky:        oklch(86.9% 0.075 237); /* Automatiser sa boîte */
  --color-coral:      oklch(63% 0.2 36);      /* le tampon « vérifié », un seul usage */
  --color-mint:       oklch(87% 0.1 158);     /* bonne réponse, gratuit */

  --color-focus:      oklch(52% 0.2 262);
  --color-focus-dark: oklch(80% 0.13 262);

  /* masques (alpha, pas des couleurs visibles) */
  --mask-on:  #000;
  --mask-off: #0000;

  /* polices */
  --font-display: "Baloo 2", "Arial Rounded MT Bold", ui-rounded, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-hand:    "Caveat", "Segoe Print", cursive; /* annotations à la main, seulement */

  /* tailles */
  --text-label:   0.75rem;
  --text-sm:      0.9375rem;
  --text-base:    1.0625rem;
  --text-lg:      1.375rem;
  --text-xl:      clamp(2.1rem, 2.6vw + 1.2rem, 3.4rem);
  --text-display: clamp(3rem, 6vw + 1rem, 6.25rem);
  --text-numeral: clamp(4.5rem, 7vw + 2rem, 8rem);

  /* espace (pas de 4) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --shell:  74rem;
  --gutter: clamp(1rem, 4vw, 2.25rem);

  /* forme */
  --rule:        2px;
  --radius-card: 14px;
  --radius-tile: 10px;
  --radius-pill: 999px;

  --shadow-xs:    2px 2px 0 0 var(--color-ink);
  --shadow-sm:    3px 3px 0 0 var(--color-ink);
  --shadow-md:    4px 4px 0 0 var(--color-ink);
  --shadow-lg:    7px 7px 0 0 var(--color-ink);
  --shadow-up:    6px 6px 0 0 var(--color-ink);
  --shadow-press: 0 0 0 0 var(--color-ink);

  /* mouvement */
  --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);
  --ease-press:  cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  /* profondeur */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  200;
}

/* sur la bande sombre, les ombres deviennent jaunes */
.on-dark {
  --shadow-xs:    2px 2px 0 0 var(--color-sun);
  --shadow-sm:    3px 3px 0 0 var(--color-sun);
  --shadow-md:    4px 4px 0 0 var(--color-sun);
  --shadow-lg:    7px 7px 0 0 var(--color-sun);
  --shadow-up:    6px 6px 0 0 var(--color-sun);
  --shadow-press: 0 0 0 0 var(--color-sun);
  --color-focus:  var(--color-focus-dark);
}