/* ============================================================
   AIPC Design System — Colors & Type
   Brand: AIPC (AI Passenger Counting)
   ============================================================ */

/* --- Webfont: Inter (primary sans) --------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* === Brand Colors ======================================= */
  --brand-blue: #0066FF;          /* primary AIPC blue — electric, modern */
  --brand-blue-700: #0052CC;      /* deep press / heading accent */
  --brand-blue-600: #0058DB;      /* hover / pressed */
  --brand-blue-500: #147BFF;      /* logo-match secondary */
  --brand-blue-400: #3B82F6;      /* gradient stop / highlight */
  --brand-blue-300: #8FBEFF;      /* soft accent */
  --brand-blue-100: #E6F0FF;      /* tint / pill bg */
  --brand-blue-050: #F2F7FF;      /* faintest tint */
  --brand-cyan:    #38D2FF;       /* data-viz accent (route lines) */
  --brand-violet:  #6E7BFF;       /* data-viz accent (occupancy) */

  /* === Neutrals — Light Surface =========================== */
  --bg-canvas:     #FFFFFF;
  --bg-subtle:     #F7F9FC;       /* page section break */
  --bg-muted:      #EEF2F7;       /* card alt / hover */
  --border-soft:   rgba(15, 28, 51, 0.06);
  --border:        rgba(15, 28, 51, 0.10);
  --border-strong: rgba(15, 28, 51, 0.18);

  --fg:            #0B1220;       /* primary text on light */
  --fg-1:          #0B1220;
  --fg-2:          #455066;       /* secondary text */
  --fg-3:          #6B7891;       /* tertiary / meta */
  --fg-4:          #98A2B3;       /* placeholder */

  /* === Neutrals — Dark Surface (Hero / Navy sections) ===== */
  --navy-950:      #050A14;       /* deepest — hero overlay base */
  --navy-900:      #0A1428;       /* primary dark bg */
  --navy-800:      #0F1D38;       /* card on dark */
  --navy-700:      #16264A;       /* elevated dark / border */
  --navy-600:      #1F3260;
  --graphite:      #1A2236;       /* alt dark for sections */

  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  rgba(255,255,255,0.72);
  --fg-on-dark-3:  rgba(255,255,255,0.52);
  --border-on-dark:rgba(255,255,255,0.08);
  --border-on-dark-strong: rgba(255,255,255,0.14);

  /* === Semantic ============================================ */
  --success:   #16A34A;
  --success-bg:#E7F7EE;
  --warning:   #F59E0B;
  --warning-bg:#FEF4E2;
  --danger:    #E11D48;
  --danger-bg: #FDECEF;
  --info:      var(--brand-blue);
  --info-bg:   var(--brand-blue-100);

  /* === Gradients & Glow =================================== */
  --grad-brand: linear-gradient(135deg, #0066FF 0%, #147BFF 55%, #3B82F6 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(0,102,255,0.12) 0%, rgba(59,130,246,0.12) 100%);
  --grad-hero-overlay: linear-gradient(180deg, rgba(5,10,20,0.55) 0%, rgba(5,10,20,0.75) 60%, rgba(5,10,20,0.92) 100%);
  --grad-navy: linear-gradient(180deg, #0A1428 0%, #050A14 100%);
  --grad-cell: radial-gradient(120% 80% at 50% 0%, rgba(0,102,255,0.22) 0%, transparent 60%);
  --glow-blue: 0 0 0 1px rgba(0,102,255,0.35), 0 12px 40px -8px rgba(0,102,255,0.50);
  --glow-blue-soft: 0 8px 30px -10px rgba(0,102,255,0.38);

  /* === Radius ============================================= */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* === Spacing scale (4px base) =========================== */
  --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;
  --s-24: 96px;
  --s-32: 128px;

  /* === Shadow / Elevation ================================= */
  --shadow-xs: 0 1px 2px rgba(15, 28, 51, 0.05);
  --shadow-sm: 0 2px 6px -1px rgba(15, 28, 51, 0.06), 0 1px 2px rgba(15,28,51,0.04);
  --shadow-md: 0 8px 24px -8px rgba(15, 28, 51, 0.10), 0 2px 6px rgba(15,28,51,0.04);
  --shadow-lg: 0 24px 48px -16px rgba(15, 28, 51, 0.14), 0 4px 10px rgba(15,28,51,0.05);
  --shadow-xl: 0 40px 80px -24px rgba(15, 28, 51, 0.20);
  --shadow-glass: 0 8px 32px rgba(5, 10, 20, 0.18), inset 0 1px 0 rgba(255,255,255,0.08);

  /* === Blur (glass) ======================================= */
  --blur-md: saturate(140%) blur(14px);
  --blur-lg: saturate(160%) blur(24px);

  /* === Motion ============================================= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 480ms;

  /* === Type — families ==================================== */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; /* tighter tracking applied */

  /* === Type — sizes (clamp-friendly) ====================== */
  --fs-display-xl: clamp(48px, 6.4vw, 84px);
  --fs-display:    clamp(40px, 5.0vw, 64px);
  --fs-h1:         clamp(32px, 3.6vw, 48px);
  --fs-h2:         clamp(26px, 2.6vw, 36px);
  --fs-h3:         clamp(20px, 1.8vw, 24px);
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  /* === Type — weights ===================================== */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* === Type — line-height ================================= */
  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-base:  1.5;
  --lh-relaxed: 1.65;

  /* === Tracking =========================================== */
  --tr-tight: -0.02em;
  --tr-tighter: -0.035em;
  --tr-normal: 0;
  --tr-wide: 0.02em;
  --tr-eyebrow: 0.16em;
}

/* === Semantic Type Roles ================================== */
.h-display-xl, h1.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tighter);
  color: var(--fg-1);
}
.h-display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tighter);
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--brand-blue);
}
p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.body-sm { font-size: var(--fs-body-sm); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }
.micro   { font-size: var(--fs-micro);   color: var(--fg-3); letter-spacing: var(--tr-wide); }
code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
}