/* =========================================================================
   SCELLANT D'ASPHALTE S. OUELLET — Core tokens: color + type
   Asphalt-maintenance brand, Alma (Québec). Industrial / automotive vibe.
   Palette sampled directly from the brand logo + door-hanger artwork.
   -------------------------------------------------------------------------
   FONTS (self-hosted, real brand fonts):
   • RACE SPORT  — the logo / wordmark face (squared italic automotive).
     Used for the hero / big brand-statement display moments.
   • BAHNSCHRIFT — DIN-style variable grotesque (wght 300–700, wdth 75–100%).
     The marketing-headline + body face from the door-hanger collateral.
   ========================================================================= */

@font-face {
  font-family: 'Race Sport';
  src: url('fonts/Race_Sport.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Bahnschrift';
  src: url('fonts/BAHNSCHRIFT.TTF') format('truetype');
  font-weight: 300 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------- BRAND */
  /* Signature lime/neon green — sampled #96FF5C from logo + artwork */
  --green-100: #E4FFD4;
  --green-200: #C6FFA6;
  --green-300: #B0FF80;
  --green-400: #A4FF6B;
  --green-500: #96FF5C;   /* PRIMARY brand green */
  --green-600: #7DE03F;   /* hover / pressed (slightly darker) */
  --green-700: #5FB52A;   /* on light surfaces, AA text */
  --green-800: #46871D;

  /* Deep forest green — the chevron / diamond accent shapes */
  --moss-600: #3E6129;
  --moss-700: #355820;    /* sampled #355820 */
  --moss-800: #284417;

  /* Asphalt blacks + charcoals — sampled from the textured background */
  --ink-950: #060606;
  --ink-900: #0D0D0D;     /* page background (asphalt) */
  --ink-850: #131312;
  --ink-800: #1A1A18;
  --ink-700: #232321;     /* raised surface */
  --ink-600: #2C2C2A;     /* card / panel */
  --ink-500: #3A3A37;     /* hairline-on-dark, dividers */

  /* Chrome / silver — the metallic wordmark + bottom bar */
  --silver-50:  #FFFFFF;
  --silver-100: #EDEFF2;
  --silver-200: #C7CBD4;
  --silver-300: #9DA2AC;
  --silver-400: #6E727C;
  --silver-500: #565864;  /* sampled from the chrome bar */

  /* Neutral greys for body copy / muted text */
  --grey-100: #F2F2F1;
  --grey-300: #B8BBC0;
  --grey-500: #8F8F8F;    /* sampled muted label grey */
  --grey-700: #515151;

  /* ----------------------------------------------------- SEMANTIC: COLOR */
  --bg:            var(--ink-900);   /* default page = asphalt black */
  --bg-elevated:   var(--ink-700);
  --surface:       var(--ink-600);   /* cards, panels */
  --surface-2:     var(--ink-800);
  --surface-light: var(--silver-100);/* light "paper" surface */

  --fg:            var(--silver-50); /* primary text on dark */
  --fg-muted:      var(--grey-300);
  --fg-subtle:     var(--grey-500);
  --fg-on-light:   var(--ink-900);   /* text on light surface */
  --fg-muted-light:var(--grey-700);

  --primary:       var(--green-500);
  --primary-hover: var(--green-600);
  --primary-ink:   var(--ink-900);   /* text/icon ON the green */
  --primary-text:  var(--green-700); /* green as readable text on dark */

  --border:        var(--ink-500);
  --border-strong: var(--silver-500);
  --border-light:  #D9DCE0;          /* hairline on light surface */
  --focus-ring:    var(--green-500);

  /* Chrome / metallic gradients (logo bar, hero accents) */
  --chrome: linear-gradient(180deg,#FFFFFF 0%,#E4E7EC 18%,#9DA2AC 47%,
            #54565F 52%,#9DA2AC 70%,#EDEFF2 88%,#C7CBD4 100%);
  --green-sheen: linear-gradient(180deg,#B0FF80 0%,#96FF5C 55%,#7DE03F 100%);
  --asphalt-fade: linear-gradient(180deg,rgba(13,13,13,0) 0%,
            rgba(13,13,13,.55) 55%,rgba(13,13,13,.92) 100%);

  /* --------------------------------------------------------- TYPE: FAMILY */
  /* Race Sport = logo/hero display. Bahnschrift = headlines + body.        */
  --font-display: 'Race Sport', 'Bahnschrift', system-ui, sans-serif;
  --font-heading: 'Bahnschrift', 'DIN Condensed', system-ui, sans-serif;
  --font-body:    'Bahnschrift', system-ui, -apple-system, sans-serif;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   900;

  /* --------------------------------------------------------- TYPE: SCALE  */
  /* Display headlines are condensed, UPPERCASE, often italic-skewed.       */
  --text-xs:   0.75rem;   /* 12px - micro labels */
  --text-sm:   0.875rem;  /* 14px - captions */
  --text-base: 1rem;      /* 16px - body */
  --text-md:   1.125rem;  /* 18px - lead body */
  --text-lg:   1.375rem;  /* 22px - subhead */
  --text-xl:   1.875rem;  /* 30px - H3 */
  --text-2xl:  2.75rem;   /* 44px - H2 */
  --text-3xl:  3.75rem;   /* 60px - H1 */
  --text-4xl:  5.5rem;    /* 88px - hero */

  --leading-tight: 0.95;
  --leading-snug:  1.1;
  --leading-body:  1.55;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;  /* uppercase labels */

  /* -------------------------------------------------- RADIUS / SHADOW / SP */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  /* Chevron clip — the signature angled corner */
  --chevron: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.6);
  --glow-green: 0 0 0 1px rgba(150,255,92,.35), 0 6px 24px rgba(150,255,92,.28);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --maxw: 1200px;
}

/* =========================================================================
   SEMANTIC TYPE PRIMITIVES — apply these classes directly, or copy the
   declarations into component styles.
   ========================================================================= */

.t-hero {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.t-h1 {
  font-family: var(--font-heading);
  font-weight: var(--w-bold);
  font-stretch: 75%;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-transform: uppercase;
}
.t-h2 {
  font-family: var(--font-heading);
  font-weight: var(--w-semibold);
  font-stretch: 75%;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}
.t-h3 {
  font-family: var(--font-heading);
  font-weight: var(--w-bold);
  font-stretch: 85%;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.t-subhead {
  font-family: var(--font-heading);
  font-weight: var(--w-semibold);
  font-size: var(--text-lg);
  line-height: 1.25;
}
.t-lead {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--text-sm);
  line-height: 1.4;
}
/* Eyebrow / kicker — the spaced-out uppercase label ("ALMA — QUÉBEC") */
.t-label {
  font-family: var(--font-heading);
  font-weight: var(--w-bold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}