/* =============================================================
   LLANTERA PADILLA — Colors & Type
   Visual DNA: flame orange, shop black, industrial grit, speed.
   ============================================================= */

/* -------- Webfonts (Google Fonts — best-available substitutes) -----
   SUBSTITUTION NOTE: No original font files were provided. The logo's
   wordmark reads as a heavy italic condensed sans. We use:
     · Bebas Neue        → bold condensed uppercase headlines
     · Barlow Condensed  → italic body headlines & UI titles
     · Inter             → clean body / UI copy
     · JetBrains Mono    → tickets, receipts, VINs, part numbers
   Please provide brand fonts if different.
------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;1,600;1,700;1,800;1,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --flame-500: #F25C1F;   /* primary — the flame */
  --flame-600: #D94A14;   /* hover / pressed */
  --flame-400: #FF7A3D;   /* highlight / glow */
  --flame-700: #B33A0E;   /* deep ember */
  --flame-300: #FFA066;   /* soft tint */
  --flame-100: #FFEAD9;   /* wash / surface tint */

  --ember-500: #E63414;   /* secondary accent — hotter red flame */
  --ember-600: #B82208;

  --shop-950: #0B0B0C;    /* logo background — true shop black */
  --shop-900: #141416;
  --shop-800: #1E1F22;
  --shop-700: #2A2B2F;
  --shop-600: #3A3B40;
  --shop-500: #55565C;
  --shop-400: #7A7B82;
  --shop-300: #A5A6AD;
  --shop-200: #CED0D6;
  --shop-100: #E7E8EB;
  --shop-50:  #F5F5F7;
  --white:    #FFFFFF;

  /* Semantic status — industrial palette */
  --success: #2E9E5B;
  --success-bg: #E5F5EC;
  --warning: #E8A317;
  --warning-bg: #FDF3D9;
  --danger:  #C8341A;
  --danger-bg: #FBE4DE;
  --info:    #2A6FC8;
  --info-bg: #E3EEFB;

  /* ---------- SEMANTIC SURFACES (light) ---------- */
  --bg:        var(--shop-50);
  --surface:   var(--white);
  --surface-2: var(--shop-50);
  --surface-3: var(--shop-100);
  --fg:        var(--shop-950);
  --fg-2:      var(--shop-700);
  --fg-3:      var(--shop-500);
  --fg-muted:  var(--shop-400);
  --fg-inverse:var(--white);
  --border:    var(--shop-200);
  --border-strong: var(--shop-300);
  --accent:    var(--flame-500);
  --accent-fg: var(--white);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bebas Neue', 'Barlow Condensed', 'Impact', sans-serif;
  --font-headline:'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display-xl: clamp(56px, 9vw, 128px);  /* hero marquee */
  --fs-display:    clamp(40px, 6vw, 80px);   /* page headers */
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;

  --lh-display: 0.9;
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-body:    1.55;

  --tracking-display: -0.01em;
  --tracking-label:    0.08em; /* uppercase eyebrows */
  --tracking-tight:   -0.015em;

  /* ---------- SPACING ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(11,11,12,0.08);
  --shadow-sm: 0 2px 6px rgba(11,11,12,0.10);
  --shadow-md: 0 8px 20px -6px rgba(11,11,12,0.18);
  --shadow-lg: 0 20px 40px -12px rgba(11,11,12,0.25);
  --shadow-flame: 0 8px 28px -8px rgba(242,92,31,0.55); /* orange glow for CTAs */
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,0.06);

  /* ---------- BORDERS ---------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-hairline: 0.5px;

  /* ---------- MOTION ---------- */
  --ease-snap: cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(.16,.84,.44,1);
  --ease-in:   cubic-bezier(.55,.05,.65,.2);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
}

/* Dark surface variant — for shop/employee dashboards at night */
.theme-dark {
  --bg:        var(--shop-950);
  --surface:   var(--shop-900);
  --surface-2: var(--shop-800);
  --surface-3: var(--shop-700);
  --fg:        var(--white);
  --fg-2:      var(--shop-200);
  --fg-3:      var(--shop-300);
  --fg-muted:  var(--shop-400);
  --fg-inverse:var(--shop-950);
  --border:    var(--shop-700);
  --border-strong: var(--shop-600);
}

/* ============================================================= */
/*                   SEMANTIC ELEMENT STYLES                     */
/* ============================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: 400; /* Bebas is already heavy */
}

.display-italic {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

h1, .h1 {
  font-family: var(--font-headline);
  font-weight: 800;
  font-style: italic;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

p { margin: 0 0 var(--s-4) 0; color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  color: var(--flame-600);
}

.label {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  color: var(--fg-3);
}

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

small, .small { font-size: var(--fs-sm); color: var(--fg-3); }

/* ============================================================= */
/*                      CORE UTILITIES                            */
/* ============================================================= */

.flame-gradient {
  background: linear-gradient(135deg, #FFB05C 0%, var(--flame-500) 45%, var(--ember-500) 100%);
}
.flame-gradient-radial {
  background: radial-gradient(circle at 20% 80%, var(--flame-400) 0%, var(--flame-600) 55%, var(--shop-950) 100%);
}
.stripe-hazard {
  background: repeating-linear-gradient(135deg,
    var(--shop-950) 0 14px,
    var(--flame-500) 14px 28px);
}