/* ARBOR design tokens and base components, framework-free.
   Drop this file into any site (Norkenix included): no Tailwind, no build step. Everything the ARBOR site and
   application use is expressed here as CSS variables plus a small set of classes. Dark mode: add class "dark" on <html>. */

:root {
  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Brand green (emerald) */
  --brand-50: #ecfdf5;  --brand-100: #d1fae5; --brand-200: #a7f3d0; --brand-300: #6ee7b7; --brand-400: #34d399;
  --brand-500: #10b981; --brand-600: #059669; --brand-700: #047857; --brand-800: #065f46; --brand-900: #064e3b;

  /* Ink: the dark surfaces (hero, header, code blocks, primary buttons, logo square) */
  --ink-900: #0f172a; --ink-800: #1e293b; --ink-700: #334155;

  /* Greys (Tailwind slate) */
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8;
  --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a;

  /* Severity scale (badges, stats, charts) */
  --sev-critical: #dc2626; --sev-critical-bg: #fee2e2; --sev-critical-text: #991b1b; --sev-critical-ring: #fecaca;
  --sev-high: #ea580c;     --sev-high-bg: #ffedd5;     --sev-high-text: #9a3412;     --sev-high-ring: #fed7aa;
  --sev-medium: #d97706;   --sev-medium-bg: #fef3c7;   --sev-medium-text: #92400e;   --sev-medium-ring: #fde68a;
  --sev-low: #0284c7;      --sev-low-bg: #e0f2fe;      --sev-low-text: #075985;      --sev-low-ring: #bae6fd;
  --sev-unknown: #64748b;  --sev-unknown-bg: #f1f5f9;  --sev-unknown-text: #334155;  --sev-unknown-ring: #e2e8f0;
  --sev-none-bg: #ecfdf5;  --sev-none-text: #047857;   --sev-none-ring: #a7f3d0;

  /* Semantic */
  --bg: #ffffff;              /* public pages */
  --bg-app: var(--slate-50);  /* application shell */
  --surface: #ffffff;         /* cards, inputs */
  --text: var(--slate-800);
  --text-muted: var(--slate-500);
  --text-strong: var(--ink-900);
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --focus: var(--brand-500);

  /* Shape and rhythm */
  --radius-md: 6px;   /* badges */
  --radius-lg: 8px;   /* buttons, inputs, nav items */
  --radius-xl: 12px;  /* cards */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --container: 72rem;      /* max-w-6xl */
  --gutter: 1.5rem;        /* px-6 */
  --section-y: 5rem;       /* py-20 */
}

html.dark {
  color-scheme: dark;
  --bg: #0b1220; --bg-app: #0b1220; --surface: #151d2c;
  --slate-50: #0b1220; --slate-100: #1a2333; --slate-200: #273247; --slate-300: #36445e; --slate-400: #8794ab;
  --slate-500: #a3aec4; --slate-600: #bcc6d8; --slate-700: #d3dae6; --slate-800: #e6eaf2; --slate-900: #f3f5f9;
  --brand-50: #0c2a21; --brand-100: #10392d; --brand-200: #175a46; --brand-700: #34d399; --brand-800: #6ee7b7; --brand-900: #a7f3d0;
  --text: var(--slate-800); --text-muted: var(--slate-500); --text-strong: #f3f5f9;
  --border: var(--slate-200); --border-strong: var(--slate-300);
  --sev-critical-bg: #4c1a1f; --sev-critical-text: #fca5a5; --sev-critical-ring: #6b232a;
  --sev-high-bg: #4a2a10; --sev-high-text: #fdba74; --sev-high-ring: #6b3d14;
  --sev-medium-bg: #4a3610; --sev-medium-text: #fcd34d; --sev-medium-ring: #6b4d14;
  --sev-low-bg: #0c2f45; --sev-low-text: #7dd3fc; --sev-low-ring: #0e4a6b;
  --sev-unknown-bg: #1a2333; --sev-unknown-text: #d3dae6; --sev-unknown-ring: #273247;
  --sev-none-bg: #10392d; --sev-none-text: #6ee7b7; --sev-none-ring: #175a46;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 0.875rem; line-height: 1.5; }
h1, h2, h3 { color: var(--text-strong); letter-spacing: -0.025em; margin: 0; }
h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.15; }
h2 { font-size: 1.875rem; font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
code, pre, .mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.muted { color: var(--text-muted); }
.label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid rgb(52 211 153 / 0.4); background: rgb(52 211 153 / 0.1); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--brand-300); }

