/* ==========================================================================
   CrossFit Lausanne — brand tokens v1.0 (25.09.2026)
   Source of truth: CrossFit_Lausanne_CI_Guidelines.md (sections 08–10, 19).
   Fonts: https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600;700;800;900&family=Permanent+Marker&display=swap
   Replaces the deprecated Branding CFL/tokens/tokens.css (wine #832A33 system).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Palette (primitive) ---- */
  --cfl-noir: #0B0C0D;
  --cfl-crimson: #D62C1F;
  --cfl-ivoire: #F4F3F1;
  --cfl-beton: #272A2D;
  --cfl-beton-clair: #3B3F42;
  --cfl-gris: #B2B8BE;
  --cfl-ardoise: #454B52;
  --cfl-rose: #F06B5C;          /* red-family TEXT on dark only */
  --cfl-crimson-deep: #B0231A;  /* digital utility: hover/pressed, small red text on ivoire */
  --cfl-blanc: #FFFFFF;         /* text on crimson only */
  --cfl-scrim: 5 5 8;           /* use as rgb(var(--cfl-scrim) / <alpha>) — gradients only */

  /* ---- Semantic: dark surface (default) ---- */
  --surface-primary: var(--cfl-noir);
  --surface-secondary: var(--cfl-beton);
  --surface-tertiary: var(--cfl-beton-clair);
  --surface-accent: var(--cfl-crimson);
  --text-primary: var(--cfl-ivoire);        /* 17.65:1 on noir */
  --text-secondary: var(--cfl-gris);        /* 9.78:1 on noir, 7.21:1 on beton */
  --text-accent: var(--cfl-rose);           /* 6.49:1 on noir, 4.78:1 on beton; on beton-clair use ivoire for normal text */
  --text-on-accent: var(--cfl-blanc);       /* 4.95:1 on crimson */
  --border-control: var(--cfl-gris);        /* functional boundaries (>= 3:1) */
  --border-subtle: rgb(244 243 241 / 0.12); /* decorative only */
  --rule-accent: var(--cfl-crimson);
  --focus-ring: var(--cfl-ivoire);
  --feedback-error: var(--cfl-rose);        /* always with icon + text */
  --feedback-success: var(--cfl-ivoire);    /* always with check icon + text */

  /* ---- Actions ---- */
  --btn-primary-bg: var(--cfl-crimson);
  --btn-primary-bg-hover: var(--cfl-crimson-deep);
  --btn-primary-fg: var(--cfl-blanc);
  --btn-primary-bg-disabled: var(--cfl-beton-clair);
  --btn-primary-fg-disabled: var(--cfl-gris);
  --btn-secondary-border: var(--cfl-gris);
  --btn-secondary-border-hover: var(--cfl-ivoire);
  --btn-secondary-fg: var(--cfl-ivoire);
  --link-fg: var(--cfl-ivoire);
  --link-underline: var(--cfl-rose);
  --link-fg-hover: var(--cfl-rose);

  /* ---- Typography ---- */
  --font-display: "Anton", Impact, "Arial Narrow Bold", "Helvetica Neue Condensed Bold", sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-marker: "Permanent Marker", "Marker Felt", cursive;

  --type-display: clamp(56px, 10vw, 132px);
  --type-h1: clamp(40px, 6vw, 88px);
  --type-h2: clamp(32px, 4vw, 54px);
  --type-h3: 22px;
  --type-body-lg: 20px;
  --type-body: 17px;
  --type-body-sm: 15px;
  --type-caption: 13px;
  --type-eyebrow: 13px;
  --type-button: 15px;
  --type-nav: 14px;
  --type-label: 14px;
  --leading-body-lg: 1.6;
  --tracking-caption: 0.02em;
  --tracking-label: 0.02em;

  --leading-display: 0.88;
  --leading-h1: 0.9;
  --leading-h2: 0.95;
  --leading-accented: 1.0;   /* Anton lines containing É È Ê À Ç (not first line) */
  --leading-h3: 1.3;
  --leading-body: 1.65;
  --leading-body-sm: 1.5;

  --tracking-display: -0.015em;
  --tracking-h2: -0.01em;
  --tracking-eyebrow: 0.28em;
  --tracking-button: 0.14em;
  --tracking-nav: 0.12em;
  --tracking-info: 0.14em;

  --measure-body: 68ch;

  /* ---- Spacing (base 4) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-text: 760px;
  --gutter: 20px;          /* side padding: 20 / 32 / 48 */
  --grid-gap: 16px;        /* 16 / 24 / 24 / 32 */
  --grid-columns: 4;       /* 4 / 8 / 12 / 12 */
  --section-pad: 64px;     /* 64 / 96 / 128 */
  --header-h: 64px;        /* 64 mobile / 72 desktop */

  /* ---- Shape & line ---- */
  --radius: 0px;           /* everywhere — brand rule */
  --border-width: 1px;
  --rule-accent-w: 48px;   /* web filet 48 x 4 (social 64 x 4) */
  --rule-accent-h: 4px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --target-min: 44px;      /* preferred; WCAG 2.2 minimum 24px */
  --control-h: 48px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 200ms;
  --dur-ui: 250ms;
  --dur-reveal: 600ms;

  /* ---- Image ratios ---- */
  --ratio-portrait: 4 / 5;
  --ratio-wide: 16 / 9;
  --ratio-square: 1 / 1;
  --ratio-story: 9 / 16;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --grid-gap: 24px; --grid-columns: 8; --section-pad: 96px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --grid-gap: 24px; --grid-columns: 12; --section-pad: 128px; --header-h: 72px; }
}
@media (min-width: 1440px) {
  :root { --grid-gap: 32px; }
}

