/* ============================================================
   Mr Diesel Inc — Canonical Design Tokens
   Truck & Trailer Repair · Mississauga, ON · EST 2018
   Dark industrial · MTO compliance · fleet-first
   ------------------------------------------------------------
   This file holds COLOR, TYPE, SPACING, SHAPE, MOTION tokens.
   Every other stylesheet (site, ui kits, preview cards) should
   link "colors_and_type.css" before its own component styles
   and use only these variables.
   ============================================================ */

:root {
  /* ============ COLOR — Brand ============ */
  --ink:           #1a1f2e;   /* near-black navy · page bg */
  --ink-2:         #131825;   /* deeper section bg */
  --ink-3:         #0d111b;   /* footer / well */
  --steel:         #2a3142;   /* card surface on dark */
  --steel-2:       #3a4258;   /* hover surface */
  --hairline:      #2a3142;   /* divider on dark */
  --hairline-2:    #3a4258;

  --diesel:        #e8421a;   /* signature orange-red — the brand */
  --diesel-deep:   #c1340e;   /* hover / pressed */
  --diesel-bright: #ff5a30;   /* highlight on dark */
  --diesel-tint:   #2a1d18;   /* deep wash on dark surfaces */
  --diesel-onlight: #a22e12;  /* WCAG-AA text-safe orange for small text on light/paper backgrounds (accessibility fix) */

  /* ============ COLOR — Semantic / Operational ============ */
  --sticker:       #f5b619;   /* MTO yellow-sticker yellow */
  --check:         #22a06b;   /* "passed" / open */
  --warn:          #f5b619;
  --danger:        var(--diesel);
  --info:          #3a7be0;

  /* ============ COLOR — Text ============ */
  --fg-1:          #ffffff;   /* primary on dark */
  --fg-2:          #c2c8d4;   /* secondary on dark */
  --fg-3:          #9aa3b7;   /* tertiary on dark — lightened for WCAG AA on --steel (accessibility fix) */
  --fg-4:          #858fa1;   /* muted on dark — lightened for WCAG AA on --ink/--ink-3 (accessibility fix) */
  --on-orange:     #ffffff;

  /* ============ COLOR — Light surfaces ============ */
  --paper:         #ffffff;
  --paper-2:       #f4f5f8;
  --ink-on-paper:  #1a1f2e;
  --fg-paper-2:    #4a5266;
  --fg-paper-3:    #515a6b;   /* darkened for WCAG AA on --paper/--paper-2 (accessibility fix) */
  --border-paper:  #e1e4eb;

  /* ============ TYPE — Families ============ */
  --f-display: "Barlow Condensed", "Oswald", "Bebas Neue",
               "Impact", system-ui, sans-serif;
  --f-body:    "Barlow", system-ui, -apple-system, "Segoe UI",
               Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono",
               Menlo, Consolas, monospace;

  /* ============ TYPE — Scale ============ */
  --fs-display:  clamp(48px, 7vw, 96px);  /* hero numerals & "0" stats */
  --fs-h1:       clamp(40px, 6vw, 84px);
  --fs-h2:       clamp(30px, 4vw, 52px);
  --fs-h3:       clamp(22px, 2.4vw, 28px);
  --fs-h4:       18px;
  --fs-overline: 12px;
  --fs-body-lg:  19px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-tiny:     12px;

  /* ============ TYPE — Weight / Tracking / Leading ============ */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  --lh-tight:    1.0;
  --lh-snug:     1.15;
  --lh-normal:   1.55;
  --lh-loose:    1.65;

  --tr-normal:    0;
  --tr-overline:  .22em;
  --tr-button:    .14em;
  --tr-eyebrow:   .22em;
  --tr-tight:    -.01em;

  /* ============ SHAPE — Radii (industrial = sharp) ============ */
  --r-0:    0;
  --r-1:    2px;     /* default cards / inputs / buttons */
  --r-2:    4px;
  --r-pill: 999px;

  /* ============ SHAPE — Borders / Strokes ============ */
  --bw-thin:   1px;
  --bw-base:   2px;
  --bw-accent: 4px;   /* signature accent stripe (cards, hero panel) */

  /* ============ SHADOWS — used sparingly, brand is matte ============ */
  --shadow-1: 0 1px 0 rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.45);
  --shadow-orange: 0 8px 24px rgba(232,66,26,.28);

  /* ============ SPACING (4px base) ============ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ============ LAYOUT ============ */
  --container: 1240px;

  /* ============ MOTION ============ */
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;
  --ease:     cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   Semantic element defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  background: var(--ink);
  color: var(--fg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-extra); letter-spacing: 0; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: .02em; }

p {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}
small { font-size: var(--fs-small); color: var(--fg-3); }

code, pre, kbd, samp { font-family: var(--f-mono); font-size: .92em; }

a { transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--diesel); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-12) 0; }

::selection { background: var(--diesel); color: var(--on-orange); }

/* Eyebrow — used everywhere as the small ALL-CAPS label */
.eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--diesel);
}
.eyebrow--muted { color: var(--fg-3); }

.accent { color: var(--diesel); }