/* Jetons de la direction artistique, PRD DA sections 2, 3, 4 et 8.

   Les valeurs de couleur sont celles du PRD, au caractere pres : un test les relit du document et
   refuse toute derive. Les piles typographiques different du PRD sur un point, ecrit et motive dans
   la decision 0022 : la famille calee (`... fallback`) precede le repli nomme, faute de quoi les
   corrections de boite s'appliqueraient a une police dont elles ne decrivent pas les metriques.

   Regle d'emploi, section 2 : une couleur, une fonction. Aucune couleur decorative, aucun degrade,
   aucune ombre floue, aucun coin arrondi. */

:root {
  /* fonds */
  --paper:        #F5F2EA;
  --paper-hi:     #FFFDF7;
  /* encres */
  --ink:          #14161A;
  --ink-soft:     #5B6069;
  --ink-dotted:   #9AA0A8;
  /* couleurs fonctionnelles, jamais decoratives */
  --blue:         #1B34D8;
  --green:        #067A5B;
  --yellow:       #FFC400;
  --red:          #F03E13;
  --hatch: repeating-linear-gradient(45deg, #F5F2EA 0 7px, #D8D3C6 7px 14px);

  /* Typographie, section 3. Les six graisses sont servies depuis le depot, cf. fonts.css. */
  --font-display: 'Bricolage Grotesque', 'Bricolage Grotesque fallback', 'Arial Black', sans-serif;
  --font-body:    'Karla', 'Karla fallback', Helvetica, sans-serif;
  /* `Noto Sans Mono` ne sert qu'au sigma, sur la seule plage U+03C3 : aucune des trois familles
     de la DA ne le porte (decision 0023). Il passe **avant** la famille calee, qui elle porterait
     un sigma d'une autre main. */
  --font-mono:    'Space Mono', 'Noto Sans Mono', 'Space Mono fallback', ui-monospace, monospace;

  /* Largeurs inegales des blocs de rang, reprises telles quelles du code du Screener
     (`docs/design/Caliper - Screener.dc.html`, tableau `widths`). Elles se suivent en cycle et
     c'est ce qui casse la grille de rectangles egaux (PRD DA §4). Le screener n'existe pas encore,
     l'echelle est donc posee ici et attend son ecran. */
  --rank-1:  96px;
  --rank-2: 112px;
  --rank-3:  84px;
  --rank-4: 124px;
  --rank-5:  92px;
  --rank-6: 108px;
  --rank-7:  80px;
  --rank-8: 116px;

  /* Geometrie, section 4. Le filet est le seul separateur : aucune carte, aucune marge blanche. */
  --rule: 2px solid var(--ink);
  --dotted: 2px dotted var(--ink-dotted);
  --pad: 0.9rem;
}

*, *::before, *::after {
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* Titres : casses sur deux lignes, tres serres, avec le point colore de signature (section 3). */
h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 120px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.88;
  margin: 0;
}

h1::after {
  color: var(--blue);
  content: ".";
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 0.6rem;
}

h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}

/* Libelles : mono, majuscules, tres espaces. Ils ne portent jamais de chiffre, qui a son propre
   plancher de taille juste en dessous. */
.label, dt, th, legend, label, .state, .outcome, .draft, .sealed, .superseded, .overdue, .manual {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Donnees : mono, jamais sous 13,5 px (section 3). */
dd, td, .figure, .reading, input, textarea, select, button {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

/* Rupture d'echelle obligatoire, section 4 : un chiffre au moins quatre fois plus grand que ses
   voisins, par ecran. */
.figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 11vw, 120px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.88;
}

/* Hauteur de la barre de navigation, **posee et non estimee** : les en-tetes du tableau se collent
   juste dessous et une valeur devinee les ferait passer derriere. La barre porte le meme nombre en
   hauteur minimale, ce qui fait de cette variable une definition plutot qu'une supposition. */
:root { --nav-height: 3rem; }

a {
  color: var(--blue);
  text-underline-offset: 3px;
}

/* L'inconnu a un traitement unique et reserve : hachures a 45 degres et bordure discontinue.
   Jamais gris, jamais zero, jamais une case vide (section 1). */
.unknown, .draft {
  background: var(--hatch);
  border: 2px dashed var(--ink);
  color: var(--ink);
  display: inline-block;
  padding: 0 0.35rem;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}