/* ============================================================
   SPARGS — DESIGN SYSTEM TOKENS
   Direction: "Kinetic Transit Signage"
   Derived from the Spargs brand assets (logo, app icon, forecourt).
   Signature motif: the four orange speed-stripes.
   ============================================================ */

/* --- Typefaces (self-hosted via Google Fonts import in HTML) ---
   Display : Archivo — wide industrial signage
   Body    : Familjen Grotesk — humanist, friendly, legible
   Data    : Space Mono — pump-counter / receipt numerals
------------------------------------------------------------- */

:root {

  /* ---- Core palette (sampled from brand assets) ---- */
  --spargs-blue:      #004990;  /* primary corporate blue        */
  --spargs-blue-deep: #003468;  /* pressed / shadow blue         */
  --midnight:         #031f3c;  /* forecourt night sky           */
  --midnight-2:       #072b52;  /* raised surface on midnight    */

  --orange:           #f47225;  /* ignition orange — the accent  */
  --ember:            #ff9a4d;  /* lighter orange, glow/hover    */
  --orange-deep:      #c9541a;  /* pressed orange                */

  --paper:            #f7f4ee;  /* warm off-white page           */
  --paper-2:          #efe9df;  /* panel on paper                */
  --steel:            #8fa3b8;  /* muted blue-grey text          */
  --steel-dim:        #b9c4d0;  /* hairlines on light            */
  --ink:              #0c1b2b;  /* near-black text on paper      */

  /* ---- Semantic roles ---- */
  --bg:            var(--paper);
  --surface:       #ffffff;
  --surface-alt:   var(--paper-2);
  --text:          var(--ink);
  --text-mute:     #4a5b6d;
  --text-faint:    var(--steel);
  --line:          #dcd6ca;
  --line-strong:   #c3bdaf;

  --brand:         var(--spargs-blue);
  --brand-hover:   var(--spargs-blue-deep);
  --accent:        var(--orange);
  --accent-hover:  var(--orange-deep);

  --on-brand:      #ffffff;
  --on-accent:     #ffffff;

  /* status */
  --ok:   #2f8f5b;
  --warn: #d9922b;
  --err:  #c0392b;

  /* ---- Type ramp ---- */
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body:    "Familjen Grotesk", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.44rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.2rem, 1.8rem + 2vw, 3.3rem);
  --step-4:  clamp(3rem, 2.2rem + 4vw, 5.6rem);

  /* ---- Space + shape ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  --radius:    10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(3,31,60,.08);
  --shadow-md: 0 6px 20px rgba(3,31,60,.12);
  --shadow-lg: 0 18px 50px rgba(3,31,60,.18);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Dark / "night forecourt" surface theme */
[data-theme="night"] {
  --bg:          var(--midnight);
  --surface:     var(--midnight-2);
  --surface-alt: #0a2140;
  --text:        #eaf1f8;
  --text-mute:   #a9bccf;
  --text-faint:  var(--steel);
  --line:        rgba(143,163,184,.20);
  --line-strong: rgba(143,163,184,.38);
  --brand:       #2f7fca;
  --brand-hover: #4f9bde;
  --on-brand:    #ffffff;
  --shadow-md:   0 6px 24px rgba(0,0,0,.5);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.6);
}

/* ============================================================
   SIGNATURE — the speed-stripe motif
   Four orange bars, offset like the logo's velocity lines.
   ============================================================ */
.stripes {
  --stripe-h: 4px;
  --stripe-gap: 5px;
  --stripe-w: 56px;
  display: inline-flex;
  flex-direction: column;
  gap: var(--stripe-gap);
}
.stripes i {
  display: block;
  height: var(--stripe-h);
  background: var(--accent);
  border-radius: 2px;
}
.stripes i:nth-child(1) { width: calc(var(--stripe-w) * .62); }
.stripes i:nth-child(2) { width: calc(var(--stripe-w) * .85); }
.stripes i:nth-child(3) { width: calc(var(--stripe-w) * 1);   }
.stripes i:nth-child(4) { width: calc(var(--stripe-w) * .48); }

/* Horizontal stripe rule used as a divider */
.stripe-rule {
  height: 4px; border: 0; margin: var(--sp-5) 0;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0 44px,
    transparent 44px 54px
  );
  border-radius: 2px;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}
.mono { font-family: var(--font-mono); }
.mute { color: var(--text-mute); }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--accent); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--step--1);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease),
              color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px rgba(244,114,37,.35); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 8px 24px rgba(244,114,37,.5); }

.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-brand:hover { background: var(--brand-hover); }

.btn-ghost { background: transparent; color: var(--brand); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   CARDS / SURFACES
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* stripe accent that slides in on hover */
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.card:hover::before { transform: scaleY(1); }

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgba(0,73,144,.08); color: var(--brand);
  border: 1px solid rgba(0,73,144,.2);
}
.tag-accent { background: rgba(244,114,37,.12); color: var(--accent-hover); border-color: rgba(244,114,37,.3); }

/* ============================================================
   FORMS
   ============================================================ */
.field {
  width: 100%;
  font-family: var(--font-body); font-size: var(--step-0);
  color: var(--text); background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0,73,144,.12);
}
label.lbl {
  display: block; font-family: var(--font-mono);
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 6px;
}

/* accessibility */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}