/* JiggleGuard — Colors & Type tokens
 * Source of truth: console-ui/src/index.css in the JiggleGuard repo.
 * A neutral, enterprise-SaaS palette with a single blue accent and a
 * five-step severity scale keyed off the detection confidence levels.
 */

:root {
  /* ── Backgrounds ─────────────────────────────────────────────── */
  --bg-primary:   #f8f9fb;  /* page background */
  --bg-secondary: #ffffff;  /* cards, sidebar, top bar */
  --bg-tertiary:  #f3f5f8;  /* table alt rows, input fill, hover */
  --bg-hover:     #f3f5f8;

  /* ── Borders ─────────────────────────────────────────────────── */
  --border:        #e5e7eb;
  --border-subtle: #f0f1f3;

  /* ── Text (WCAG AA on --bg-primary) ──────────────────────────── */
  --fg-primary:   #111827;  /* headings, emphasis */
  --fg-secondary: #4b5563;  /* body, labels */
  --fg-muted:     #9ca3af;  /* captions, placeholders, inactive */

  /* ── Accent ──────────────────────────────────────────────────── */
  --accent:     #008ee6;    /* links, primary button, active nav */
  --accent-dim: #0077c2;    /* hover / pressed */
  --accent-wash: rgba(0,142,230,0.08);

  /* ── Status / Severity scale (maps to ConfidenceLevel) ───────── */
  --status-clear:    #10b981; /* CLEAR  — below 0.30     */
  --status-low:      #10b981; /* LOW    — 0.30–0.59      */
  --status-medium:   #eab308; /* MEDIUM — 0.60–0.79      */
  --status-high:     #f59e0b; /* HIGH   — 0.80–0.94      */
  --status-critical: #ef4444; /* CRIT   — >= 0.95        */

  --status-clear-wash:    rgba(16,185,129,0.08);
  --status-medium-wash:   rgba(234,179,8,0.08);
  --status-high-wash:     rgba(245,158,11,0.08);
  --status-critical-wash: rgba(239,68,68,0.08);

  /* ── Type families ───────────────────────────────────────────── */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  /* ── Radii ───────────────────────────────────────────────────── */
  --radius-xs: 4px;   /* badges, small chips */
  --radius-sm: 6px;   /* inputs, secondary buttons */
  --radius-md: 8px;   /* cards, primary buttons */
  --radius-lg: 10px;  /* form cards */
  --radius-xl: 12px;  /* login logo tile */
  --radius-pill: 9999px;

  /* ── Shadows (used sparingly — the UI is flat + bordered) ────── */
  --shadow-none: none;
  --shadow-focus-ring: 0 0 0 2px var(--accent);
  --shadow-accent-glow: 0 0 6px var(--accent);
  --shadow-status-glow: 0 0 5px var(--status-clear);

  /* ── Spacing scale (4px base) ────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;   /* grid gap between status cards */
  --space-5: 18px;   /* card horizontal padding, two-col gap */
  --space-6: 22px;   /* vertical rhythm between dashboard blocks */
  --space-7: 24px;   /* main content padding, card form padding */
  --space-8: 28px;   /* main content horizontal padding */
  --space-9: 32px;   /* login vertical gutter */
}

/* ── Semantic type styles ────────────────────────────────────────
 * Sizes are small by enterprise-SaaS convention. Body = 13px.
 * Numeric values always render in --font-mono for scan-ability.
 * ─────────────────────────────────────────────────────────────── */

.t-h1 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.t-h2 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
}
.t-body {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-secondary);
  line-height: 1.5;
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-secondary);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--fg-muted);
}
.t-micro {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--fg-muted);
}

/* Section eyebrow — 10px SemiBold, wide-tracked caps, accent blue */
.t-eyebrow, .section-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* Table header — 11px SemiBold caps, muted grey */
.t-th {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-muted);
}

/* Form label — 11px Medium caps, secondary grey */
.t-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-secondary);
}

/* Stat value — 28px Bold mono; colour inherits severity */
.t-stat {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

/* Mono inline — agent IDs, timestamps, confidence percentages */
.t-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-secondary);
}