/* ===========================================================================
   AURWatch: design tokens (single source of truth)
   Decisions and their reasoning: /home/neutrinoadmin/DESIGN_DECISIONS.md (§3).
   Nothing outside this file may declare a raw color, radius, duration or easing.

   Theme model: DARK is the documented default for this product (terminal-native
   audience, monitoring console). This is the briefed exception to the §2.1 "dark by
   default" ban. :root therefore carries the dark palette; [data-theme="light"]
   carries the equally first-class light palette. A visitor whose system asks for
   light gets light on first paint (§15), and an explicit toggle choice persists.
   =========================================================================== */

/* == Self-hosted type (§5.1: never a third-party font CDN) ================= */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/InterVariable.woff2?v=1") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/JetBrainsMono-Regular.woff2?v=1") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/JetBrainsMono-Medium.woff2?v=1") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/JetBrainsMono-Bold.woff2?v=1") format("woff2");
}

:root {
  /* == Type ================================================================
     Inter, tuned per §5.1: optical sizing on, tracking from Inter's own
     dynamic metrics (≈0 at 12px → −0.013em at body → −0.02em at display).
     Mono is reserved for package names, maintainers, rule ids and code. */
  --font-ui: "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;

  --text-xs: 12px;     /* meta labels, footnotes            lh 1.35  ls 0      */
  --text-sm: 14px;     /* secondary UI, nav, badges         lh 1.45  ls -.006em */
  --text-md: 16px;     /* dense UI: table cells, controls   lh 1.45  ls -.011em */
  --text-base: 17px;   /* body prose                        lh 1.47  ls -.013em */
  --text-lg: 21px;     /* intro / emphasized body           lh 1.38  ls -.015em */
  --text-xl: 28px;     /* page + section titles             lh 1.14  ls -.018em */
  --text-2xl: 40px;    /* verdict badge (the signature)     lh 1.10  ls -.018em */
  --text-3xl: clamp(34px, 2.4vw + 22px, 52px); /* verdict package name  lh 1.05 */

  --track-tight: -0.018em;
  --track-body: -0.013em;
  --track-ui: -0.006em;
  --track-caps: 0.06em;   /* the few genuine caps labels (badges, severity)     */

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

  /* == Space (4pt system) ================================================= */
  --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; --space-20: 80px;

  /* one section rhythm and one card padding, repeated everywhere (§7.1) */
  --pad-card: var(--space-5);
  --pad-card-tight: var(--space-4);
  --gap-section: var(--space-6);
  --pad-page: var(--space-8);

  /* == Shape (8px family: sharp, tool-like, §3) =========================== */
  --radius-sm: 6px;    /* inputs, badges, chips, inner elements */
  --radius-md: 8px;    /* buttons, menus, popovers              */
  --radius-lg: 10px;   /* cards, panels                         */
  --radius-xl: 14px;   /* dialog                                */
  --radius-full: 9999px;

  --hairline: 1px;

  /* == Component sizes ====================================================
     §4 forbids inline sizes as much as inline colors. The only values that
     stay literal below are (a) the media-query breakpoints, which CSS custom
     properties cannot appear in, and (b) the 1px clipping idioms used by the
     screen-reader-only and honeypot utilities. */
  --control-h: 36px;        /* buttons, inputs, filters; tool density (§7.2) */
  --control-h-md: 48px;     /* the dashboard lookup field, narrow viewports   */
  --control-h-lg: 52px;     /* the dashboard lookup field                     */
  --icon-sm: 15px;
  --icon-md: 17px;
  --icon-lg: 20px;
  --dot-sm: 8px;            /* legend + stat dots                             */
  --dot-lg: 14px;           /* the verdict's dot                              */
  --caret: 6px;             /* disclosure chevron                             */
  --border-active: 2px;     /* current-nav underline, chevron stroke          */
  --rule-thick: 3px;        /* the verdict's severity stroke                  */
  --gutter-ln: 56px;        /* PKGBUILD line-number gutter                    */
  --menu-max-h: 340px;      /* typeahead list before it scrolls               */
  --chart-h: 320px;
  --header-h: 112px;        /* sticky chrome fallback; ui.js measures the real value */
  --textarea-min-h: 104px;
  --col-min: 320px;         /* verdict column before it wraps                 */
  --blur-material: 20px;    /* floating chrome (§8.5)                         */

  /* == Widths ============================================================= */
  --width-app: 1160px;
  --width-prose: 68ch;

  /* == Motion (crisp: ease-out, 100–300ms, no springs, §3) ================ */
  --duration-none: 1ms;      /* the prefers-reduced-motion kill switch */
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);

  /* == Color: DARK (the default theme) =====================================
     Neutrals lean ~2% chroma toward the accent hue so the ramp reads as one
     temperature (§6.3). Elevation = lighter surface; borders carry depth. */
  --bg: #0d1117;
  --bg-secondary: #11161d;
  --bg-elevated: #161b22;
  --bg-inset: #0a0e13;
  --bg-code: #090d12;

  --fill-hover: rgba(255, 255, 255, 0.055);
  --fill-active: rgba(255, 255, 255, 0.10);
  --fill-selected: rgba(63, 178, 234, 0.14);

  --text-primary: #e6edf3;
  --text-secondary: #9aa5b1;
  --text-tertiary: #7d8894;
  --text-disabled: rgba(230, 237, 243, 0.38);

  --separator: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);

  --accent: #3fb2ea;          /* Arch blue #1793D1, brightened for dark (§6.3) */
  --accent-hover: #63c3f1;    /* +6% lightness, same hue/chroma                */
  --accent-active: #86d2f5;
  --accent-tint: rgba(63, 178, 234, 0.14);
  --accent-tint-strong: rgba(63, 178, 234, 0.22);
  --accent-halo: rgba(63, 178, 234, 0.28);
  --on-accent: #062231;       /* near-black: the dark accent is a light color   */

  /* Severity: semantic, never decorative (§6.2/§6.4).
     Text label always accompanies the color (§15). */
  --sev-high: #ff6b60;
  --sev-high-tint: rgba(255, 107, 96, 0.14);
  --sev-high-line: rgba(255, 107, 96, 0.55);

  --sev-medium: #e8ab35;
  --sev-medium-tint: rgba(232, 171, 53, 0.14);
  --sev-medium-line: rgba(232, 171, 53, 0.5);

  --sev-low: #bdb389;
  --sev-low-tint: rgba(189, 179, 137, 0.13);
  --sev-low-line: rgba(189, 179, 137, 0.45);

  --sev-clean: #46c97a;
  --sev-clean-tint: rgba(70, 201, 122, 0.13);
  --sev-clean-line: rgba(70, 201, 122, 0.42);

  --sev-unknown: #8b95a1;
  --sev-unknown-tint: rgba(139, 149, 161, 0.13);
  --sev-unknown-line: rgba(139, 149, 161, 0.38);

  /* Orthogonal AI flags, kept outside the severity ramp on purpose */
  --flag-piracy: #c3a6f0;
  --flag-piracy-tint: rgba(195, 166, 240, 0.14);
  --flag-neutral: #a8b3bf;
  --flag-neutral-tint: rgba(168, 179, 191, 0.13);

  /* Diff + code */
  --diff-add-bg: rgba(70, 201, 122, 0.13);
  --diff-add-text: #a7e6c0;
  --diff-del-bg: rgba(255, 107, 96, 0.13);
  --diff-del-text: #ffc0ba;
  --code-comment: #7d8894;
  --code-string: #8fd6b4;
  --code-keyword: #ff9c93;
  --code-builtin: #7cc6f0;
  --code-var: #3fb2ea;

  /* Depth: on dark, borders do the work; shadows are for overlays only */
  --shadow-rest: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-raised: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-overlay: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 64px rgba(0, 0, 0, 0.7);

  /* Floating chrome material (§8.5: chrome only, never content cards) */
  --material-bg: rgba(13, 17, 23, 0.72);
  --material-bg-solid: #0d1117;
  --scrim: rgba(3, 6, 10, 0.62);

  --focus-ring: 2px;
  --focus-offset: 2px;
}

