/* GENERATED by design/cgt/build-tokens.mjs from design/cgt/tokens.json. Do not edit: edit tokens.json, then run node design/cgt/build-tokens.mjs. */
/*
 * Format CGT (Chris, 18 Oct 2026). Read design/cgt/CERVEAU.md first.
 * The URLs below point at the repo font files from design/cgt/. On the website and in the apps the same
 * files are served at /fonts/: use tokens.mjs fontFaceCss() to write the rules for another place.
 *
 * Measured contrast:
 *   papier on encre: 18.72:1 (text, need 4.5)
 *   ivoire on encre: 14.32:1 (text, need 4.5)
 *   gris-clair on encre: 10.33:1 (text, need 4.5)
 *   rouge-texte on encre: 6.17:1 (text, need 4.5)
 *   papier on rouge-bouton: 5.52:1 (text, need 4.5)
 *   papier on rouge: 5.48:1 (text, need 4.5)
 *   encre on papier: 18.72:1 (text, need 4.5)
 *   texte on papier: 12.52:1 (text, need 4.5)
 *   gris on papier: 5.71:1 (text, need 4.5)
 *   rouge on papier: 5.48:1 (text, need 4.5)
 *   rouge on encre: 3.42:1 (graphic, need 3)
 *   filet-noir on encre: 1.49:1 (decor, need none)
 *   filet on papier: 1.54:1 (decor, need none)
 */

