/* Kookumu design tokens. Source of truth: design/DESIGN.md.
   Self-contained: fonts load from ./fonts/ next to this file. The site keeps a byte-identical copy at
   site/public/tokens.css (+ site/public/fonts/), synced by site/scripts/sync-design.sh and checked by the tests.
   Tokens only: no element selectors, so any app can import this file without side effects. */

/* Fonts: subsets of Latin-1 + French punctuation (« » ’ … narrow no-break space). Archivo and Public Sans: SIL Open
   Font License 1.1; Permanent Marker: Apache License 2.0 (Font Diner). Details and links: fonts/README.md. */
@font-face {
  font-family: "Archivo";
  src: url("./fonts/archivo-display.woff2") format("woff2");
  font-weight: 600 800;
  font-stretch: 62% 75%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("./fonts/public-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Permanent Marker";
  src: url("./fonts/permanent-marker.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color: named after the used-car lot. Contrast ratios are against the surface they're meant for. */
  --k-encre: #0f2130;              /* ink: text, borders, hairlines. 16.4:1 on papier, 13.8:1 on vitre */
  --k-encre-pale: #435667;         /* secondary text. 7.6:1 on papier, 6.4:1 on vitre */
  --k-vitre: #e4edf0;              /* glass: page canvas */
  --k-vitre-trait: #c2d2d9;        /* decorative hairline on vitre (never a control boundary) */
  --k-pare-brise: #163a50;         /* windshield: the one dark band */
  --k-pare-brise-profond: #0e2738; /* deeper glass, gradient stop and pressed state on dark */
  --k-reflet: #c9dbe4;             /* secondary text on pare-brise, 8.4:1 */
  --k-crayon: #ffd60a;             /* paint-marker yellow: primary action fill, marker writing on dark. Ink text on it 11.6:1 */
  --k-crayon-pale: #fff6c4;        /* soft yellow surface, text selection */
  --k-papier: #ffffff;             /* cards, forms, the « fiche » */
  --k-oui: #1b7a43;                /* yes stamp, success text. 5.4:1 on papier */
  --k-non: #b3361f;                /* no stamp, error text. 6.1:1 on papier */
  --k-erreur-fond: #fdecea;        /* error surface */
  --k-focus: #0b5fd1;              /* focus ring on light surfaces. 5.9:1 on papier */
  --k-focus-sombre: var(--k-crayon); /* focus ring on pare-brise */
  --k-indice: #5c7080;             /* placeholder text, 5.1:1 on papier */

  /* Mascots (W10, brand/mascots/README.md): colors that appear only on the mascots, never as UI colors. */
  --k-mascotte-eau: #3d86d6;       /* Plombier body */
  --k-mascotte-eau-fonce: #1f5596; /* Plombier cap */
  --k-mascotte-ambre: #ff9e1b;     /* Électricien body */
  --k-mascotte-menthe: #4cbf9a;    /* Clinique body */

  /* Services: each one the visitor can ask us to call has its mascot's color and a band (the windshield, tinted).
     White text on every band is 9.7:1 or more, reflet 6.8:1 or more. The mascot color marks the stops on the
     progress road, always with an encre border. */
  --k-mascotte-auto: var(--k-crayon);
  --k-mascotte-plumber: var(--k-mascotte-eau);
  --k-mascotte-electrician: var(--k-mascotte-ambre);
  --k-mascotte-clinic: var(--k-mascotte-menthe);
  --k-mascotte-other: var(--k-pare-brise); /* Kookumu herself */
  --k-bande-auto: var(--k-pare-brise);
  --k-bande-plumber: #0d4a5a;      /* deep water */
  --k-bande-electrician: #27284d;  /* night, so the bulb shows */
  --k-bande-clinic: #11493f;       /* scrubs green */
  --k-bande-other: #3b2b55;

  /* Roles: use these in components so a theme only has to remap them. */
  --k-fond: var(--k-vitre);
  --k-surface: var(--k-papier);
  --k-texte: var(--k-encre);
  --k-texte-pale: var(--k-encre-pale);
  --k-action-fond: var(--k-crayon);
  --k-action-texte: var(--k-encre);
  --k-bordure: var(--k-encre);

  /* Type */
  --k-police-titre: "Archivo", "Arial Narrow", "Roboto Condensed", sans-serif;
  --k-police-texte: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --k-police-crayon: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --k-titre-largeur: 68%;          /* font-stretch for display: condensed like lot signage */
  --k-titre-graisse: 800;
  --k-titre-interligne: 0.94;
  --k-titre-approche: -0.005em;

  --k-taille-xs: 0.8125rem;        /* 13px: legal fine print only */
  --k-taille-sm: 0.9375rem;        /* 15px: hints, captions */
  --k-taille-base: 1.0625rem;      /* 17px: body */
  --k-taille-lg: 1.25rem;          /* 20px: leads */
  --k-taille-xl: 1.5rem;           /* 24px: h3, prices in cards */
  --k-titre-sm: clamp(1.75rem, 6.5vw, 2.5rem);   /* h2 */
  --k-titre-md: clamp(2.25rem, 9vw, 3.5rem);     /* page h1 on inner pages */
  --k-titre-lg: clamp(2.6rem, 11.5vw, 5rem);     /* home h1 */
  --k-interligne: 1.55;
  --k-mesure: 38rem;               /* body measure, about 70 characters */

  /* Space: 4px base */
  --k-espace-1: 4px;
  --k-espace-2: 8px;
  --k-espace-3: 12px;
  --k-espace-4: 16px;
  --k-espace-5: 24px;
  --k-espace-6: 32px;
  --k-espace-7: 48px;
  --k-espace-8: 64px;
  --k-espace-9: 96px;
  --k-gouttiere: 16px;             /* page side gutter on phones; 24px from 600px, 32px from 1100px */
  --k-largeur-max: 72rem;

  /* Shape */
  --k-rayon-sm: 4px;               /* inputs, tags */
  --k-rayon: 6px;                  /* buttons, cards, the fiche */
  --k-rayon-pastille: 999px;       /* OUI / NON stamps and choice chips only */
  --k-trait: 1.5px;                /* every control and card border, in --k-bordure */
  --k-cible: 48px;                 /* minimum touch target height */

  /* Depth: flat by default. One shadow, for paper taped on glass. */
  --k-ombre-fiche: 0 22px 44px -26px rgba(6, 20, 30, 0.55);

  /* Motion */
  --k-courbe: cubic-bezier(0.16, 1, 0.3, 1);   /* exponential ease-out */
  --k-duree-vite: 120ms;           /* press, hover */
  --k-duree: 220ms;                /* step change in a form */
  --k-duree-lente: 700ms;          /* the marker writing the price, once */
  --k-ressort: cubic-bezier(0.34, 1.56, 0.64, 1); /* a small overshoot: mascots landing, the car stopping */
}