/* == Color: LIGHT (re-derived, not inverted) =============================== */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-secondary: #f2f5f8;
  --bg-elevated: #ffffff;
  --bg-inset: #f7f9fb;
  --bg-code: #f7f9fb;

  --fill-hover: rgba(15, 20, 25, 0.045);
  --fill-active: rgba(15, 20, 25, 0.085);
  --fill-selected: rgba(17, 112, 159, 0.10);

  --text-primary: #0f1419;
  --text-secondary: #525c66;
  --text-tertiary: #67717c;
  --text-disabled: rgba(15, 20, 25, 0.38);

  --separator: rgba(15, 20, 25, 0.10);
  --border: rgba(15, 20, 25, 0.14);
  --border-strong: rgba(15, 20, 25, 0.24);

  --accent: #11709f;          /* Arch blue, darkened to clear 4.5:1 on white   */
  --accent-hover: #0e5f88;    /* −6% lightness, same hue/chroma                */
  --accent-active: #0b5173;
  --accent-tint: rgba(17, 112, 159, 0.10);
  --accent-tint-strong: rgba(17, 112, 159, 0.16);
  --accent-halo: rgba(17, 112, 159, 0.22);
  --on-accent: #ffffff;

  --sev-high: #b3311f;
  --sev-high-tint: rgba(179, 49, 31, 0.10);
  --sev-high-line: rgba(179, 49, 31, 0.45);

  --sev-medium: #7d4e00;
  --sev-medium-tint: rgba(125, 78, 0, 0.11);
  --sev-medium-line: rgba(125, 78, 0, 0.40);

  --sev-low: #6b6446;
  --sev-low-tint: rgba(107, 100, 70, 0.11);
  --sev-low-line: rgba(107, 100, 70, 0.36);

  --sev-clean: #18703e;
  --sev-clean-tint: rgba(24, 112, 62, 0.10);
  --sev-clean-line: rgba(24, 112, 62, 0.36);

  --sev-unknown: #5c6672;
  --sev-unknown-tint: rgba(92, 102, 114, 0.10);
  --sev-unknown-line: rgba(92, 102, 114, 0.32);

  --flag-piracy: #6b3fa0;
  --flag-piracy-tint: rgba(107, 63, 160, 0.10);
  --flag-neutral: #545e69;
  --flag-neutral-tint: rgba(84, 94, 105, 0.10);

  --diff-add-bg: rgba(24, 112, 62, 0.10);
  --diff-add-text: #14532c;
  --diff-del-bg: rgba(179, 49, 31, 0.10);
  --diff-del-text: #7f2114;
  --code-comment: #67717c;
  --code-string: #0f6b4a;
  --code-keyword: #a5301c;
  --code-builtin: #11709f;
  --code-var: #0e5f88;

  /* Light theme: layered, never colored, y-offset > blur/4 (§8.3) */
  --shadow-rest: 0 1px 2px rgba(15, 20, 25, 0.05), 0 0 0 1px rgba(15, 20, 25, 0.05);
  --shadow-raised: 0 2px 6px rgba(15, 20, 25, 0.06), 0 8px 24px rgba(15, 20, 25, 0.09);
  --shadow-overlay: 0 4px 12px rgba(15, 20, 25, 0.10), 0 16px 48px rgba(15, 20, 25, 0.18);

  --material-bg: rgba(255, 255, 255, 0.76);
  --material-bg-solid: #ffffff;
  --scrim: rgba(15, 20, 25, 0.35);
}