/* =================================================================
   SERVICE SQUAD — Colors & Type Tokens
   Athletic, bold, "squad" identity. BMW-M-style dark canvas with
   Service Squad red / navy / flame tricolor.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Barlow+Condensed:ital,wght@0,500;0,700;0,800;1,800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* -------- BRAND CORE (from logo) -------- */
  --ss-navy:        #1b2a52;   /* primary outline + dark canvas */
  --ss-navy-deep:   #0f1a3a;   /* below navy — hero backdrops */
  --ss-navy-ink:    #050b1f;   /* almost-black for BMW-M canvas */
  --ss-red:         #e63329;   /* squad red — primary brand color */
  --ss-red-bright:  #ff4438;   /* hover/glow red */
  --ss-red-deep:    #b8221a;   /* press / shadow red */
  --ss-flame-orange:#f59921;   /* rocket flame outer */
  --ss-flame-yellow:#fbd233;   /* rocket flame inner */
  --ss-steel:       #c8ccd1;   /* wrench silver */
  --ss-steel-dark:  #6e757d;
  --ss-white:       #ffffff;

  /* -------- NEUTRALS (cool, slight navy tint) -------- */
  --ss-bg:          #f6f7fa;   /* page bg, light */
  --ss-surface:     #ffffff;   /* cards on light */
  --ss-surface-2:   #eef0f5;
  --ss-line:        #d9dde6;
  --ss-line-strong: #b6bdcc;
  --ss-ink-1:       #0b1430;   /* primary text */
  --ss-ink-2:       #2c3656;
  --ss-ink-3:       #5a6480;
  --ss-ink-4:       #8a93ab;

  /* -------- DARK / BMW-M CANVAS -------- */
  --ss-dark-bg:     #050b1f;
  --ss-dark-bg-2:   #0d1530;
  --ss-dark-surface:#101a3a;
  --ss-dark-line:   #1f2a52;
  --ss-dark-line-2: #2c3a6b;
  --ss-on-dark-1:   #ffffff;
  --ss-on-dark-2:   #c7cce0;
  --ss-on-dark-3:   #8a92ad;

  /* -------- SEMANTIC -------- */
  --fg-1:           var(--ss-ink-1);
  --fg-2:           var(--ss-ink-2);
  --fg-3:           var(--ss-ink-3);
  --fg-muted:       var(--ss-ink-4);
  --bg-1:           var(--ss-bg);
  --bg-2:           var(--ss-surface-2);
  --surface:        var(--ss-surface);
  --line:           var(--ss-line);
  --accent:         var(--ss-red);
  --accent-hover:   var(--ss-red-bright);
  --accent-press:   var(--ss-red-deep);
  --on-accent:      var(--ss-white);
  --brand-dark:     var(--ss-navy);

  /* state colors */
  --success:        #1f8a5b;
  --warning:        var(--ss-flame-orange);
  --danger:         var(--ss-red);
  --info:           #2b6fd9;

  /* -------- TYPE FAMILIES -------- */
  --font-display:   'Saira Condensed', 'Barlow Condensed', 'Oswald', system-ui, sans-serif; /* athletic italic display */
  --font-display-alt: 'Barlow Condensed', 'Saira Condensed', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* -------- TYPE SCALE -------- */
  --fs-display-xl: clamp(72px, 11vw, 168px);
  --fs-display-l:  clamp(56px, 8vw, 112px);
  --fs-display-m:  clamp(44px, 6vw, 80px);
  --fs-h1:         clamp(36px, 4.5vw, 56px);
  --fs-h2:         clamp(28px, 3.2vw, 40px);
  --fs-h3:         24px;
  --fs-h4:         18px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-small:      14px;
  --fs-micro:      12px;
  --fs-eyebrow:    13px;

  /* -------- RADII -------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;
  /* Logo-style stadium radius (large lozenge like the wordmark bg) */
  --r-stadium: 60px;

  /* -------- SHADOWS -------- */
  --shadow-sm:  0 1px 2px rgba(11, 20, 48, 0.08);
  --shadow-md:  0 4px 14px rgba(11, 20, 48, 0.10), 0 1px 3px rgba(11,20,48,0.06);
  --shadow-lg:  0 18px 40px rgba(11, 20, 48, 0.14), 0 2px 6px rgba(11,20,48,0.06);
  --shadow-red: 0 10px 24px rgba(230, 51, 41, 0.35);
  --shadow-flame: 0 10px 36px rgba(245, 153, 33, 0.45);

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

  /* -------- MOTION -------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 420ms;

  /* -------- SIGNATURE TRISTRIPE
     The BMW-M analog for Service Squad. Three shades of red
     (bright → squad → deep) — bolder, more disciplined than
     the flame palette and reads stronger at small sizes.
     Use as bottom-border accents, header underlines, dividers.
     (Legacy flame tokens preserved below for accent moments
     where the heat of the rocket flames is still useful.) */
  --tri-1:      #ff5a4f;            /* bright red */
  --tri-2:      var(--ss-red);      /* squad red  #e63329 */
  --tri-3:      #8a1a14;            /* deep red   */
  --tri-red:    var(--tri-1);
  --tri-orange: var(--tri-2);  /* kept for back-compat */
  --tri-yellow: var(--tri-3);  /* kept for back-compat */
  --flame-1:    var(--ss-red);
  --flame-2:    var(--ss-flame-orange);
  --flame-3:    var(--ss-flame-yellow);
}

/* =================================================================
   Base element styles (drop into any HTML to get the look)
   ================================================================= */
html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); font-weight: 900; }
h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: 0; }
h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: 0.02em; font-weight: 800; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ss-red);
}

p { margin: 0 0 var(--s-4); color: var(--fg-2); }
p.lead { font-size: var(--fs-body-lg); color: var(--fg-1); }

a { color: var(--ss-red); text-decoration: none; font-weight: 600; }
a:hover { color: var(--ss-red-bright); text-decoration: underline; text-underline-offset: 3px; }

code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }

/* =================================================================
   Signature helpers
   ================================================================= */

/* The Service Squad tricolor stripe — used as a brand accent.
   Apply as ::after or directly. */
.ss-tristripe {
  height: 6px;
  background:
    linear-gradient(to right,
      var(--tri-red)    0 33.33%,
      var(--tri-orange) 33.33% 66.66%,
      var(--tri-yellow) 66.66% 100%);
  border-radius: 3px;
}

/* Italic-slash motion lines (echoes wordmark slant) */
.ss-slash::after {
  content: "";
  display: inline-block;
  width: 0; height: 1em;
  margin-left: 0.4em;
  border-left: 4px solid var(--ss-red);
  transform: skewX(-18deg);
  vertical-align: -0.15em;
}