/* ========================================================================
   BULLDATA DESIGN SYSTEM v1.0
   Distilled from "Vibrant Color" direction — adopted as the brand baseline.
   Used across: marketing site, authenticated app, internal dashboards.
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- TYPE ---------- */
  --font-display: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- BRAND COLOR ----------
     Sourced from bulldata-color.png:
       - Phoenix blue (primary brand)
       - Amber/orange (warm accent)
     Accents complete the system. */

  --bd-blue:        oklch(0.55 0.20 250);
  --bd-blue-deep:   oklch(0.32 0.16 255);
  --bd-blue-soft:   oklch(0.78 0.10 240);
  --bd-blue-tint:   oklch(0.96 0.025 250);

  --bd-amber:       oklch(0.74 0.16 60);
  --bd-amber-deep:  oklch(0.58 0.18 50);
  --bd-amber-tint:  oklch(0.96 0.030 80);

  --bd-violet:      oklch(0.62 0.20 320);
  --bd-violet-tint: oklch(0.96 0.025 320);

  --bd-green:       oklch(0.62 0.16 155);
  --bd-red:         oklch(0.62 0.20 25);

  /* ---------- SURFACE — light (default for marketing + app) ---------- */
  --bd-cream:       oklch(0.97 0.02 90);    /* warm cream — primary canvas */
  --bd-paper:       oklch(0.99 0.005 90);   /* card surface, lighter than cream */
  --bd-mist:        oklch(0.94 0.012 90);   /* secondary surface */
  --bd-line:        oklch(0.86 0.010 90);   /* hairline */
  --bd-line-soft:   oklch(0.91 0.008 90);

  /* ---------- INK ---------- */
  --bd-ink:         oklch(0.18 0.03 260);   /* primary text */
  --bd-ink-2:       oklch(0.38 0.02 260);   /* secondary text */
  --bd-ink-3:       oklch(0.55 0.015 260);  /* tertiary / mono labels */
  --bd-ink-4:       oklch(0.72 0.010 260);  /* dim / disabled */

  /* ---------- DARK SURFACE (for hero CTAs, footer banners, dashboard chrome) ---------- */
  --bd-night:       oklch(0.16 0.025 260);
  --bd-night-2:     oklch(0.22 0.030 260);
  --bd-night-3:     oklch(0.28 0.025 260);
  --bd-night-line:  oklch(0.34 0.020 260);

  /* ---------- RADIUS / ELEVATION / MOTION ---------- */
  --bd-r-xs: 6px;
  --bd-r-sm: 12px;
  --bd-r-md: 18px;
  --bd-r-lg: 24px;
  --bd-r-xl: 32px;
  --bd-r-pill: 999px;

  --bd-shadow-1: 0 1px 2px oklch(0.18 0.03 260 / 0.04), 0 2px 8px oklch(0.18 0.03 260 / 0.04);
  --bd-shadow-2: 0 4px 12px oklch(0.18 0.03 260 / 0.06), 0 12px 32px oklch(0.18 0.03 260 / 0.08);
  --bd-shadow-glow-blue:  0 16px 48px color-mix(in oklab, var(--bd-blue) 50%, transparent);
  --bd-shadow-glow-amber: 0 16px 48px color-mix(in oklab, var(--bd-amber) 45%, transparent);

  --bd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================================================
   PRIMITIVES — applied via .bd wrapper to scope styles to artboards
   ======================================================================== */
