/* =============================================================
   SAG — AI Safeguard Finance
   Design tokens: color, type, spacing, radii, borders.
   Dark-first. Light theme reserved for reports & exports.
   ============================================================= */

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

:root {
  /* ---------- Brand ---------- */
  --sag-brand-red: #D7482E;          /* 10xT persimmon — logo, violations, branded moments */
  --sag-brand-red-hover: #BF3E27;
  --sag-brand-red-tint: rgba(215, 72, 46, 0.12);

  /* ---------- Dark surfaces (primary mode) ---------- */
  --bg-page: #151928;                /* deep institutional indigo-black */
  --bg-surface: #1B2337;             /* elevated cards & panels */
  --bg-surface-hover: #222B43;
  --bg-inset: #0C0E19;               /* sidebars, recessed shadow, deep wells */
  --bg-overlay: rgba(12, 14, 25, 0.72);

  /* ---------- Borders & dividers ---------- */
  --border-hairline: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-focus: #659BE8;

  /* ---------- Text on dark ---------- */
  --fg-primary: #E9ECF2;
  --fg-secondary: #8A92A8;
  --fg-tertiary: #5C6378;
  --fg-disabled: #3F4658;

  /* ---------- Functional / status ---------- */
  --action: #659BE8;                 /* primary action / link / interactive */
  --action-hover: #7FB1F0;
  --action-tint: rgba(101, 155, 232, 0.14);

  --critical: #D7482E;               /* violation / blocked — same as brand red */
  --critical-hover: #BF3E27;
  --critical-tint: rgba(215, 72, 46, 0.14);

  --warning: #E3A546;                /* needs review / hallucination spike */
  --warning-hover: #F0B85A;
  --warning-tint: rgba(227, 165, 70, 0.14);

  --success: #6ED392;                /* compliant / clean */
  --success-hover: #84DCA3;
  --success-tint: rgba(110, 211, 146, 0.14);

  --info: #7FB1F0;                   /* neutral metric / informational */
  --info-tint: rgba(127, 177, 240, 0.12);

  /* ---------- Type families ---------- */
  --font-sans: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (compact, dense — 4px grid) ---------- */
  --text-2xs:    10px;   /* tiny meta labels, audit tag chips */
  --text-xs:     11px;   /* table column headers, chip labels */
  --text-sm:     12px;   /* secondary text, log timestamps */
  --text-base:   13px;   /* body default — dashboards run dense */
  --text-md:     14px;   /* primary UI body */
  --text-lg:     16px;   /* card titles */
  --text-xl:     20px;   /* section headers */
  --text-2xl:    24px;   /* page titles */
  --text-3xl:    32px;   /* big metric values */
  --text-4xl:    44px;   /* hero metric (rare) */

  --leading-tight: 1.15;
  --leading-snug:  1.30;
  --leading-base:  1.45;
  --leading-loose: 1.60;

  --tracking-tight: -0.01em;
  --tracking-base:   0;
  --tracking-wide:   0.06em;        /* uppercase eyebrow labels */
  --tracking-mono:   0;             /* never widen mono */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Spacing (4px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radii (sharp) ---------- */
  --radius-none: 0px;
  --radius-sm:   2px;     /* chips, inputs, tags */
  --radius-md:   3px;     /* buttons, badges */
  --radius-lg:   4px;     /* cards — MAX radius */
  --radius-pill: 999px;   /* status dots only */

  /* ---------- Elevation (institutional flat — 1px depth max) ---------- */
  --shadow-none: none;
  --shadow-hairline: inset 0 0 0 1px var(--border-hairline);
  --shadow-card: 0 1px 0 0 rgba(0,0,0,0.35), inset 0 0 0 1px var(--border-hairline);
  --shadow-popover: 0 1px 0 0 rgba(0,0,0,0.6), 0 8px 24px -12px rgba(0,0,0,0.6), inset 0 0 0 1px var(--border-subtle);
  --shadow-inset: inset 0 1px 0 0 rgba(0,0,0,0.4);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 80ms;
  --duration-base: 140ms;
  --duration-slow: 220ms;
}

/* ---------- Light theme — reports, regulator exports, print ---------- */
[data-theme="light"], .sag-light {
  --bg-page: #FAFAF8;
  --bg-surface: #FFFFFF;
  --bg-surface-hover: #F4F5F8;
  --bg-inset: #F0F1F4;
  --bg-overlay: rgba(20, 22, 30, 0.55);

  --border-hairline: #E9ECF2;
  --border-subtle: #DCE0E8;
  --border-strong: #C5CBD6;

  --fg-primary: #14161E;
  --fg-secondary: #4A5163;
  --fg-tertiary: #6E7689;
  --fg-disabled: #A4ABBA;

  --shadow-card: 0 1px 0 0 rgba(20,22,30,0.04), inset 0 0 0 1px var(--border-hairline);
  --shadow-popover: 0 1px 0 0 rgba(20,22,30,0.06), 0 8px 24px -12px rgba(20,22,30,0.18), inset 0 0 0 1px var(--border-subtle);
}

/* =============================================================
   Semantic element styles
   ============================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-feature-settings: "ss01", "cv11", "tnum"; /* tabular nums for data */
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .sag-h1 {
  font: var(--weight-semibold) var(--text-2xl)/var(--leading-tight) var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0;
}
h2, .sag-h2 {
  font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0;
}
h3, .sag-h3 {
  font: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
  color: var(--fg-primary);
  margin: 0;
}
h4, .sag-h4 {
  font: var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-sans);
  color: var(--fg-primary);
  margin: 0;
}

/* eyebrow / category label — uppercase, tracked, small */
.sag-eyebrow {
  font: var(--weight-medium) var(--text-xs)/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-tertiary);
}

p, .sag-p {
  font: var(--weight-regular) var(--text-md)/var(--leading-base) var(--font-sans);
  color: var(--fg-primary);
  margin: 0;
}
.sag-muted { color: var(--fg-secondary); }
.sag-tertiary { color: var(--fg-tertiary); }

code, kbd, samp, .sag-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-feature-settings: "zero", "ss01";
  letter-spacing: var(--tracking-mono);
}

.sag-metric {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* link */
a {
  color: var(--action);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--action-hover); border-bottom-color: currentColor; }

/* selection */
::selection { background: var(--action-tint); color: var(--fg-primary); }

/* scrollbar — minimal */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; }
*::-webkit-scrollbar-track { background: transparent; }