/* ==========================================================================
   timingpulley.biz — Design tokens ("Precision Industrial")
   Source of truth: docs/04-design-system.md · Canvas: Design System board
   Use these variables everywhere; never hardcode colours/spacing in page CSS.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
/* Headings: Archivo 600-700 (one variable latin file; replaced Poppins 2026-10-29, rework). Body: Inter. Mono: system stack, data only. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/archivo-600-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }

/* Metric-matched fallbacks to minimise layout shift while fonts load */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 100%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  /* Colour */
  --c-primary: #422C6C;
  --c-primary-deep: #2A1B47;
  --c-primary-600: #563A8C;
  --c-primary-50: #F2EEF8;
  --c-primary-line: #CFC6E0;
  --c-accent: #F5A524;
  --c-accent-deep: #D98C0F;
  --c-ink: #14121A;
  --c-ink-2: #1D1A24;
  --c-text: #3F3B48;
  --c-muted: #6B6776;
  --c-steel: #8B93A1;
  --c-line: #E4E1EA;
  --c-field: #CFCAD8;
  --c-surface: #F6F5F9;
  --c-white: #FFFFFF;
  --c-success: #12A150;
  --c-error: #D93A3A;
  --c-whatsapp: #25D366;
  --c-whatsapp-ink: #0B3B1E;
  --c-on-dark: rgba(255, 255, 255, .8);
  --c-on-dark-muted: rgba(255, 255, 255, .75);
  --c-line-dark: rgba(255, 255, 255, .12);

  /* Type */
  --ff-head: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  /* monospace only for data: spec values, part codes, units, dimensions (never labels or eyebrows) */
  --ff-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ff-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(36px, 2.6vw + 20px, 56px);
  --fs-h2: clamp(26px, 19.9px + 1.56vw, 40px);
  --fs-page-title: clamp(28px, 16px + 2.2vw, 48px);
  --fs-h3: clamp(17px, 15.5px + 0.28vw, 18px);
  --fs-lead: clamp(16px, 14.7px + 0.32vw, 18px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --lh-body: 1.65;
  --lh-tight: 1.15;

  /* Space (4px base) */
  --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; --s-10: 128px;
  --section-y: 96px;
  --container-max: 1380px;

  /* Shape */
  /* Shape (2026-10-28, user decision; replaces the 2026-10-09 square system): a small radius in three tiers.
     4px controls (buttons, inputs, chips, tags, icon boxes), 6px cards and photos, 8px large panels.
     Full-width bands, page heads and table cells stay square; genuinely round objects use --r-round. */
  --r-xs: 4px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 4px; --r-round: 50%;
  --sh-1: 0 1px 2px rgba(20, 18, 26, .06), 0 1px 1px rgba(20, 18, 26, .04);
  --sh-2: 0 8px 24px -8px rgba(42, 27, 71, .18);
  --sh-3: 0 24px 48px -16px rgba(42, 27, 71, .28);
  --sh-hover: 0 18px 36px -14px rgba(42, 27, 71, .24);

  /* Texture: retired 2026-10-29 (rework: no grid patterns). Kept as "none" so older rules resolve to a flat colour. */
  --grid-light: none;
  --grid-dark: none;
  --grid-size: 32px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s;
  --t-base: .3s;
  --t-slow: .8s;

  /* Layout */
  --header-h: 72px;
  --topbar-h: 40px;
}

/* Headings on phones: one step smaller so long headings stay within 2 to 3 lines (user, 2026-10-22) */
@media (max-width: 575.98px) { :root { --fs-h2: 24px; --fs-page-title: 26px; } }
@media (max-width: 359.98px) { :root { --fs-page-title: 24px; } }   /* 320px phones: long page titles stay within 3 lines */
/* Section padding: 96px desktop, 64px tablet, 48px mobile (2026-10-29, rework) */
@media (max-width: 991.98px) { :root { --section-y: 64px; } }
@media (max-width: 575.98px) { :root { --section-y: 48px; } }