:root {
  --cgt-encre: #17110C;
  --cgt-papier: #FFFFFF;
  --cgt-rouge: #C92A1E;
  --cgt-rouge-bouton: #C9281E;
  --cgt-rouge-texte: #FF5D4D;
  --cgt-gris-clair: #C9BFB3;
  --cgt-ivoire: #E8E0D6;
  --cgt-filet-noir: #3A322C;
  --cgt-encre-2: #221A14;
  --cgt-texte: #3B322B;
  --cgt-gris: #6E655C;
  --cgt-filet: #D8CFC3;

  --cgt-font-affiche: "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-font-texte: "CGT Texte", sans-serif;
  --cgt-font-accords: "CGT Accords", "CGT Texte", sans-serif;
  --cgt-font-accords-main: "CGT Accords Main", "CGT Texte", sans-serif;
  --cgt-font-tab: "CGT Tab", "CGT Texte", sans-serif;
  --cgt-font-rythme: "CGT Rythme", "CGT Texte", sans-serif;
  --cgt-font-syllabes: "CGT Syllabes", "CGT Texte", sans-serif;
  --cgt-font-icones: "CGT Icones", "CGT Texte", sans-serif;
  --cgt-font-ecriture: "CGT Écriture", "CGT Texte", sans-serif;
  --cgt-font-repasser: "CGT Repasser", "CGT Texte", sans-serif;
  --cgt-font-mediator: "CGT Médiator", "CGT Texte", sans-serif;
  --cgt-font-musique-neon: "CGT Musique Neon", "CGT Texte", sans-serif;
  --cgt-font-musique-plume: "CGT Musique Plume", "CGT Texte", sans-serif;
  --cgt-font-musique-studio: "CGT Musique Studio", "CGT Texte", sans-serif;

  --cgt-web-hero: 700 clamp(58px, 10.4vw, 124px)/0.86 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-web-h2: 700 clamp(40px, 6.4vw, 64px)/0.9 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-web-h3: 700 clamp(28px, 4.4vw, 44px)/0.9 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-web-kicker: 700 22px/1.1 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-web-kicker-tracking: 0.04em;
  --cgt-web-sub: 700 clamp(24px, 3.6vw, 34px)/1.05 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-web-price: 700 68px/0.95 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-web-body: 400 17px/1.5 "CGT Texte", sans-serif;
  --cgt-web-button: 700 17px/1.2 "CGT Texte", sans-serif;
  --cgt-web-small: 400 15px/1.45 "CGT Texte", sans-serif;
  --cgt-web-caption: 400 13px/1.4 "CGT Texte", sans-serif;
  --cgt-web-caption-tracking: 0.06em;
  --cgt-kids-title: 700 34px/0.92 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-kids-screen: 700 26px/0.95 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-kids-praise: 700 32px/1 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-kids-chord: 400 40px/1 "CGT Accords", "CGT Texte", sans-serif;
  --cgt-kids-body: 400 19px/1.45 "CGT Texte", sans-serif;
  --cgt-kids-button: 700 19px/1.2 "CGT Texte", sans-serif;
  --cgt-kids-label: 600 16px/1.3 "CGT Texte", sans-serif;
  --cgt-kids-small: 400 15px/1.4 "CGT Texte", sans-serif;
  --cgt-app-title: 700 40px/0.9 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-app-screen: 700 28px/0.95 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-app-praise: 700 32px/1 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-app-chord: 400 40px/1 "CGT Accords", "CGT Texte", sans-serif;
  --cgt-app-body: 400 18px/1.5 "CGT Texte", sans-serif;
  --cgt-app-button: 700 17px/1.2 "CGT Texte", sans-serif;
  --cgt-app-label: 600 15px/1.3 "CGT Texte", sans-serif;
  --cgt-app-small: 400 14px/1.4 "CGT Texte", sans-serif;
  --cgt-print-cover-title: 700 108pt/0.86 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-print-series-title: 700 62pt/0.9 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-print-cover-kicker: 700 20pt/1.1 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-print-cover-kicker-tracking: 0.04em;
  --cgt-print-cover-sub: 700 28pt/1.05 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-print-h2: 700 26pt/1 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-print-h3: 700 13pt/1.2 "CGT Texte", sans-serif;
  --cgt-print-body: 400 10.6pt/1.4 "CGT Texte", sans-serif;
  --cgt-print-running-head: 600 7.6pt/1.2 "CGT Texte", sans-serif;
  --cgt-print-running-head-tracking: 0.08em;
  --cgt-print-caption: 400 8.6pt/1.45 "CGT Texte", sans-serif;
  --cgt-social-title: 700 150px/0.86 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-social-sub: 700 56px/1 "CGT Affiche", "CGT Texte", sans-serif;
  --cgt-social-body: 600 40px/1.3 "CGT Texte", sans-serif;
  --cgt-social-thumb-title: 700 120px/0.86 "CGT Affiche", "CGT Texte", sans-serif;

  --cgt-space-1: 4px;
  --cgt-space-2: 8px;
  --cgt-space-3: 12px;
  --cgt-space-4: 16px;
  --cgt-space-5: 24px;
  --cgt-space-6: 32px;
  --cgt-space-7: 48px;
  --cgt-space-8: 64px;
  --cgt-space-9: 96px;
  --cgt-max: 1160px;
  --cgt-gutter: clamp(16px, 4vw, 40px);
  --cgt-gutter-phone: 16px;
  --cgt-print-margin: 18mm;
  --cgt-seed-grid-print: 3mm;
  --cgt-seed-grid-screen: 10px;
  --cgt-rail-height-screen: 30px;
  --cgt-rail-height-print: 9mm;
  --cgt-line-frame: 1.5px;
  --cgt-line-rule: 1px;
  --cgt-line-rule-strong: 2px;
  --cgt-line-print-frame: 1pt;
  --cgt-radius-none: 0;
  --cgt-radius-max: 2px;
  --cgt-radius-dot: 50%;
  --cgt-motion-fast: 120ms;
  --cgt-motion-base: 240ms;
  --cgt-motion-slow: 400ms;
  --cgt-motion-ease: cubic-bezier(.2, 0, 0, 1);
  --cgt-motion-disc-step: 15deg;
  --cgt-touch-min: 48px;

  /* la variante enfants (Ti Zilois / Corda Kids): the same tokens, softer sizes; see CERVEAU.md « Les enfants » */
  --cgt-kids-ground: #FFFFFF;
  --cgt-kids-header: #17110C;
  --cgt-kids-touch: 56px;
  --cgt-kids-touch-header: 48px;
  --cgt-kids-disc: 88px;
  --cgt-kids-disc-small: 48px;
  --cgt-kids-card-pad: 16px;
  --cgt-kids-card-gap: 12px;
  --cgt-kids-rail-height: 16px;
  --cgt-kids-neck-ground: #17110C;
  --cgt-kids-max-words: 12;

  /* la couleur dit la note: NOTES ONLY (chord boxes, neck, highway, chord names). Never a brand accent. */
  --cgt-note-do: #ec6c63; --cgt-note-do-encre: #17110C;
  --cgt-note-do-d: #db7564; --cgt-note-do-d-encre: #17110C;
  --cgt-note-re: #FFB43D; --cgt-note-re-encre: #17110C;
  --cgt-note-re-d: #c98b22; --cgt-note-re-d-encre: #17110C;
  --cgt-note-mi: #E8DB57; --cgt-note-mi-encre: #17110C;
  --cgt-note-fa: #63C26E; --cgt-note-fa-encre: #17110C;
  --cgt-note-fa-d: #26a98d; --cgt-note-fa-d-encre: #17110C;
  --cgt-note-sol: #4CC0E8; --cgt-note-sol-encre: #17110C;
  --cgt-note-sol-d: #6c94d8; --cgt-note-sol-d-encre: #17110C;
  --cgt-note-la: #A497FF; --cgt-note-la-encre: #17110C;
  --cgt-note-la-d: #b882db; --cgt-note-la-d-encre: #17110C;
  --cgt-note-si: #EC6AAA; --cgt-note-si-encre: #17110C;
  --cgt-note-clair-do: #D0301F; --cgt-note-clair-do-encre: #FFFFFF;
  --cgt-note-clair-do-d: #7A2618; --cgt-note-clair-do-d-encre: #FFFFFF;
  --cgt-note-clair-re: #b87a10; --cgt-note-clair-re-encre: #17110C;
  --cgt-note-clair-re-d: #7E560C; --cgt-note-clair-re-d-encre: #FFFFFF;
  --cgt-note-clair-mi: #91850f; --cgt-note-clair-mi-encre: #17110C;
  --cgt-note-clair-fa: #2c8239; --cgt-note-clair-fa-encre: #FFFFFF;
  --cgt-note-clair-fa-d: #0B5E4C; --cgt-note-clair-fa-d-encre: #FFFFFF;
  --cgt-note-clair-sol: #1B87B0; --cgt-note-clair-sol-encre: #17110C;
  --cgt-note-clair-sol-d: #22457F; --cgt-note-clair-sol-d-encre: #FFFFFF;
  --cgt-note-clair-la: #6A57D6; --cgt-note-clair-la-encre: #FFFFFF;
  --cgt-note-clair-la-d: #58216F; --cgt-note-clair-la-d-encre: #FFFFFF;
  --cgt-note-clair-si: #C2427F; --cgt-note-clair-si-encre: #FFFFFF;

  /* the default ground is the black field (Format CGT) */
  --cgt-bg: #17110C; --cgt-text: #FFFFFF; --cgt-text-2: #E8E0D6; --cgt-text-3: #C9BFB3; --cgt-rule: #3A322C; --cgt-frame: #FFFFFF; --cgt-action: #C9281E; --cgt-action-text: #FFFFFF; --cgt-accent-text: #FF5D4D; --cgt-mark: #C92A1E;
}
/* the two grounds: put the class on a section. The white band is .cgt-papier. */
.cgt-noir, [data-cgt-theme="noir"] { --cgt-bg: #17110C; --cgt-text: #FFFFFF; --cgt-text-2: #E8E0D6; --cgt-text-3: #C9BFB3; --cgt-rule: #3A322C; --cgt-frame: #FFFFFF; --cgt-action: #C9281E; --cgt-action-text: #FFFFFF; --cgt-accent-text: #FF5D4D; --cgt-mark: #C92A1E; background: var(--cgt-bg); color: var(--cgt-text); }
.cgt-papier, [data-cgt-theme="papier"] { --cgt-bg: #FFFFFF; --cgt-text: #17110C; --cgt-text-2: #3B322B; --cgt-text-3: #6E655C; --cgt-rule: #D8CFC3; --cgt-frame: #17110C; --cgt-action: #C9281E; --cgt-action-text: #FFFFFF; --cgt-accent-text: #C92A1E; --cgt-mark: #C92A1E; background: var(--cgt-bg); color: var(--cgt-text); }

@media (prefers-reduced-motion: reduce) {
  :root { --cgt-motion-fast: 0ms; --cgt-motion-base: 0ms; --cgt-motion-slow: 0ms; }
}

/* ---- base pieces of Format CGT (square corners, ink rules, no shadow) ---- */
.cgt-titre { font: var(--cgt-web-hero); text-transform: uppercase; margin: 0; }
.cgt-h2 { font: var(--cgt-web-h2); text-transform: uppercase; margin: 0; }
.cgt-kicker { font: var(--cgt-web-kicker); letter-spacing: var(--cgt-web-kicker-tracking); text-transform: uppercase; color: var(--cgt-accent-text); margin: 0; }
.cgt-btn { display: inline-flex; align-items: center; gap: 10px; min-height: var(--cgt-touch-min); padding: 12px 22px; font: var(--cgt-web-button); background: var(--cgt-action); color: var(--cgt-action-text); border: 0; border-radius: var(--cgt-radius-none); text-decoration: none; cursor: pointer; }
.cgt-btn--contour { background: transparent; color: var(--cgt-text); border: var(--cgt-line-frame) solid var(--cgt-frame); }
.cgt-btn:focus-visible, .cgt-btn--contour:focus-visible { outline: 3px solid var(--cgt-text); outline-offset: 3px; }
.cgt-cadre { border: var(--cgt-line-frame) solid var(--cgt-frame); padding: var(--cgt-space-5); border-radius: var(--cgt-radius-none); }
.cgt-puces { display: inline-flex; }
.cgt-puces > * { font: 700 15px/1.3 "CGT Affiche", "CGT Texte", sans-serif; border: var(--cgt-line-frame) solid var(--cgt-frame); padding: 2px 8px; margin-right: calc(-1 * var(--cgt-line-frame)); font-style: normal; }
.cgt-puces > .on { background: var(--cgt-frame); color: var(--cgt-bg); }
.cgt-rail { height:var(--cgt-rail-height-screen);background-color:var(--cgt-rouge);background-image:radial-gradient(circle,#fff 0 1.7px,transparent 2.1px);background-size:10px 10px }