/* ────────────────────────────────────────────────────────────────────────
   Mimir Design System — Colors & Type
   Source: bodenpat/Mimir DESIGN.md + web/src/styles/globals.css

   Mimir is a "calm, dense, security-tool" UI. Dark by default, light
   theme overlays. Palette is GitHub-inspired (Mimir is Go + React in
   that lineage). Typography is system-font; the wordmark and code use
   monospace. No decorative gradients, no purples.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Base tokens (dark, default) ───────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg-page:          #0d1117;   /* page background */
  --bg-card:          #161b22;   /* cards, panels, nav */
  --bg-hover:         #21262d;   /* hover, badges */
  --bg-active:        #1c2128;   /* row hover, raw blocks */
  --input-bg:         #0d1117;

  /* Lines */
  --border:           #30363d;

  /* Foreground */
  --fg-1:             #f0f6fc;   /* primary — headings, stat numbers */
  --fg-2:             #c9d1d9;   /* secondary — body, table cells */
  --fg-3:             #8b949e;   /* tertiary — labels, captions */

  /* Accent */
  --accent:           #58a6ff;   /* links, focus, interactive */
  --accent-bg:        rgba(88, 166, 255, 0.15);

  /* Status (functional, never decorative) */
  --status-online:    #3fb950;
  --status-stale:     #d29922;
  --status-offline:   #f85149;
  --status-online-bg:  rgba(63, 185, 80, 0.12);
  --status-stale-bg:   rgba(210, 153, 34, 0.12);
  --status-offline-bg: rgba(248, 81, 73, 0.12);

  /* Action buttons */
  --btn-primary-bg:   #238636;
  --btn-danger-bg:    #da3633;

  /* Brand orange — for the marketing-site demo CTA only.
     Restrained: one button, one accent line. Never decorative. */
  --brand-orange:     #ff8a3d;
  --brand-orange-deep:#e0680f;
  --brand-orange-bg:  rgba(255, 138, 61, 0.12);

  /* Severity (Phase 4 IOC) */
  --sev-critical:     #f85149;
  --sev-high:         #f85149;
  --sev-medium:       #58a6ff;
  --sev-low:          #8b949e;
  --sev-info:         #8b949e;
  --sev-critical-bg:  rgba(248, 81, 73, 0.15);
  --sev-high-bg:      rgba(210, 153, 34, 0.15);
  --sev-medium-bg:    rgba(88, 166, 255, 0.15);
  --sev-low-bg:       rgba(139, 148, 158, 0.15);

  /* Compatibility aliases (legacy DESIGN.md token names) */
  --text-primary:     var(--fg-1);
  --text-secondary:   var(--fg-2);
  --text-tertiary:    var(--fg-3);

  /* ── Typography stacks ─────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* ── Type scale (matches DESIGN.md) ────────────────────────────────── */
  --fs-stat:        32px;   /* dashboard stat numbers */
  --fs-page-title:  20px;   /* page H1 */
  --fs-section:     16px;   /* card / section H2 */
  --fs-label:       14px;   /* nav, button, form label */
  --fs-body:        13px;   /* body, table cell */
  --fs-caption:     12px;   /* captions, badges */
  --fs-eyebrow:     11px;   /* uppercase tertiary labels */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;

  --lh-tight: 1.2;
  --lh-base:  1.5;

  /* ── Spacing (4px base) ────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --radius-sm: 4px;   /* badges, chips */
  --radius-md: 6px;   /* buttons, inputs */
  --radius-lg: 8px;   /* cards, modals */
  --radius-pill: 9999px;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-pop:    0 4px 12px rgba(0, 0, 0, 0.3);   /* dropdowns, toasts */
  --shadow-modal:  0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.4);

  /* ── Motion (functional, never decorative) ─────────────────────────── */
  --dur-fast:   120ms;   /* hover */
  --dur-base:   150ms;   /* dropdown, modal */
  --dur-slow:   200ms;   /* fade-in, toast */
  --dur-data:   300ms;   /* status, fill */
  --ease:       ease-out;
}

/* ── Light theme overlay (DESIGN.md spec) ──────────────────────────────── */
[data-theme="light"] {
  --bg-page:        #ffffff;
  --bg-card:        #f6f8fa;
  --bg-hover:       #eaeef2;
  --bg-active:      #f3f4f6;
  --border:         #d0d7de;
  --fg-1:           #1f2328;
  --fg-2:           #424a53;
  --fg-3:           #656d76;
  --input-bg:       #ffffff;
}

/* ── Semantic typography ───────────────────────────────────────────────── */
html { font-size: 13px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, .h1, .stat-number {
  font-family: var(--font-sans);
  font-size: var(--fs-stat);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

h2, .h2, .page-title {
  font-family: var(--font-sans);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: var(--lh-tight);
}

h3, .h3, .section-title {
  font-family: var(--font-sans);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.label, .nav-link {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-2);
}

.caption, .badge {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
}

.wordmark {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.5px;
}