/* ==========================================================================
   KL MOTOR GUY — THEME TOKENS (PLACEHOLDER)
   Colours, fonts and radii below are placeholders until the brand is final.
   Swap values here only; nothing else in the site hard-codes them.
   ========================================================================== */
:root {
  /* Colour — placeholder palette */
  --c-ink: #14161a;          /* dark background / main text */
  --c-ink-soft: #1d2025;     /* raised dark surface */
  --c-paper: #f6f4ef;        /* light background */
  --c-paper-alt: #ece9e1;    /* alternate light band */
  --c-line: #d8d4c8;         /* borders on light */
  --c-line-dark: #343840;    /* borders on dark */
  --c-muted: #565b63;        /* secondary text on light (AA on paper) */
  --c-muted-dark: #a9aeb6;   /* secondary text on dark */
  --c-accent: #e4572e;       /* buttons / highlights */
  --c-accent-text: #14161a;  /* text placed ON accent (AA contrast) */
  --c-accent-ink: #b0361a;   /* accent used as text on light (AA) */
  --c-focus: #1a6fe0;       /* keyboard focus ring */
  --c-error: #ff9d85;       /* form error message (on dark) */
  --c-card: #ffffff;        /* card / question box background on light */

  /* Type — system stack = zero font download (placeholder) */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --w-display: 800;          /* heading weight (400 regular to 900 black) */

  /* Shape and spacing */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-btn: 999px;       /* button shape: 999px = pill */
  --gutter: 20px;
  --maxw: 1080px;
  --space: 1;        /* section spacing multiplier (1 = default) */
  --text-scale: 1;   /* overall text size multiplier (1 = default) */
}