.bd, .bd * { box-sizing: border-box; }
.bd {
  font-family: var(--font-body);
  color: var(--bd-ink);
  background: var(--bd-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
.bd .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }
.bd .disp { font-family: var(--font-display); letter-spacing: -0.025em; }
.bd .upcase { text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 500; }
.bd a { color: inherit; text-decoration: none; cursor: pointer; }
.bd hr.hair { border: 0; border-top: 1px solid var(--bd-line); }

.bd-dark {
  background: var(--bd-night);
  color: oklch(0.96 0.005 250);
}

/* ========================================================================
   COMPONENTS — buttons, pills, cards
   ======================================================================== */

/* BUTTONS — pill-shape, three intents */
.bd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--bd-r-pill);
  border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s var(--bd-ease), box-shadow .2s var(--bd-ease), background .15s var(--bd-ease);
}
.bd-btn:hover { transform: translateY(-1px); }
.bd-btn--primary {
  background: var(--bd-blue);
  color: white;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--bd-blue) 30%, transparent);
}
.bd-btn--primary:hover { box-shadow: var(--bd-shadow-glow-blue); }
.bd-btn--accent {
  background: var(--bd-amber);
  color: var(--bd-ink);
  box-shadow: 0 6px 18px color-mix(in oklab, var(--bd-amber) 30%, transparent);
}
.bd-btn--accent:hover { box-shadow: var(--bd-shadow-glow-amber); }
.bd-btn--ink {
  background: var(--bd-ink);
  color: var(--bd-cream);
}
.bd-btn--ghost {
  background: transparent;
  color: var(--bd-ink);
  border: 1px solid var(--bd-ink);
}
.bd-btn--ghost-light {
  background: transparent;
  color: white;
  border: 1px solid color-mix(in oklab, white 30%, transparent);
}
.bd-btn--lg { padding: 22px 30px; font-size: 13px; }
.bd-btn--sm { padding: 9px 14px; font-size: 11px; letter-spacing: 0.12em; }

/* PILL / TAG */
.bd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--bd-r-pill);
  border: 1px solid var(--bd-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bd-ink-2);
  background: var(--bd-paper);
}
.bd-pill::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bd-ink-3);
}
.bd-pill--blue   { color: var(--bd-blue);   border-color: color-mix(in oklab, var(--bd-blue) 35%, var(--bd-line)); }
.bd-pill--blue::before  { background: var(--bd-blue); }
.bd-pill--amber  { color: var(--bd-amber-deep); border-color: color-mix(in oklab, var(--bd-amber) 50%, var(--bd-line)); }
.bd-pill--amber::before { background: var(--bd-amber); }
.bd-pill--violet { color: var(--bd-violet); border-color: color-mix(in oklab, var(--bd-violet) 35%, var(--bd-line)); }
.bd-pill--violet::before { background: var(--bd-violet); }
.bd-pill--green  { color: var(--bd-green);  border-color: color-mix(in oklab, var(--bd-green) 35%, var(--bd-line)); }
.bd-pill--green::before { background: var(--bd-green); }

/* CARD */
.bd-card {
  background: var(--bd-paper);
  border-radius: var(--bd-r-lg);
  border: 1px solid var(--bd-line);
}
.bd-card--inset { padding: 28px; }
.bd-card--ink {
  background: var(--bd-ink);
  color: var(--bd-cream);
  border-color: transparent;
}

/* INPUT */
.bd-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--bd-r-sm);
  border: 1px solid var(--bd-line);
  background: var(--bd-paper);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--bd-ink);
  transition: border-color .15s var(--bd-ease), box-shadow .15s var(--bd-ease);
  outline: 0;
}
.bd-input:focus {
  border-color: var(--bd-blue);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--bd-blue) 12%, transparent);
}
.bd-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bd-ink-2);
  margin-bottom: 8px;
}

/* SECTION HEADER UTILITY */
.bd-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bd-eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: currentColor;
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */
@keyframes bd-tick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.bd-marquee {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: bd-tick 60s linear infinite;
}

@keyframes bd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--bd-green) 60%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--bd-green) 0%, transparent); }
}
.bd-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--bd-green);
}
.bd-live::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bd-green);
  animation: bd-pulse 2s var(--bd-ease) infinite;
}

/* ========================================================================
   PRINT (when used in PDF deck export)
   ======================================================================== */
@media print {
  .bd { background: white !important; }
}