/* BorderLens — Design Tokens
   Extracted from dashboard/src. Single source of truth for color, type, space.
   ============================================================================ */

:root {
  /* ── Surfaces ───────────────────────────────────────────────────────── */
  --bl-canvas:       #0f172a;  /* page background, deep slate-900 */
  --bl-surface:      #1e293b;  /* cards, banners, sidebar sections */
  --bl-surface-2:    #334155;  /* table-row separators, hover edges */
  --bl-surface-3:    #475569;  /* reference lines, muted chart axes */

  /* ── Text ratchet (high → low contrast) ────────────────────────────── */
  --bl-text-0:       #ffffff;  /* hero figures, key identifiers */
  --bl-text-1:       #e2e8f0;  /* primary content (slate-200) */
  --bl-text-2:       #cbd5e1;  /* secondary content (slate-300) */
  --bl-text-3:       #94a3b8;  /* captions, axis labels (slate-400) */
  --bl-text-4:       #64748b;  /* tertiary / metadata (slate-500) */
  --bl-text-5:       #475569;  /* disabled / deepest hint (slate-600) */

  /* ── Brand ─────────────────────────────────────────────────────────── */
  --bl-brand:        #14b8a6;  /* teal-500 — the BorderLens signal colour */
  --bl-brand-hi:     #2dd4bf;  /* teal-400 — hover / link up-shift */
  --bl-brand-bg:     rgba(20, 184, 166, 0.12);   /* tinted chip background */
  --bl-brand-border: rgba(20, 184, 166, 0.30);

  /* ── Semantic signal colours ───────────────────────────────────────── */
  /* Each signal has: solid / soft-text / soft-bg / soft-border.
     Soft variants layer over --bl-surface for inline chips. */

  --bl-caution:         #fbbf24;  /* amber-400 — Estimate Limited, probable */
  --bl-caution-bg:      rgba(245, 158, 11, 0.15);
  --bl-caution-border:  rgba(245, 158, 11, 0.20);

  --bl-elevated:        #fb923c;  /* orange-400 — 20–30% band */
  --bl-elevated-bg:     rgba(251, 146, 60, 0.15);

  --bl-risk:            #f87171;  /* red-400 — over-threshold, confirmed */
  --bl-risk-bg:         rgba(239, 68, 68, 0.15);

  --bl-advisory:        #c4b5fd;  /* violet-300 — informational */
  --bl-advisory-bg:     rgba(139, 92, 246, 0.15);
  --bl-advisory-border: rgba(139, 92, 246, 0.20);

  --bl-positive:        #14b8a6;  /* brand teal — acceptable band */

  /* ── Type ──────────────────────────────────────────────────────────── */
  --bl-font:         'Inter', system-ui, -apple-system, sans-serif;
  --bl-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Semantic sizes. Names describe USE, not pixels. */
  --bl-size-display:   96px;   /* hero £value */
  --bl-size-figure:    36px;   /* secondary panel figures */
  --bl-size-heading:   18px;   /* section h2 */
  --bl-size-body:      14px;   /* default UI text */
  --bl-size-meta:      13px;   /* table cells */
  --bl-size-caption:   12px;   /* axis, tooltip, helper */
  --bl-size-micro:     11px;   /* bucket labels, chart ticks */
  --bl-size-eyebrow:   11px;   /* UPPERCASE tracked labels */

  /* Weights used in the product. */
  --bl-weight-regular: 400;
  --bl-weight-medium:  500;
  --bl-weight-semi:    600;
  --bl-weight-bold:    700;

  /* Tracking — only two values in play. */
  --bl-track-tight:   -0.02em;  /* display figures */
  --bl-track-wide:     0.1em;   /* eyebrow / SECTION LABELS */

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --bl-radius-chip:    4px;
  --bl-radius-control: 6px;    /* inputs, small buttons */
  --bl-radius-button:  8px;    /* primary CTAs */
  --bl-radius-card:    12px;   /* rounded-xl — the dominant surface radius */
  --bl-radius-pill:    9999px;

  /* ── Space scale (4px base) ────────────────────────────────────────── */
  --bl-space-1:   4px;
  --bl-space-2:   8px;
  --bl-space-3:  12px;
  --bl-space-4:  16px;
  --bl-space-5:  20px;
  --bl-space-6:  24px;
  --bl-space-8:  32px;
  --bl-space-10: 40px;
  --bl-space-12: 48px;
  --bl-space-16: 64px;

  /* ── Structural sizes ──────────────────────────────────────────────── */
  --bl-sidebar-w:   240px;       /* w-60 */
  --bl-content-max: 1280px;      /* max-w-7xl */
  --bl-banner-max:  1024px;      /* max-w-5xl */

  /* ── Elevation ─────────────────────────────────────────────────────── */
  /* Shadows are used sparingly — this is a dark canvas, borders do most
     of the work. Reserve shadow for floating elements (dev toolbar). */
  --bl-shadow-float: 0 10px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.4);
  --bl-shadow-chart: 0 1px 0 0 rgba(255,255,255,0.04);
}

/* ── Utility classes used by design-system cards ──────────────────────── */
html, body {
  margin: 0;
  background: var(--bl-canvas);
  color: var(--bl-text-1);
  font-family: var(--bl-font);
  font-feature-settings: "cv11", "ss01";  /* Inter features — subtle */
  -webkit-font-smoothing: antialiased;
}

.bl-eyebrow {
  font-size: var(--bl-size-eyebrow);
  font-weight: var(--bl-weight-semi);
  color: var(--bl-text-4);
  text-transform: uppercase;
  letter-spacing: var(--bl-track-wide);
}

.bl-card {
  background: var(--bl-surface);
  border-radius: var(--bl-radius-card);
  border: 1px solid transparent;
}

.bl-card--outlined {
  border-color: var(--bl-surface-2);
}

.bl-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bl-brand);
}