/* ============================================================
   Colibri Design System — Foundations
   colors_and_type.css

   Single source of truth for color, type, spacing, radii.
   All product surfaces consume these tokens. Do not redefine
   in component CSS; extend semantic tokens instead.
   ============================================================ */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "IBM Plex Sans Var";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("./fonts/IBM Plex Sans Var-Roman.woff2") format("woff2-variations"),
       url("./fonts/IBM Plex Sans Var-Roman.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Var";
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url("./fonts/IBM Plex Sans Var-Italic.woff2") format("woff2-variations"),
       url("./fonts/IBM Plex Sans Var-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Serif Var";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("./fonts/IBM Plex Serif Var-Roman-Latin1.woff2") format("woff2-variations"),
       url("./fonts/IBM Plex Serif Var-Roman-Latin1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Serif Var";
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url("./fonts/IBM Plex Serif Var-Italic-Latin1.woff2") format("woff2-variations"),
       url("./fonts/IBM Plex Serif Var-Italic-Latin1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/IBMPlexMono-Light.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: italic;  font-weight: 400; font-display: swap; src: url("./fonts/IBMPlexMono-Italic.woff2")  format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/IBMPlexMono-Medium.woff2")  format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/IBMPlexMono-Bold.woff2") format("woff2"); }

/* ---------- Root: light mode (default) ---------- */

:root {
  color-scheme: light;

  /* -------- Type families -------- */
  --font-sans:    "IBM Plex Sans Var", "IBM Plex Sans", ui-sans-serif, sans-serif;
  --font-serif:   "IBM Plex Serif Var", "IBM Plex Serif", ui-serif, Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* -------- Type scale (px) --------
     Tight, dense. UI lives between 11 and 14 most of the day. */
  --fs-micro:   11px;   /* table section labels (uppercase exception) */
  --fs-xs:      12px;   /* secondary, metadata */
  --fs-sm:      13px;   /* dense table cells, sidebar */
  --fs-md:      14px;   /* body, primary UI */
  --fs-lg:      16px;   /* section subheads */
  --fs-xl:      18px;   /* card titles */
  --fs-2xl:     22px;   /* panel headers */
  --fs-3xl:     28px;   /* view headers */
  --fs-4xl:     36px;   /* dossier titles */
  --fs-display-sm: 48px;
  --fs-display-md: 64px;
  --fs-display-lg: 88px;

  /* -------- Weights -------- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* -------- Line heights -------- */
  --lh-tight:    1.15;
  --lh-snug:     1.30;
  --lh-normal:   1.45;
  --lh-loose:    1.60;

  /* -------- Letter spacing -------- */
  --ls-tight:    -0.01em;
  --ls-normal:    0em;
  --ls-wide:      0.04em;
  --ls-uppercase: 0.08em;   /* the 11px uppercase exception */

  /* -------- Brand accent (the only one) -------- */
  --brand:               oklch(0.50 0.22 258);
  --brand-hover:         oklch(0.45 0.22 258);
  --brand-active:        oklch(0.40 0.22 258);
  --brand-fg:            oklch(0.99 0 0);            /* text on brand */
  --brand-wash:          oklch(0.50 0.22 258 / 0.08);
  --brand-wash-strong:   oklch(0.50 0.22 258 / 0.14);
  --brand-ring:          oklch(0.50 0.22 258 / 0.40);

  /* -------- Calibrated risk palette --------
     All at L=0.65 C=0.18. Used ONLY for risk / status / severity. */
  --risk-low:        oklch(0.65 0.18 155);
  --risk-medium:     oklch(0.65 0.18  85);
  --risk-high:       oklch(0.65 0.18  40);
  --risk-veryhigh:   oklch(0.65 0.18  15);
  --risk-critical:   oklch(0.65 0.18   5);

  /* Solid fg for badges sitting on the wash */
  --risk-low-fg:        oklch(0.32 0.10 155);
  --risk-medium-fg:     oklch(0.34 0.10  85);
  --risk-high-fg:       oklch(0.36 0.12  40);
  --risk-veryhigh-fg:   oklch(0.38 0.14  15);
  --risk-critical-fg:   oklch(0.32 0.14   5);

  /* Washes for row backgrounds and badge fills (light mode) */
  --risk-low-wash:        oklch(0.65 0.18 155 / 0.10);
  --risk-medium-wash:     oklch(0.65 0.18  85 / 0.12);
  --risk-high-wash:       oklch(0.65 0.18  40 / 0.12);
  --risk-veryhigh-wash:   oklch(0.65 0.18  15 / 0.12);
  --risk-critical-wash:   oklch(0.65 0.18   5 / 0.14);

  /* Low-confidence amber-wash row background (<70%) */
  --confidence-low-wash:  oklch(0.65 0.18 85 / 0.10);

  /* -------- Surfaces (light mode) --------
     Four tiers: sunken < primary < raised < elevated. */
  --surface-sunken:    oklch(0.965 0.003 258);
  --surface-primary:   oklch(0.985 0.002 258);   /* off-white canvas */
  --surface-raised:    oklch(1.000 0 0);          /* card */
  --surface-elevated:  oklch(1.000 0 0);          /* popover, command palette */

  /* Glass: backdrop-blurred semi-transparent surface */
  --glass-bg:          oklch(1 0 0 / 0.72);
  --glass-border:      oklch(0.20 0.01 258 / 0.10);
  --glass-blur:        16px;

  /* -------- Text (light mode) -------- */
  --text-primary:      oklch(0.18 0.01 258);   /* near-black */
  --text-secondary:    oklch(0.42 0.01 258);
  --text-tertiary:     oklch(0.58 0.01 258);
  --text-disabled:     oklch(0.72 0.01 258);
  --text-on-brand:     oklch(0.99 0 0);
  --text-link:         var(--brand);

  /* -------- Borders / dividers (Wire) -------- */
  --wire:              oklch(0.20 0.01 258 / 0.14);   /* default 1px hairline */
  --wire-strong:       oklch(0.20 0.01 258 / 0.22);
  --wire-subtle:       oklch(0.20 0.01 258 / 0.08);
  --wire-focus:        var(--brand);

  /* -------- Focus ring -------- */
  --ring:              0 0 0 2px var(--surface-primary), 0 0 0 4px var(--brand-ring);

  /* -------- Spacing (4px base) -------- */
  --space-0:   0px;
  --space-px:  1px;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;
  --space-15: 128px;

  /* -------- Radii (sacred set: 2 / 4 / 6 / 8 / 9999) -------- */
  --radius-1: 2px;     /* chips, tags */
  --radius-2: 4px;     /* inputs, buttons */
  --radius-3: 6px;     /* cards (compact) */
  --radius-4: 8px;     /* cards (max) — do not exceed */
  --radius-full: 9999px;

  /* -------- Elevation — restrained, no coloured shadow -------- */
  --shadow-1: 0 1px 0 0 var(--wire);                                /* hairline lift */
  --shadow-2: 0 1px 2px oklch(0.18 0.01 258 / 0.08),
              0 0 0 1px var(--wire);                                /* card */
  --shadow-3: 0 4px 12px oklch(0.18 0.01 258 / 0.10),
              0 0 0 1px var(--wire);                                /* popover */
  --shadow-4: 0 12px 32px oklch(0.18 0.01 258 / 0.14),
              0 0 0 1px var(--wire);                                /* command palette */

  /* -------- Motion — one-shot only -------- */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       120ms;
  --dur-normal:     200ms;
  --dur-slow:       400ms;

  /* -------- Numeric features (sacred) -------- */
  --feat-numeric:   "tnum", "zero";
}

/* ---------- Dark mode ---------- */

:root[data-theme="dark"], .dark {
  color-scheme: dark;

  --surface-sunken:    oklch(0.13 0.005 258);
  --surface-primary:   oklch(0.16 0.005 258);   /* near-black canvas */
  --surface-raised:    oklch(0.19 0.006 258);
  --surface-elevated:  oklch(0.22 0.007 258);

  --glass-bg:          oklch(0.16 0.005 258 / 0.72);
  --glass-border:      oklch(0.99 0 0 / 0.08);

  --text-primary:      oklch(0.96 0.005 258);
  --text-secondary:    oklch(0.70 0.005 258);
  --text-tertiary:     oklch(0.54 0.005 258);
  --text-disabled:     oklch(0.38 0.005 258);

  --wire:              oklch(0.99 0 0 / 0.10);
  --wire-strong:       oklch(0.99 0 0 / 0.18);
  --wire-subtle:       oklch(0.99 0 0 / 0.06);

  --brand:             oklch(0.62 0.22 258);
  --brand-hover:       oklch(0.68 0.22 258);
  --brand-active:      oklch(0.58 0.22 258);
  --brand-wash:        oklch(0.62 0.22 258 / 0.12);
  --brand-wash-strong: oklch(0.62 0.22 258 / 0.20);
  --brand-ring:        oklch(0.62 0.22 258 / 0.40);

  --risk-low-fg:        oklch(0.78 0.16 155);
  --risk-medium-fg:     oklch(0.80 0.16  85);
  --risk-high-fg:       oklch(0.78 0.16  40);
  --risk-veryhigh-fg:   oklch(0.74 0.16  15);
  --risk-critical-fg:   oklch(0.70 0.16   5);

  --risk-low-wash:        oklch(0.65 0.18 155 / 0.14);
  --risk-medium-wash:     oklch(0.65 0.18  85 / 0.14);
  --risk-high-wash:       oklch(0.65 0.18  40 / 0.14);
  --risk-veryhigh-wash:   oklch(0.65 0.18  15 / 0.16);
  --risk-critical-wash:   oklch(0.65 0.18   5 / 0.18);
  --confidence-low-wash:  oklch(0.65 0.18 85 / 0.12);

  --shadow-1: 0 1px 0 0 var(--wire);
  --shadow-2: 0 1px 2px oklch(0 0 0 / 0.35), 0 0 0 1px var(--wire);
  --shadow-3: 0 4px 12px oklch(0 0 0 / 0.45), 0 0 0 1px var(--wire);
  --shadow-4: 0 12px 32px oklch(0 0 0 / 0.55), 0 0 0 1px var(--wire);

  --ring: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--brand-ring);
}

/* ---------- Semantic type roles ----------
   Use these in components, not the raw fs- tokens. */

:where(.t-display-lg, .t-display-md, .t-display-sm) {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.t-display-lg { font-size: var(--fs-display-lg); }
.t-display-md { font-size: var(--fs-display-md); }
.t-display-sm { font-size: var(--fs-display-sm); }

.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.t-h1 { font-size: var(--fs-4xl); font-weight: var(--fw-medium); }
.t-h2 { font-size: var(--fs-3xl); font-weight: var(--fw-medium); }
.t-h3 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
.t-h4 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); }

.t-body, .t-body-sm, .t-meta, .t-micro {
  font-family: var(--font-sans);
  color: var(--text-primary);
  line-height: var(--lh-normal);
}
.t-body    { font-size: var(--fs-md); font-weight: var(--fw-regular); }
.t-body-sm { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-secondary); }
.t-meta    { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-secondary); }
.t-micro   { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--text-tertiary); letter-spacing: var(--ls-wide); }

/* The single ALL CAPS exception: 11px table section labels */
.t-section-label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--text-tertiary);
}

/* Numerics, IDs, timestamps, code, tabular data */
.t-mono, .t-num, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: var(--feat-numeric);
  font-variant-numeric: tabular-nums slashed-zero;
}
.t-num     { font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--text-primary); }
.t-mono-sm { font-family: var(--font-mono); font-size: var(--fs-sm); font-feature-settings: var(--feat-numeric); }

/* Marketing display headlines and PDF report titles ONLY */
.t-marketing-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-md);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

/* Low-confidence inline qualifier */
.t-low-confidence {
  color: var(--text-secondary);
  text-decoration: underline dashed var(--wire-strong);
  text-underline-offset: 3px;
}

/* ---------- Base reset for kits ---------- */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text-primary);
  background: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }