/* =====================================================================
   ATTORNEY BIG AL — Design Tokens
   Color + Type foundations for the "1-800-HURT-123" brand.
   Bold. Loud. Scroll-stopping. Red / Black / White.
   ---------------------------------------------------------------------
   Fonts are loaded from Google Fonts (CDN). See note in README —
   exact site fonts (Elementor/Google) were not extractable, so these
   are close substitutes chosen for the same heavy-condensed energy.
   ===================================================================== */

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

:root {
  /* ---------------------------------------------------------------
     BRAND COLORS — the three that do all the work
     --------------------------------------------------------------- */
  --red:            #CE1217;   /* the brand red — HURT / BIG AL / CTAs */
  --red-hover:      #B00E12;   /* darker red — hover */
  --red-press:      #930A0E;   /* darkest red — active/press */
  --red-tint:       #FBE8E8;   /* faint red wash — alert strips, fills */

  --ink:            #0E0E0E;   /* near-black — primary surfaces + display type */
  --ink-soft:       #1C1C1C;   /* raised dark surface */
  --white:          #FFFFFF;

  /* ---------------------------------------------------------------
     NEUTRALS — concrete grays for text + UI
     --------------------------------------------------------------- */
  --gray-900:       #161616;
  --gray-700:       #3A3A3A;
  --gray-500:       #6B6B6B;
  --gray-400:       #9A9A9A;
  --gray-300:       #C9C9C9;
  --gray-200:       #E4E4E4;
  --gray-100:       #F2F1EF;   /* warm concrete — page background */
  --gray-050:       #F8F7F5;

  /* ---------------------------------------------------------------
     SEMANTIC FOREGROUND / BACKGROUND
     --------------------------------------------------------------- */
  --fg1:            var(--ink);        /* primary text on light */
  --fg2:            var(--gray-700);   /* secondary text */
  --fg3:            var(--gray-500);   /* muted / captions */
  --fg-on-dark:     var(--white);      /* text on ink/red */
  --fg-on-dark-2:   #C9C9C9;           /* secondary text on dark */

  --bg-page:        var(--gray-100);
  --bg-surface:     var(--white);
  --bg-dark:        var(--ink);

  /* ---------------------------------------------------------------
     SEMANTIC STATUS (used sparingly — this brand is red/black)
     --------------------------------------------------------------- */
  --success:        #1E7A41;
  --warning:        #C9871A;
  --info:           #1F5FAE;

  /* ---------------------------------------------------------------
     BORDERS / LINES
     --------------------------------------------------------------- */
  --line:           var(--gray-200);
  --line-strong:    var(--ink);
  --border-heavy:   3px solid var(--ink);

  /* ---------------------------------------------------------------
     TYPE FAMILIES
     --------------------------------------------------------------- */
  --font-display:   'Anton', 'Oswald', 'Arial Narrow', sans-serif; /* HERO impact */
  --font-headline:  'Oswald', 'Arial Narrow', sans-serif;          /* subheads, buttons, eyebrows */
  --font-body:      'Archivo', system-ui, sans-serif;              /* paragraphs, UI */

  /* ---------------------------------------------------------------
     TYPE SCALE — display is huge & tight on purpose
     --------------------------------------------------------------- */
  --fs-hero:        clamp(3.5rem, 8vw, 7rem);   /* 56 → 112 */
  --fs-display:     clamp(2.75rem, 5vw, 4.5rem);
  --fs-h1:          clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2:          clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:          1.5rem;
  --fs-eyebrow:     0.9rem;
  --fs-lg:          1.25rem;
  --fs-body:        1.0625rem;
  --fs-sm:          0.9375rem;
  --fs-xs:          0.8125rem;

  --lh-tight:       0.92;   /* display lockups */
  --lh-snug:        1.1;
  --lh-body:        1.6;

  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.18em;   /* wide-spaced "ATTORNEY"-style labels */
  --tracking-button:  0.06em;

  /* ---------------------------------------------------------------
     RADII — minimal. This brand is squared-off and blunt.
     --------------------------------------------------------------- */
  --r-none:         0px;
  --r-sm:           4px;
  --r-md:           8px;
  --r-pill:         999px;   /* phone CTAs only */

  /* ---------------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------------------------------------------------------------
     SHADOWS / ELEVATION — used lightly; brand prefers hard edges
     --------------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(14,14,14,.10);
  --shadow-md:   0 6px 18px rgba(14,14,14,.12);
  --shadow-lg:   0 18px 44px rgba(14,14,14,.20);
  --shadow-red:  0 10px 26px rgba(206,18,23,.32);   /* CTA glow */
  --shadow-hard: 6px 6px 0 var(--ink);              /* signature offset block */
}

/* =====================================================================
   SEMANTIC TYPE CLASSES
   ===================================================================== */
.t-eyebrow {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--red);
}
.t-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--fg1);
}
.t-h1 { font-family: var(--font-headline); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); text-transform: uppercase; }
.t-h2 { font-family: var(--font-headline); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); text-transform: uppercase; }
.t-h3 { font-family: var(--font-headline); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-lead { font-family: var(--font-body); font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--fg2); }
.t-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); }
.t-sm   { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5; color: var(--fg3); }
.t-mono-num { font-family: var(--font-display); letter-spacing: 0; } /* big stat numbers */