/* Hallmark · tokens · AutoFix Joensuu
 * theme: Sport (editorial cluster)
 * axes — paper band: light (L 97%) · display style: display-condensed (roman) · accent hue: warm (27°)
 *
 * Accent is locked to the AutoFix logo red. Measured from images/logo.jpg: #E01F26 = oklch(58.1% 0.222 26.6).
 * --color-accent ships one notch darker at oklch(56% 0.215 27) = #D61D22 so that paper-on-accent
 * (the filled CTA label) clears 4.5:1 — the true logo red lands at 4.37:1 and fails. The two are
 * visually indistinguishable side by side. --color-accent-true holds the exact brand value for
 * any surface where it is not carrying text.
 *
 * Every colour and font in site.css references a token from this file. No inline values.
 */

:root {
  /* ---- Paper / ink / neutrals — warm-tinted toward the accent, never pure ---- */
  --color-paper:       oklch(97%   0.006 60);   /* #F8F4F1  page base            */
  --color-paper-2:     oklch(94.5% 0.008 60);   /* #F1ECE8  banded section       */
  --color-paper-3:     oklch(90%   0.010 55);   /* #E4DCD8  inset / table stripe */
  --color-rule:        oklch(80%   0.010 55);   /* #C3BCB8  hairlines            */
  --color-neutral:     oklch(50%   0.012 45);   /* #69615E  labels      5.52:1   */
  --color-muted:       oklch(44%   0.012 40);   /* #59504E  secondary   7.15:1   */
  --color-ink:         oklch(24%   0.010 40);   /* #241E1C  body       15.11:1   */
  --color-ink-deep:    oklch(17%   0.012 35);   /* #140E0C  footer band          */

  /* ---- Inverted set, for the dark footer band ---- */
  --color-muted-inv:   oklch(74%   0.010 45);   /* #B1A9A6  on ink-deep  8.28:1  */
  --color-rule-inv:    oklch(32%   0.012 35);   /* #39312F  hairline on dark     */

  /* ---- Accent — one hue, used as a highlighter, never as a field ---- */
  --color-accent:      oklch(56%   0.215 27);   /* #D61D22  fills + rules        */
  --color-accent-true: oklch(58.1% 0.222 26.6); /* #E02026  exact logo red       */
  --color-accent-deep: oklch(46%   0.180 27);   /* #A50E15  accent text  7.17:1  */
  --color-accent-lift: oklch(68%   0.180 27);   /* #F36358  accent on dark 6.13:1*/
  --color-accent-ink:  oklch(97%   0.006 60);   /* #F8F4F1  text ON an accent fill, 4.76:1 */
  --color-focus:       oklch(46%   0.170 27);   /* #A21A1B  focus ring on paper   7.13:1  */
  --color-focus-inv:   oklch(68%   0.180 27);   /* #F36358  focus ring on ink-deep 6.13:1
                                                   (--color-focus lands at 2.46:1 there — fails 3:1) */

  /* ---- Type — 2+1. Display + body + one outlier (figures only) ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Scale — major third (1.25) from a 16px body ---- */
  --text-xs:        0.8rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-3xl:       3.0518rem;
  --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
  /* Max held at 4.75rem, not the 5.25rem default: at 1280x800 the taller
     clamp pushed the hero's note line past the fold (gate 44b). */
  --text-display:   clamp(2.75rem, 4.5vw + 1rem, 4.75rem);

  /* ---- Space — 4pt base, named by role ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --page-gutter: clamp(1.125rem, 4vw, 4rem);

  /* ---- Rules + radius — industrial, near-square ---- */
  --rule-hair:  1px;
  --rule-heavy: 3px;
  --radius-none: 0;
  --radius-sm:   2px;

  /* ---- Motion — Sport runs at 0.7x, sharp ---- */
  --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);
  --dur-micro:   90ms;
  --dur-short:   150ms;
  --dur-long:    300ms;

  /* ---- Z scale — six named levels ---- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}
