/* ============================================================
   TOKENS.CSS — Design Tokens
   KD Excavating v2 | Noir Studio

   Single source of truth. Every value used anywhere in the
   site is defined here and referenced via var() everywhere
   else. Changing a value here changes it site-wide.

   Sections:
     1. Color
     2. Typography
     3. Spacing
     4. Layout
     5. Motion
   ============================================================ */


/* ── 1. COLOR ──────────────────────────────────────────────── */

:root {

  /* Base palette */
  --color-black:  #000000;
  --color-white:  #ffffff;
  --color-off:    #F4F4F2;   /* warm off-white — alt section backgrounds */
  --color-mid:    #888888;   /* muted text, labels, secondary UI */

  /* Semantic aliases — reference these in every component.
     Never use raw hex values outside this file. */
  --color-bg:           var(--color-white);
  --color-bg-alt:       var(--color-off);
  --color-bg-dark:      var(--color-black);

  --color-text:         var(--color-black);
  --color-text-muted:   var(--color-mid);
  --color-text-light:   var(--color-white);

  --color-border:       var(--color-black);
  --color-border-dark:  rgba(255, 255, 255, 0.10);  /* dividers on dark bg */
  --color-border-faint: rgba(255, 255, 255, 0.25);  /* slightly visible on dark */


/* ── 2. TYPOGRAPHY ─────────────────────────────────────────── */

  /* Families */
  --font-display: 'Archivo Black', sans-serif;  /* headings, hero text, stats */
  --font-body:    'Archivo', sans-serif;         /* all body copy and UI labels */

  /* Fixed sizes — for UI elements that should never scale */
  --text-xs:   11px;   /* all-caps labels, meta info */
  --text-sm:   12px;   /* nav links, button text */
  --text-base: 16px;   /* body copy */
  --text-md:   17px;   /* lead / intro paragraphs */
  --text-lg:   18px;   /* hero sub-copy */

  /* Fluid display sizes — scale between viewport widths */
  --text-display-sm: clamp(28px, 4vw,  48px);   /* CTA banners */
  --text-display-md: clamp(36px, 5vw,  64px);   /* service page titles */
  --text-display-lg: clamp(52px, 7vw,  90px);   /* section headings */
  --text-display-xl: clamp(64px, 9vw, 120px);   /* main hero title */

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* Line heights */
  --leading-tight:  0.90;   /* compressed display type */
  --leading-snug:   0.95;
  --leading-normal: 1.60;   /* standard body copy */
  --leading-loose:  1.75;   /* sub-copy, captions */
  --leading-airy:   1.85;   /* long-form body in open sections */

  /* Letter spacing */
  --tracking-display:  -0.02em;   /* tighten large display type */
  --tracking-tight:    -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.15em;   /* nav links */
  --tracking-wider:     0.20em;   /* button labels */
  --tracking-widest:    0.30em;   /* section labels in all-caps */


/* ── 3. SPACING ────────────────────────────────────────────── */

  /* 4px base scale */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Semantic layout spacing */
  --padding-section:    100px;   /* vertical padding for major sections */
  --padding-section-sm:  80px;   /* smaller/secondary sections */
  --padding-inline:       5vw;   /* horizontal page gutter */


/* ── 4. LAYOUT ─────────────────────────────────────────────── */

  --nav-height: 68px;

  /* Breakpoints — for reference only, media queries can't use vars
     --bp-md: 900px  (tablet and below — single column)
     --bp-sm: 768px  (mobile — full responsive overrides) */


/* ── 5. MOTION ─────────────────────────────────────────────── */

  --duration-fast: 150ms;   /* micro-interactions: hovers, focus states */
  --duration-base: 200ms;   /* standard UI transitions */
  --duration-slow: 750ms;   /* scroll reveal animations */

  --ease-default: ease;
  --ease-out:     ease-out;

}