/* ---- Dark surfaces: hero, header, code, primary CTA band --------------------- */
/* Ink surfaces are dark in both modes: their greys stay the light ones even when html.dark inverts the palette. */
.ink, .site-header, .ink-panel, pre.code { --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #94a3b8; }
.ink { background: var(--ink-900); color: #ffffff; }
.ink .muted { color: var(--slate-300); }
.ink h1, .ink h2 { color: #ffffff; }
.ink .accent { color: var(--brand-400); }
.ink-panel { background: var(--ink-800); border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--radius-xl); color: var(--slate-200); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
pre.code { overflow-x: auto; border-radius: var(--radius-lg); background: var(--ink-900); color: var(--slate-100); padding: 0.75rem; font-size: 0.75rem; margin: 0; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-lg); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; font-family: inherit; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--ink-900); color: #fff; }           .btn-primary:hover { background: var(--ink-800); }
.btn-brand { background: var(--brand-500); color: #fff; }           .btn-brand:hover { background: var(--brand-600); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--slate-50); }
.btn-danger { background: #dc2626; color: #fff; }                   .btn-danger:hover { background: #b91c1c; }
.btn-ghost { background: transparent; color: var(--slate-600); }    .btn-ghost:hover { background: var(--slate-100); }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.ink .btn-outline { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); } .ink .btn-outline:hover { background: rgb(255 255 255 / 0.1); }
html.dark .btn-primary { background: #2b3a52; } html.dark .btn-primary:hover { background: #3b4b66; }

/* ---- Cards, inputs, tables, badges ---------------------------------------- */
.card { border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.card-pad { padding: 1.5rem; }
.card-highlight { box-shadow: 0 0 0 2px var(--brand-500); }
.input { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 0.5rem 0.75rem; font-size: 0.875rem; box-shadow: var(--shadow-sm); outline: none; font-family: inherit; }
.input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-200); }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: var(--slate-50); }
.table td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--slate-100); vertical-align: middle; }
.table tbody tr:hover { background: var(--slate-50); }
.badge { display: inline-flex; align-items: center; border-radius: var(--radius-md); padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--ring, transparent); }
.badge-critical { background: var(--sev-critical-bg); color: var(--sev-critical-text); --ring: var(--sev-critical-ring); }
.badge-high     { background: var(--sev-high-bg);     color: var(--sev-high-text);     --ring: var(--sev-high-ring); }
.badge-medium   { background: var(--sev-medium-bg);   color: var(--sev-medium-text);   --ring: var(--sev-medium-ring); }
.badge-low      { background: var(--sev-low-bg);      color: var(--sev-low-text);      --ring: var(--sev-low-ring); }
.badge-neutral  { background: var(--sev-unknown-bg);  color: var(--sev-unknown-text);  --ring: var(--sev-unknown-ring); }
.badge-ok       { background: var(--sev-none-bg);     color: var(--sev-none-text);     --ring: var(--sev-none-ring); }
.stat { padding: 0.75rem 1rem; }
.stat .label { margin: 0; }
.stat .value { margin-top: 0.25rem; font-size: 1.5rem; font-weight: 700; color: var(--text-strong); }
.stat .value.critical { color: var(--sev-critical); } .stat .value.high { color: var(--sev-high); } .stat .value.medium { color: var(--sev-medium); } .stat .value.low { color: var(--sev-low); } .stat .value.good { color: var(--brand-600); }

/* ---- Logo, header, nav, footer ------------------------------------------------ */
.logo { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; letter-spacing: -0.025em; font-size: 1.125rem; color: var(--text-strong); text-decoration: none; }
.logo-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-lg); background: var(--ink-900); color: var(--brand-400); }
.ink .logo, .site-header .logo { color: #fff; }
.ink .logo-mark, .site-header .logo-mark { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); }
.site-header { background: var(--ink-900); color: var(--slate-300); }
.site-header nav a { color: var(--slate-300); text-decoration: none; font-size: 0.875rem; } .site-header nav a:hover { color: #fff; }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.875rem; }
.site-footer a { text-decoration: none; }
.nav-item { display: flex; align-items: center; gap: 0.75rem; border-radius: var(--radius-lg); padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--slate-600); text-decoration: none; }
.nav-item:hover { background: var(--slate-100); }
.nav-item.active { background: var(--ink-900); color: #fff; }
.sidebar { width: 15rem; border-right: 1px solid var(--border); background: var(--surface); }