/* ============================================================================
   Dörguard — Design Tokens (Phase 0)
   The single source of truth for colour, type, spacing, motion, and layout.
   Loaded BEFORE style.css on every page, so every value below can be
   referenced as var(--token) anywhere in style.css, components, or templates.

   Rule of thumb: if a value appears on more than one component, it belongs
   here as a token — never hard-code a hex, font stack, or easing curve in a
   component again. That is what kept the old 99-file site drifting.
   ============================================================================ */

:root {

  /* --- Colour primitives (the raw palette) ------------------------------ */
  --c-black:  #0e0e0e;
  --c-dark:   #0e0e0e;   /* unified with --c-black — "one dark, not two" (was #1a1a1a) */
  --c-mid:    #2e2e2e;
  --c-steel:  #3a3a3a;
  --c-smoke:  #5a5a5a;
  --c-grey-dk:#23272b;   /* darker body text for readability/trust (was #555) */
  --c-grey-md:#6b7075;   /* darker secondary text (was #888) */
  --c-ash:    #8a8a8a;
  --c-silver: #b0b0b0;
  --c-grey-lt:#d4d4d4;
  --c-fog:    #d8d8d8;
  --c-border: #e0e0e0;
  --c-grey-bg:#fafafa;   /* lighter section grey (was #f4f4f4) */
  --c-white:  #ffffff;
  --c-accent: #c41230;   /* Dörguard red */
  --c-accent-hover:#a00f27;
  --c-gold:   #b8932a;   /* trust badges, secondary accents */
  --c-star:   #f5a623;   /* review stars */

  /* --- Semantic aliases (what the rest of the CSS actually uses) --------- */
  /* Kept identical to the names style.css already references, so existing
     rules keep working unchanged while pointing at the palette above.      */
  --black:   var(--c-black);
  --dark:    var(--c-dark);
  --mid:     var(--c-mid);
  --steel:   var(--c-steel);
  --grey-dk: var(--c-grey-dk);
  --grey-md: var(--c-grey-md);
  --grey-lt: var(--c-grey-lt);
  --grey-bg: var(--c-grey-bg);
  --white:   var(--c-white);
  --border:  var(--c-border);
  --accent:  var(--c-accent);
  --accent-hover: var(--c-accent-hover);
  --gold:    var(--c-gold);
  --star:    var(--c-star);

  /* --- Typography ------------------------------------------------------- */
  --fd: 'Barlow Condensed', sans-serif;   /* display / headings */
  --fb: 'Barlow', sans-serif;             /* body */

  /* Type scale (rem-based; html font-size:16px) */
  --fs-xs:   0.75rem;   /* 12px — micro / legal   */
  --fs-sm:   0.8125rem; /* 13px — labels, meta    */
  --fs-base: 1.0625rem; /* 17px — body copy       */
  --fs-md:   1.0625rem; /* 17px — inputs          */
  --fs-lg:   1.5rem;    /* 24px — card headings   */
  --fs-xl:   clamp(26px, 4vw, 46px);   /* section H2 */
  --fs-2xl:  clamp(30px, 8vw, 78px);   /* page-hero H1 */
  --fs-hero: clamp(38px, 9vw, 88px);   /* homepage hero H1 */

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;
  --fw-black: 800;

  --lh-tight: 1.08;
  --lh-body:  1.75;
  --tracking-label: 0.16em;  /* uppercase eyebrow labels */

  /* --- Spacing scale ---------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 100px;   /* desktop section padding */

  /* --- Radius & borders ------------------------------------------------- */
  --radius-sm: 2px;
  --radius:    8px;    /* softer controls (was 4px) */
  --radius-card: 12px; /* softer cards/panels */
  --radius-pill: 999px;
  --hairline: 1px solid var(--border);
  --hairline-dk: 1px solid rgba(255, 255, 255, 0.07);

  /* --- Layout ----------------------------------------------------------- */
  --cx:   24px;      /* horizontal gutter (overridden per breakpoint) */
  --cmax: 1280px;    /* max content width */
  --header-h: 62px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur:      0.35s;
  --dur-slow: 0.65s;

  /* --- Elevation / z-index --------------------------------------------- */
  --z-drawer:  800;
  --z-header:  900;
  --z-bottombar: 950;

  /* --- Environment ------------------------------------------------------ */
  --safe-b: env(safe-area-inset-bottom, 0px);
}