/* ============================================================
   Steam-Pro Design System — colors + typography tokens
   Source of truth pulled from SteamPro-Website-Mockup-v2.html
   ============================================================ */

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

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Royal Blue — primary brand. Locked. Used on logo, headings, primary surfaces. */
  --sp-royal:          #002366;
  --sp-royal-deep:     #001a4d;  /* darker — pressed states, hero gradient bottom */
  --sp-royal-light:    #0a3d8f;  /* lighter — hover, hero gradient mid */

  /* Bright Blue family — pulled directly from the wordmark gradient.
     This is the brand's accent. CTAs, links, focus rings, inline highlights.
     No green-teal anywhere in this system. */
  --sp-blue-bright:    #1E90FF;  /* CTA fill — "dodger blue"; the bright top of the wordmark */
  --sp-blue-deep:      #1554C9;  /* CTA hover — sits between bright and royal */
  --sp-blue-glow:      #5BD0FF;  /* the cyan-blue outline glow from the wordmark; on-dark accent */
  --sp-blue-soft:      #DBEEFF;  /* badge backgrounds on light surfaces */

  /* Emergency — crimson. Replaces the cheap "service-station" orange.
     Used ONLY for emergency bands, warnings, fire-damage iconography. */
  --sp-emergency:      #B91C1C;
  --sp-emergency-deep: #7F1D1D;
  --sp-emergency-soft: #FEE2E2;

  /* Star gold — reserved exclusively for review stars. Do not use as accent. */
  --sp-star:           #F59E0B;

  /* ---------- NEUTRALS ---------- */
  --sp-ink:            #0B1220;  /* near-black body color */
  --sp-ink-soft:       #1E293B;
  --sp-slate:          #475569;  /* secondary body text */
  --sp-slate-mid:      #64748B;  /* tertiary, meta */
  --sp-slate-soft:     #94A3B8;  /* disabled, captions on dark */
  --sp-line:           #E2E8F0;  /* default border */
  --sp-line-soft:      #F1F5F9;  /* hairlines, subtle dividers */
  --sp-surface:        #F8FAFC;  /* section bg */
  --sp-white:          #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --fg-1:              var(--sp-ink);
  --fg-2:              var(--sp-slate);
  --fg-3:              var(--sp-slate-mid);
  --fg-inverse:        var(--sp-white);
  --fg-link:           var(--sp-royal);
  --fg-link-hover:     var(--sp-blue-deep);

  --bg-page:           var(--sp-white);
  --bg-surface:        var(--sp-surface);
  --bg-elevated:       var(--sp-white);
  --bg-hero:           var(--sp-royal-deep);
  --bg-emergency:      var(--sp-emergency);

  --border-default:    var(--sp-line);
  --border-subtle:     var(--sp-line-soft);
  --border-focus:      var(--sp-blue-bright);

  --accent:            var(--sp-blue-bright);
  --accent-hover:      var(--sp-blue-deep);

  /* ---------- TYPOGRAPHY ---------- */
  /* Display = "Ultra" (Google Fonts) — Cooper-Black-analog. Always rendered italic,
     gradient-filled, with cyan outline. This is the wordmark voice in headline form. */
  --font-display: 'Ultra', 'Cooper Black', 'Bowlby One SC', Georgia, serif;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Base scale — desktop. Reduce on mobile via media queries. */
  --fs-display-xl:    56px;  /* hero h1 */
  --fs-display-lg:    44px;  /* section h2 */
  --fs-display-md:    38px;  /* sub-section h2 */
  --fs-display-sm:    30px;  /* card h2 */
  --fs-h3:            22px;
  --fs-h4:            17px;
  --fs-lede:          19px;  /* hero/section opening paragraph */
  --fs-body:          16px;
  --fs-body-sm:       14.5px;
  --fs-caption:       13px;
  --fs-micro:         12px;
  --fs-overline:      11px;  /* uppercase labels */

  --lh-tight:    1.05;   /* hero h1 */
  --lh-snug:     1.15;
  --lh-base:     1.55;
  --lh-relaxed:  1.7;    /* lede paragraphs */

  --ls-display: -0.025em;
  --ls-heading: -0.02em;
  --ls-body:    -0.005em;
  --ls-eyebrow: 0.15em;   /* uppercase eyebrow labels */
  --ls-overline: 0.07em;  /* small all-caps meta */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ---------- SPACING / RADIUS / SHADOW ---------- */
  --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;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;   /* cards, buttons */
  --radius-xl:  22px;   /* big cards, hero form */
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(11, 18, 32, .05), 0 1px 2px rgba(11, 18, 32, .04);
  --shadow-md: 0 6px 16px rgba(11, 18, 32, .06), 0 2px 6px rgba(11, 18, 32, .04);
  --shadow-lg: 0 18px 44px rgba(11, 18, 32, .12), 0 4px 12px rgba(11, 18, 32, .05);
  --shadow-cta: 0 6px 20px rgba(30, 144, 255, .35);          /* teal CTA glow */
  --shadow-royal-cta: 0 10px 28px rgba(0, 26, 77, .40);     /* royal CTA glow */
  --shadow-hero-card: 0 30px 60px rgba(0, 26, 77, .4), 0 2px 4px rgba(0, 26, 77, .3);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;

  /* ---------- BRAND GRADIENTS ---------- */
  --grad-hero:   radial-gradient(ellipse at 20% 15%, rgba(91, 208, 255, .22), transparent 50%),
                 linear-gradient(180deg, #0a3d8f 0%, #002366 35%, #001233 100%);
  --grad-cta:    linear-gradient(135deg, #1554C9 0%, #1E90FF 50%, #5BD0FF 100%);
  --grad-royal-teal: linear-gradient(135deg, #002366 0%, #1E90FF 100%);
  --grad-emergency: linear-gradient(90deg, #B91C1C 0%, #991B1B 100%);

  /* The wordmark fill — top-bright royal fading to almost-black. Matches the logo. */
  --grad-wordmark: linear-gradient(180deg, #4A90FF 0%, #1A4FBF 30%, #002366 65%, #001233 100%);
}

/* ============================================================
   .wordmark-text — display headlines that look like the logo
   Use on h1/h2 over white or very light backgrounds.
   On dark backgrounds use .wordmark-text--on-dark instead.
   ============================================================ */
.wordmark-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;            /* Ultra is one weight */
  letter-spacing: -0.005em;
  line-height: 0.95;
  background: var(--grad-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;   /* must beat .hero h1, .svc-hero h1, etc. */
  -webkit-text-stroke: 1.5px #5BD0FF;
  paint-order: stroke fill;
  filter: drop-shadow(0 6px 18px rgba(91, 208, 255, .35));
}
.wordmark-text--on-dark {
  background: linear-gradient(180deg, #BFE3FF 0%, #5BD0FF 30%, #1A4FBF 75%, #002366 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px #5BD0FF;
  paint-order: stroke fill;
  filter: drop-shadow(0 8px 28px rgba(91, 208, 255, .45));
}


/* ===========================================================
   SEMANTIC ELEMENT STYLES — drop-in defaults
   Pages can use plain h1/h2/p tags and inherit the system.
   =========================================================== */

body {
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  color: var(--fg-1);
  background: var(--bg-page);
  line-height: var(--lh-base);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: 1.1;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
}
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
p { font-size: var(--fs-body); color: var(--fg-1); line-height: var(--lh-base); }
.lede { font-size: var(--fs-lede); color: var(--fg-2); line-height: var(--lh-relaxed); }

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--fg-link-hover); }

::selection { background: var(--sp-blue-glow); color: var(--sp-ink); }

/* Eyebrow / overline labels above section headings */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--sp-blue-deep);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* Pulsing kicker used over hero gradients */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(30, 144, 255, .15);
  border: 1px solid rgba(91, 208, 255, .35);
  color: var(--sp-blue-glow);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: var(--fw-bold);
  letter-spacing: .08em;
}