/* =====================================================================
   APPOINTEK DESIGN SYSTEM - TOKENS
   The single source of raw values. Nothing else in this repo may contain
   a colour, a radius, a shadow or a font stack written out longhand.
   Enforced by `node scripts/check-design-tokens.mjs` (exit 1 on drift).

   TO RE-SKIN THE WHOLE SITE, EDIT ONLY THIS FILE.
   That is the test of the system. If a change of palette requires
   touching system.css, the system has leaked and should be fixed here.
   ===================================================================== */

:root {

  /* ==================================================================
     1. COLOUR
     One accent. Ink is the action colour, so primary buttons are
     near-black, not coloured. Nothing is tinted merely to fill space.
     ================================================================== */

  /* Grounds and surfaces. Black backdrop, Aprilia Tuono inspired: a near
     black page with panels raised a step above it, so separation comes from
     surface value, not from shadows that would vanish on black. */
  --ground:      #0a0a0b;   /* the black backdrop */
  --surface:     #17171a;   /* every panel, card, nav and row, raised off black */
  --surface-alt: #202024;   /* row and button hover */
  --surface-sunk:#101012;   /* inset wells: totals, quiet chips */

  /* Ink ladder, inverted for a dark theme. Light text carries hierarchy;
     colour never does. */
  --ink:      #f4f4f6;   /* titles and primary text */
  --ink-2:    #c9c9d0;   /* long-form body */
  --ink-3:    #a2a2ab;   /* secondary, price notes */
  --ink-4:    #7c7c86;   /* tertiary, mono labels, meta */
  --ink-5:    #56565f;   /* faint, chevrons */

  /* Rules. Light on dark now, two weights. */
  --rule:      rgba(255,255,255,0.12);
  --rule-soft: rgba(255,255,255,0.06);

  /* The one accent: Aprilia red, chosen 2026-09-18 to replace burnt orange
     for the black-and-red rebuild. The action colour: accent buttons, links,
     focus, active state, the step rail and the live dot. Never a page-wide
     tint, never a second brand colour. --accent-text is the lighter red used
     where red sits on a dark surface and needs the contrast. */
  --accent:       #e4002b;
  --accent-hover: #ff1f45;
  --accent-wash:  rgba(228,0,43,0.16);
  --on-accent:    #ffffff;
  --accent-text:  #ff5566;

  /* Ink surfaces: hero, guarantee band, closing CTA. Pure black anchors,
     a hair darker than the ground so they read as the deep end of the page. */
  --ink-surface: #060608;
  --ink-raised:  #1a1a1f;
  --on-ink:      #ffffff;
  --on-ink-2:    rgba(255,255,255,0.72);
  --on-ink-3:    rgba(255,255,255,0.50);
  --on-ink-rule: rgba(255,255,255,0.12);

  /* Semantic status. The accent is red, so warn shifts to amber to stay
     distinct. Never decorative, used only where state is real. */
  --warn:      #f0a83a;
  --warn-wash: rgba(240,168,58,0.14);


  /* ==================================================================
     2. TYPE
     Three faces, three jobs, no overlap.
     Archivo    - display. Holds up tightly tracked at large sizes.
     Plex Sans  - body. Humanist enough to read for a long time.
     Plex Mono  - labels, eyebrows, and any number that must line up.
     ================================================================== */

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale. The recurring failure is BODY TOO SMALL, so body sits at
     17.5px and the lede at 19-22px. Never fix a crowded block by
     shrinking type. Cut a line instead. */
  --fs-display: clamp(42px, 5.6vw, 72px);  /* hero only, once per page */
  --fs-h1:      clamp(34px, 4.4vw, 54px);
  --fs-h2:      clamp(28px, 3.6vw, 42px);
  --fs-h3:      19px;
  --fs-lede:    clamp(17px, 1.5vw, 20px);
  --fs-body:    16px;
  --fs-meta:    15px;
  --fs-small:   13px;
  --fs-label:   11.5px;

  --lh-display: 1.02;
  --lh-head:    1.12;
  --lh-body:    1.65;
  --lh-tight:   1.45;

  /* Tracking. Negative on display, more so as it gets bigger.
     Positive only on uppercase mono labels. */
  --track-display: -0.035em;
  --track-h2:      -0.024em;
  --track-h3:      -0.012em;
  --track-label:    0.13em;

  /* Measure. The other half of readability: a 1060px column at 17.5px
     runs past 100 characters without these. */
  --measure:       62ch;
  --measure-tight: 44ch;


  /* ==================================================================
     3. SPACE
     One scale. Component padding and section rhythm both come from it.
     ================================================================== */

  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --section: clamp(32px, 4vw, 52px);   /* between major sections */
  --row-y:   clamp(15px, 1.2vw, 20px); /* inside a panel row */
  --row-x:   clamp(18px, 2vw, 28px);


  /* ==================================================================
     4. RADIUS - five tiers, nothing in between
     ================================================================== */

  --r-pill:  999px;
  --r-chip:    6px;   /* inline code, small badges */
  --r-input:  10px;
  --r-card:   16px;
  --r-panel:  20px;


  /* ==================================================================
     5. SHADOW - always two layers: tight contact + soft spread.
     A single heavy drop shadow is the fastest way to look generated.
     ================================================================== */

  --sh-card:  0 1px 2px rgba(13,18,32,0.04), 0 6px 20px rgba(13,18,32,0.05);
  --sh-panel: 0 1px 3px rgba(13,18,32,0.05), 0 14px 40px rgba(13,18,32,0.06);
  --sh-lift:  0 2px 4px rgba(13,18,32,0.06), 0 14px 34px rgba(13,18,32,0.11);
  --sh-btn:   0 1px 2px rgba(13,18,32,0.16), 0 6px 18px rgba(13,18,32,0.20);


  /* ==================================================================
     6. LAYOUT
     ================================================================== */

  --w-grid: 1060px;   /* the standard container */
  --w-read:  700px;   /* long-form prose */
  --pad-x:    22px;
  --tap:      44px;   /* minimum hit area, always */

  --z-nav:    50;
  --z-skip:  100;


  /* ==================================================================
     7. MOTION - two curves, three durations.
     Enter is longer than exit. Only transform and opacity animate.
     No overshoot unless a real gesture carried momentum.
     ================================================================== */

  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 100ms;
  --dur-quick: 180ms;
  --dur-enter: 380ms;
}