/* =========================================================================
   Two Friends Transport — Foundations
   Colors + Typography tokens. Import once at the top of any HTML.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -------------------------------------------------------------------------
     BRAND CORE
     The two source-of-truth colors. Everything else derives from these.
     ------------------------------------------------------------------------- */
  --brand-forest:  rgb(57, 113, 75);     /* #39714B  — primary brand green */
  --brand-asphalt: rgb(22, 23, 23);      /* #161717  — near-black, the trucks */

  /* -------------------------------------------------------------------------
     FOREST GREEN SCALE
     Mountain / freight green. Used for primary actions, accents, route lines.
     ------------------------------------------------------------------------- */
  --forest-50:  #f1f6f2;
  --forest-100: #dde9e0;
  --forest-200: #b9d2c0;
  --forest-300: #8eb499;
  --forest-400: #639472;
  --forest-500: #39714B;   /* brand */
  --forest-600: #2f5e3e;
  --forest-700: #264c33;
  --forest-800: #1f3c29;
  --forest-900: #18301f;

  /* -------------------------------------------------------------------------
     ASPHALT SCALE
     The trucks, the road. Neutrals run warm-cool-neutral, slightly green-tinted
     to feel cohesive with forest, not a generic gray ramp.
     ------------------------------------------------------------------------- */
  --asphalt-0:   #ffffff;
  --asphalt-25:  #fafaf8;   /* paper / cream — matches the logo plate */
  --asphalt-50:  #f3f4f1;
  --asphalt-100: #e7e8e4;
  --asphalt-200: #cfd1cb;
  --asphalt-300: #a9aca5;
  --asphalt-400: #7f8279;
  --asphalt-500: #585b54;
  --asphalt-600: #3e413c;
  --asphalt-700: #2a2c28;
  --asphalt-800: #1c1d1b;
  --asphalt-900: #161717;   /* brand */
  --asphalt-950: #0d0e0d;

  /* -------------------------------------------------------------------------
     ACCENT — used sparingly. The maple-leaf moment, the danger sign.
     ------------------------------------------------------------------------- */
  --maple-500:   #c8392e;   /* warm red, references the maple leaf when needed */
  --maple-600:   #a72c23;
  --highway-amber: #e8a13a; /* for highway-sign moments / warnings */

  /* -------------------------------------------------------------------------
     SEMANTIC TOKENS — reach for these in components, not the raw scales above
     ------------------------------------------------------------------------- */
  --bg:            var(--asphalt-25);
  --bg-elevated:   var(--asphalt-0);
  --bg-sunken:     var(--asphalt-50);
  --bg-inverse:    var(--asphalt-900);

  --fg:            var(--asphalt-900);     /* primary text */
  --fg-muted:      var(--asphalt-600);     /* secondary text */
  --fg-subtle:     var(--asphalt-400);     /* tertiary, captions */
  --fg-on-dark:    var(--asphalt-25);      /* text on asphalt bg */
  --fg-on-brand:   #ffffff;                /* text on forest */

  --border:        var(--asphalt-200);
  --border-strong: var(--asphalt-300);
  --border-on-dark: var(--asphalt-700);

  --accent:        var(--forest-500);
  --accent-hover:  var(--forest-600);
  --accent-press:  var(--forest-700);
  --accent-soft:   var(--forest-100);
  --accent-fg:     #ffffff;

  --danger:        var(--maple-500);
  --warn:          var(--highway-amber);
  --success:       var(--forest-500);

  /* Focus ring — accessible against both light and dark surfaces */
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--forest-500) 45%, transparent);

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     Display: Archivo (geometric, hard-working sans — closest match to the
              "TWO FRIENDS" wordmark on Google Fonts).
     UI/Body: Inter (clean operational sans, pairs w/o competing).
     Mono:    JetBrains Mono (load #s, route IDs).
     ------------------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — modular, slightly tighter than default for a workmanlike feel */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;   /* used for SECTION LABELS, BUTTON LABELS */

  /* -------------------------------------------------------------------------
     SPACING — 4px base, named by use
     ------------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* -------------------------------------------------------------------------
     RADII — small. This brand is industrial, not soft. Cards = 8px ceiling.
     ------------------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;          /* reserved — large hero panels only */
  --radius-pill: 999px;

  /* -------------------------------------------------------------------------
     SHADOWS — short, low-blur. These trucks aren't floating.
     ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(22, 23, 23, 0.06);
  --shadow-sm: 0 1px 3px rgba(22, 23, 23, 0.08), 0 1px 2px rgba(22, 23, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(22, 23, 23, 0.10), 0 1px 3px rgba(22, 23, 23, 0.06);
  --shadow-lg: 0 12px 28px rgba(22, 23, 23, 0.14), 0 4px 8px rgba(22, 23, 23, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Motion — short, no bounce. Logistics = predictable. */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --duration-1: 120ms; /* @kind other */
  --duration-2: 200ms; /* @kind other */
  --duration-3: 320ms; /* @kind other */
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Drop into any HTML and headings/links/etc. inherit brand styling.
   ========================================================================= */

.tf-typography,
body.tf-typography {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tf-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.tf-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.tf-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0;
}

.tf-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: 0;
}

.tf-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.tf-lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.tf-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.tf-caption {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.tf-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

.tf-typography a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.tf-typography a:hover { color: var(--accent-hover); }

/* Display utility — for hero numbers, big stats, billboard moments */
.tf-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-6xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
}