/* =========================================================================
   Drive Legal Marketing — Foundations
   Colors, typography, spacing, radii, shadows.
   Import this once at the root of any document.
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* Fonts                                                              */
/* ------------------------------------------------------------------ */

/* Inter (bundled, variable) — body + UI. */
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Montserrat — display / headings. Sourced from Google Fonts CDN.
   (User-uploaded ttf was not provided; CDN fallback in use.) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap");

/* ------------------------------------------------------------------ */
/* Color tokens                                                       */
/* ------------------------------------------------------------------ */

:root {
  /* —— Primary —————————————————————————— */
  --color-charcoal:        #111111;  /* primary base */
  --color-red:             #E1262C;  /* primary accent */
  --color-white:           #FFFFFF;

  /* Hover/press shifts on the red so CTAs feel alive */
  --color-red-700:         #B81E23;  /* hover */
  --color-red-800:         #8E171B;  /* pressed */

  /* —— Secondary ———————————————————————— */
  --color-navy:            #0F2233;  /* premium alt background */
  --color-soft-gray:       #E6E6E6;  /* section backgrounds */
  --color-mid-gray:        #6B6B6B;  /* body text on light */

  /* —— Extended neutrals (derived, kept narrow) ————— */
  --color-charcoal-900:    #0A0A0A;  /* near-black, deepest backgrounds */
  --color-charcoal-800:    #1A1A1A;  /* card on dark */
  --color-charcoal-700:    #262626;  /* divider on dark */
  --color-gray-200:        #F2F2F2;  /* subtle section tint */
  --color-gray-300:        #D9D9D9;  /* hairline borders */
  --color-gray-500:        #999999;  /* tertiary text */
  --color-gray-700:        #3D3D3D;  /* heavy text on light, sub-headings */

  /* ——— Semantic foreground / background ——————————— */
  --fg-1:                  var(--color-charcoal);   /* primary text on light */
  --fg-2:                  var(--color-gray-700);   /* sub-heading on light */
  --fg-3:                  var(--color-mid-gray);   /* body text on light */
  --fg-4:                  var(--color-gray-500);   /* tertiary / captions */
  --fg-on-dark-1:          var(--color-white);
  --fg-on-dark-2:          var(--color-gray-300);
  --fg-on-dark-3:          var(--color-gray-500);
  --fg-accent:             var(--color-red);

  --bg-1:                  var(--color-white);
  --bg-2:                  var(--color-gray-200);   /* subtle section */
  --bg-3:                  var(--color-soft-gray);  /* contrast section */
  --bg-dark-1:             var(--color-charcoal);
  --bg-dark-2:             var(--color-charcoal-900);
  --bg-dark-navy:          var(--color-navy);

  --border-subtle:         var(--color-gray-300);
  --border-strong:         var(--color-gray-700);
  --border-on-dark:        var(--color-charcoal-700);

  /* ——— Typography tokens ————————————————————————— */
  --font-display:          "Montserrat", "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:             "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:             ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale — tuned for confident, marketing-grade hierarchy. */
  --fs-display:            clamp(56px, 7vw, 96px);
  --fs-h1:                 clamp(40px, 5vw, 64px);
  --fs-h2:                 clamp(32px, 3.6vw, 44px);
  --fs-h3:                 24px;
  --fs-h4:                 18px;
  --fs-body-lg:            18px;
  --fs-body:               16px;
  --fs-body-sm:            14px;
  --fs-caption:            12px;
  --fs-eyebrow:            13px;

  --lh-display:            0.95;
  --lh-heading:            1.08;
  --lh-body:               1.55;
  --lh-tight:              1.2;

  --tracking-display:      -0.02em;     /* tight, like the logo */
  --tracking-heading:      -0.01em;
  --tracking-body:         0;
  --tracking-eyebrow:      0.18em;       /* wide, like "LEGAL MARKETING" */
  --tracking-button:       0.06em;

  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semi:           600;
  --weight-bold:           700;
  --weight-black:          800;

  /* ——— Spacing scale ———————————————————————————— */
  --space-0:               0;
  --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;
  --space-10:              128px;

  /* ——— Radii ———————————————————————————————————— */
  --radius-0:              0;
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             14px;
  --radius-pill:           999px;
  --radius-shield:         140px;     /* the logo's horizontal-pill silhouette */

  /* ——— Borders ————————————————————————————————— */
  --hairline:              1px solid var(--border-subtle);
  --hairline-strong:       1px solid var(--border-strong);
  --hairline-dark:         1px solid var(--border-on-dark);

  /* ——— Shadows — sparingly used, never floaty ————— */
  --shadow-sm:             0 1px 2px rgba(17,17,17,0.06);
  --shadow-md:             0 6px 18px rgba(17,17,17,0.08);
  --shadow-lg:             0 22px 60px rgba(17,17,17,0.18);
  --shadow-cta:            0 8px 22px rgba(225,38,44,0.28);

  /* ——— Layout ————————————————————————————————— */
  --container:             1200px;
  --container-narrow:      880px;
  --gutter:                clamp(16px, 4vw, 48px);

  /* ——— Motion ————————————————————————————————— */
  --ease-out:              cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:           cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:              120ms;
  --dur-base:              200ms;
  --dur-slow:              360ms;
}

/* =========================================================================
   Typographic primitives
   ========================================================================= */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
}

/* Display — for hero / "DRIVE"-style statements */
.dlm-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

/* Headings — sentence or upper-case both supported */
.dlm-h1, h1.dlm {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
}
.dlm-h2, h2.dlm {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
}
.dlm-h3, h3.dlm {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
}
.dlm-h4, h4.dlm {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

/* Eyebrow — wide-tracked label, mirrors "LEGAL MARKETING" */
.dlm-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Body */
.dlm-body, p.dlm { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-3); }
.dlm-body-lg     { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-2); }
.dlm-body-sm     { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg-3); }
.dlm-caption     { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-4); }

/* Numerics — for case-study stats */
.dlm-stat {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-red);
  font-variant-numeric: tabular-nums;
}

/* Accent rule — the red stripe */
.dlm-rule {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--color-red);
  border-radius: 2px;
}