/* GENERATED by scripts/build-tokens.mjs from shared/design-tokens.js.
   Do not edit by hand — edit the token source and re-run `npm run build:tokens`. */

/* ===== Tier 1 — primitives (raw palette + paper + scales). Theme-agnostic;
   themes never override these. App CSS reads the Tier-2 roles below, not
   these raw values (the @media print paper-* tokens are the one exception). */
:root {
  /* Raw palette. */
  --white: #ffffff;
  --cyan-400: #00ffcc;
  --cyan-300: #2effd9;
  --amber-500: #ffaa00;
  --ink-cyan: #04211b;
  --ink-slate: #1f2328;
  --black-950: #050505;
  --black-900: #0a0a0a;
  --black-975: #080808;
  --gray-850: #0e0e0e;
  --gray-800: #141414;
  --gray-700: #333333;
  --gray-400: #888888;
  --gray-200: #e0e0e0;
  --red-600: #d1242f;
  --orange-500: #fb8500;
  --yellow-700: #bf8700;
  --green-700: #1a7f37;
  --gray-300: #d0d7de;
  --coral-400: #ff5f56;

  /* Paper palette — print-only, PDF parity (theme-agnostic). */
  --paper-bg: #ffffff;
  --paper-ink: #1f2328;
  --paper-ink-dim: #57606a;
  --paper-ink-invert: #ffffff;
  --paper-ink-invert-dim: #c9d1d9;
  --paper-band: #1f2328;
  --paper-line: #d0d7de;
  --paper-line-soft: #eaeef2;
  --paper-fill: #f6f8fa;

  /* Spacing scale (UX-2) — group with whitespace, not nested borders. */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-sm-md: 12px;
  --space-md: 16px;
  --space-md-lg: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Corner-radius scale (UX-2). */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Layout widths (UX-P5) — one wide shell + one prose width. */
  --container-max: 1200px;
  --prose-max: 800px;

  /* Type-role scale (UX-P1, #79) — title / heading / label / body / caption. */
  --text-title-size: 22px;
  --text-title-weight: 700;
  --text-heading-size: 15px;
  --text-heading-weight: 600;
  --text-label-size: 12px;
  --text-label-weight: 700;
  --text-body-size: 14px;
  --text-caption-size: 12px;
}

/* ===== Tier 2 — semantic + effect roles (the only thing themes override).
   Base reproduces today's look exactly; the EFFECT tokens are `none` so Base
   carries zero glass. Each non-base theme ships an override-only [data-theme]
   block AFTER Base, so the cascade inherits unlisted roles from :root. ===== */
:root,
[data-theme="base"] {
  --bg-color: #050505;
  --surface-color: #0a0a0a;
  --border-color: #333333;
  --text-main: #e0e0e0;
  --text-dim: #888888;
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", Courier, monospace;
  --primary-accent: #00ffcc;
  --secondary-accent: #ffaa00;
  --accent-wash-weak: rgba(0, 255, 204, 0.08);
  --accent-wash: rgba(0, 255, 204, 0.1);
  --accent-wash-strong: rgba(0, 255, 204, 0.12);
  --app-surface-1: #0e0e0e;
  --app-surface-2: #141414;
  --app-sidebar-bg: #080808;
  --app-danger: #ff5f56;
  --severity-critical: #d1242f;
  --severity-high: #fb8500;
  --severity-medium: #bf8700;
  --severity-low: #1a7f37;
  --severity-unknown: #d0d7de;
  --severity-pill-fg: #050505;
  --severity-pill-fg-invert: #ffffff;
  --severity-pill-fg-muted: #1f2328;
  --btn-primary-bg: #00ffcc;
  --btn-primary-bg-hover: #2effd9;
  --btn-primary-fg: #04211b;
  --btn-shadow: none;
  --btn-default-bg: #141414;
  --btn-default-border: #333333;
  --btn-backdrop: none;
  --btn-hover-transform: none;
  --btn-active-transform: none;
  --card-bg: #0e0e0e;
  --card-border: #333333;
  --card-backdrop: none;
  --card-shadow: none;
  --card-hover-transform: none;
  --card-transition: none;
  --card-hover-border: #333333;
  --gradient-attestation: #0e0e0e;
  --attestation-border: #333333;
  --bg-glow: none;
  --bg-glow-size: auto;
  --scrim-bg: rgba(0, 0, 0, 0.5);
  --scrim-bg-strong: rgba(0, 0, 0, 0.55);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.4);
}

/* glassbento theme — override-only; inherits unlisted roles from Base. */
[data-theme="glassbento"] {
  --bg-color: #090a0f;
  --text-main: #f1f5f9;
  --text-dim: #c2cad6;
  --card-bg: rgba(18, 20, 29, 0.55);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-backdrop: blur(8px);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 18px rgba(0, 0, 0, 0.35);
  --card-hover-transform: none;
  --card-transition: border-color 200ms ease, box-shadow 200ms ease;
  --card-hover-border: rgba(56, 189, 248, 0.3);
  --primary-accent: #38bdf8;
  --accent-wash-weak: rgba(56, 189, 248, 0.08);
  --accent-wash: rgba(56, 189, 248, 0.12);
  --accent-wash-strong: rgba(56, 189, 248, 0.16);
  --btn-primary-bg: linear-gradient(135deg, #38bdf8 0%, #2b8fd0 100%);
  --btn-primary-bg-hover: linear-gradient(135deg, #54cdff 0%, #3b9fe0 100%);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 245, 196, 0.12);
  --btn-default-bg: rgba(255, 255, 255, 0.03);
  --btn-default-border: rgba(255, 255, 255, 0.08);
  --btn-backdrop: blur(8px);
  --btn-hover-transform: none;
  --btn-active-transform: translateY(0) scale(0.98);
  --gradient-attestation: linear-gradient(180deg, rgba(18, 19, 26, 0.8) 0%, rgba(30, 27, 75, 0.8) 100%);
  --attestation-border: rgba(79, 70, 229, 0.3);
  --bg-glow:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(60% 45% at 85% -8%, rgba(0, 245, 196, 0.05), transparent 60%);
  --bg-glow-size: 40px 40px, 40px 40px, 100% 100%;
}