/* ==========================================================================
   TOKENS.CSS — brand decisions live here and ONLY here.
   Every other stylesheet reads these variables. To rebrand a client site,
   edit this file (colors, fonts, radii, spacing) and nothing else needs
   to change. Palette: Site2Site Transport Services — charcoal black + logo
   gold (#F0D848) on white/cream, sampled from the client's logo.
   All text/icon color pairs below are contrast-verified (WCAG AA):
   keep the same roles if you swap hexes, and re-verify ratios.
   ========================================================================== */

/*
  Google Fonts import. Swap the family names here AND in --font-display /
  --font-body below if a client wants different type. Keep it to two
  families max (one display, one body) to protect the quality bar.
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* ---------------------------------------------------------------------
     COLOR — default palette: deep pine green + terracotta accent on warm
     bone. Use --color-accent sparingly (CTAs, small marks, dividers). It
     should never be a large fill.
     --------------------------------------------------------------------- */
  --color-primary: #1c1c1a;        /* Site2Site charcoal — headers, footer, dark sections (11.88:1 with accent gold) */
  --color-primary-600: #2c2c28;    /* lighter charcoal — hover states on dark */
  --color-primary-700: #0f0f0d;    /* near-black — gradients, overlays, button label on gold (13.36:1) */
  --color-primary-tint: #f0efe8;   /* pale warm gray tint — soft section backgrounds */

  --color-accent: #c9a227;         /* Site2Site gold, deepened from the logo's bright canary (#f0d848 8/13) — same yellow family the client requested, but an antique/metallic gold reads premium and trustworthy at large fill sizes (buttons, badges) where the brighter tone read closer to caution-tape yellow. 7.06:1 on primary. Not for text/icons on light backgrounds. */
  --color-accent-600: #af8d22;     /* deeper gold — button hover fill, 6.08:1 with primary-700 label text */
  --color-accent-ink: #756000;     /* dark amber — the only accent shade cleared for text/icons/borders on light backgrounds (6.12:1 white, 5.66:1 bg-alt, 5.21:1 accent-tint) — unchanged, already dark enough to read as premium rather than caution */
  --color-accent-tint: #f5ecd6;    /* pale gold tint, warmed slightly — badges, highlight chips */

  --color-bg: #ffffff;
  --color-bg-alt: #f8f6ee;         /* warm cream for alternating sections */
  --color-bg-dark: var(--color-primary);

  --color-text: #1e1e1c;
  --color-text-muted: #55544c;
  --color-text-faint: #62615a;     /* 6.22:1 on white, 5.75:1 on bg-alt */
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #cfccc0;   /* 10.61:1 on primary */

  --color-border: #e6e3d5;
  --color-border-dark: rgba(255, 255, 255, 0.14);

  --color-success: #2e7d4f;
  --color-success-tint: #e7f4ec;
  --color-danger: #b3261e;
  --color-danger-tint: #fbeae9;

  --color-star: #c9a227;      /* aligned to the new accent gold — readable gold star on light cards (decorative; aria-label carries rating) */

  /* Focus ring color: swaps to the brighter --color-accent inside dark
     sections (see .section--dark, .hero, .page-header, .cta-band,
     .site-footer in styles.css), because the default --color-accent-ink
     is too dark to read against pine. */
  --color-focus: var(--color-accent-ink);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — DM Serif Display (classic, high-trust serif display; only
     ships weight 400, headings already use font-weight 400) + DM Sans
     (clean, highly legible body). Swapped from Bricolage/Figtree
     2026-09-18, Ray's pick from four options.
     --------------------------------------------------------------------- */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 3.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ---------------------------------------------------------------------
     SPACING SCALE (rem)
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;    /* half-step: form/consent hit-area math */
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;    /* half-step: .btn vertical padding, was a hardcoded 0.9rem */
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* ---------------------------------------------------------------------
     RADII / BORDERS
     --------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --border-width: 1px;

  /* ---------------------------------------------------------------------
     SHADOWS — used sparingly for "subtle depth", never heavy drop shadows
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20, 20, 16, 0.06), 0 1px 1px rgba(20, 20, 16, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 20, 16, 0.08), 0 2px 6px rgba(20, 20, 16, 0.05);
  --shadow-lg: 0 20px 48px rgba(20, 20, 16, 0.14), 0 6px 16px rgba(20, 20, 16, 0.08);
  --shadow-gold: 0 10px 28px rgba(201, 168, 20, 0.30);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 780px;
  --header-height: 84px;

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 240ms ease;

  /* Entrance/reveal choreography (motion pass 7/19). One-line rebrand
     knobs: set --motion-duration to 0ms to kill all entrances and
     scroll reveals for a calmer brand; lower --motion-stagger to
     tighten the cascade. Micro-interactions (hover lift, nav underline)
     ride --transition-fast/base above and are unaffected. */
  --motion-duration: 600ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-stagger: 90ms;
}