/* ---- Light section (ivoire) — apply .cfl-light on a section ---- */
.cfl-light {
  color-scheme: light;
  background: var(--surface-primary);
  color: var(--text-primary);
  --surface-primary: var(--cfl-ivoire);
  --surface-secondary: #FFFFFF;
  --text-primary: var(--cfl-noir);          /* 17.65:1 */
  --text-secondary: var(--cfl-ardoise);     /* 7.95:1 */
  --text-accent: var(--cfl-crimson-deep);   /* 6.11:1 */
  --border-control: var(--cfl-ardoise);
  --border-subtle: rgb(11 12 13 / 0.12);
  --focus-ring: var(--cfl-noir);
  --feedback-error: var(--cfl-crimson-deep);
  --feedback-success: var(--cfl-noir);
  --btn-secondary-border: var(--cfl-ardoise);
  --btn-secondary-border-hover: var(--cfl-noir);
  --btn-secondary-fg: var(--cfl-noir);
  --link-fg: var(--cfl-noir);
  --link-underline: var(--cfl-crimson);
  --link-fg-hover: var(--cfl-crimson-deep);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-ui: 0ms; --dur-reveal: 0ms; }
  .cfl-btn, .cfl-btn:active { transform: none !important; }
}

/* ==========================================================================
   Reference primitives (optional). Radius is always 0.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); } /* set --header-h to the real header height */
body { background: var(--surface-primary); color: var(--text-primary); font: 400 var(--type-body)/var(--leading-body) var(--font-body); }

.cfl-display, .cfl-h1, .cfl-h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.cfl-display { font-size: var(--type-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.cfl-h1 { font-size: var(--type-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-display); }
.cfl-h2 { font-size: var(--type-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
.cfl-eyebrow { font: 800 var(--type-eyebrow)/1.3 var(--font-body); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); }
.cfl-rule { display: block; width: var(--rule-accent-w); height: var(--rule-accent-h); background: var(--rule-accent); }

.cfl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 16px 28px; border-radius: var(--radius); border: 1px solid transparent;
  font: 800 var(--type-button)/1 var(--font-body); letter-spacing: var(--tracking-button); text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), transform var(--dur-fast) var(--ease);
}
.cfl-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.cfl-btn--primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--btn-primary-bg-hover); }
.cfl-btn--primary:not(:disabled):not([aria-disabled="true"]):active { background: var(--btn-primary-bg-hover); transform: translateY(1px); }
.cfl-btn--primary[aria-disabled="true"], .cfl-btn--primary:disabled { background: var(--btn-primary-bg-disabled); color: var(--btn-primary-fg-disabled); cursor: not-allowed; transform: none; }
.cfl-btn--secondary { background: transparent; color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.cfl-btn--secondary:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--btn-secondary-border-hover); }
.cfl-btn--secondary:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); }
.cfl-btn--secondary:disabled, .cfl-btn--secondary[aria-disabled="true"] { border-color: var(--cfl-beton-clair); color: var(--cfl-gris); cursor: not-allowed; }
/* aria-disabled does not block clicks: prefer the native disabled attribute or cancel the event in JS */
.cfl-btn:focus-visible, .cfl-link:focus-visible, .cfl-input:focus-visible, .cfl-card:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

.cfl-link { color: var(--link-fg); text-decoration: underline; text-decoration-color: var(--link-underline); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-ui) var(--ease); }
.cfl-link:hover { color: var(--link-fg-hover); }

.cfl-card { background: var(--surface-secondary); border-radius: var(--radius); padding: var(--space-5); border: 1px solid var(--border-subtle); }
@media (min-width: 768px) { .cfl-card { padding: var(--space-6); } }

.cfl-label { display: block; font: 700 var(--type-label)/1.3 var(--font-body); color: var(--text-primary); margin-block-end: var(--space-2); }
.cfl-input { width: 100%; min-width: 0; min-height: var(--control-h); padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border-control); background: var(--surface-secondary); color: var(--text-primary); font: 400 16px/1.4 var(--font-body); }
.cfl-input:focus-visible { border-color: var(--text-accent); border-width: 2px; padding: 11px 13px; }
.cfl-input:disabled { border-color: var(--cfl-beton-clair); color: var(--cfl-gris); cursor: not-allowed; }
.cfl-input[aria-invalid="true"] { border-color: var(--feedback-error); }
.cfl-error { color: var(--feedback-error); font: 600 var(--type-body-sm)/1.4 var(--font-body); margin-block-start: var(--space-2); }