/* BikeShop Manager brand tokens: the app's own blue (favicon.svg: #0071e3). */
:root {
  --font-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --p: #0071e3;
  --p-deep: #004a99;
  --a: #22d3ee;
  --on-p: #ffffff;
  --p-text: #0062c4;
  --p-soft: rgba(0, 113, 227, 0.12);
  --p-line: rgba(0, 113, 227, 0.35);
  --p-shadow: rgba(0, 113, 227, 0.5);
  --grad: linear-gradient(135deg, #0071e3 0%, #004a99 100%);
  --grad-text: linear-gradient(100deg, #0071e3 10%, #22d3ee 90%);

  --bg: #f6f9fd;
  --bg-alt: #edf4fb;
  --surface: #ffffff;
  --text: #121a24;
  --heading: #0c1726;
  --muted: #53626f;
  --line: #e1e9f1;
  --line-strong: #c9d6e4;
  --radius: 20px;
  --btn-radius: 999px;

  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.7);

  --hdr-bg: rgba(255, 255, 255, 0.62);
  --hdr-bg-solid: rgba(255, 255, 255, 0.98);
  --hdr-line: rgba(255, 255, 255, 0.8);
  --hdr-text: #0c1726;
  --hdr-muted: #53626f;
  --hdr-hover: rgba(0, 113, 227, 0.08);

  --hero-bg: linear-gradient(135deg, #e9f3ff 0%, #e6fbff 38%, #eaf6ff 72%, #e3edff 100%);
  --hero-text: #0c1726;
  --hero-muted: #44525f;
  --blob-1: rgba(0, 113, 227, 0.45);
  --blob-2: rgba(34, 211, 238, 0.4);
  --blob-3: rgba(0, 74, 153, 0.35);
  --grid-line: rgba(0, 113, 227, 0.11);
  --fx-1: #0071e3;
  --fx-2: #60a5fa;
  --fx-3: #22d3ee;
  --chip-bg: rgba(255, 255, 255, 0.7);
  --chip-text: #0c1726;
  --chip-line: rgba(255, 255, 255, 0.9);

  --marquee-bg: #ffffff;

  --dark-bg: radial-gradient(120% 90% at 10% 0%, #0a3d7a 0%, #062f5e 45%, #04203f 100%);
  --dark-text: #dbeafe;
  --dark-muted: #a6c3e0;
  --dark-card: rgba(255, 255, 255, 0.06);
  --dark-line: rgba(255, 255, 255, 0.12);

  --foot-bg: #04203f;
  --foot-text: #cfe1f6;
  --foot-muted: #8cacc9;
  --foot-line: rgba(255, 255, 255, 0.1);
}

/* BikeShop touches */
.brand img { background: #fff; }
.pill-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pill {
  font-size: 0.74rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; border: 1px solid;
}
.pill-pending { color: #c25e12; background: rgba(255, 138, 61, 0.14); border-color: rgba(255, 138, 61, 0.4); }
.pill-approved { color: #2e7d32; background: rgba(46, 125, 50, 0.12); border-color: rgba(46, 125, 50, 0.4); }
.pill-rejected { color: #d64545; background: rgba(214, 69, 69, 0.12); border-color: rgba(214, 69, 69, 0.4); }
.sec-dark .eyebrow, .foot h4 { color: #8fc4ff; }
.step::before { color: var(--a); }