/* ============================================================================
 * Nexo Seguridad — Premium Design Tokens
 * ----------------------------------------------------------------------------
 * Engineering rationale:
 *   - Restraint over decoration: single navy primary, mid-blue CTA accent,
 *     gold reserved for prestige moments only.
 *   - Numeric rigor as the premium signal: Source Serif locked to KPI numerics,
 *     Inter for everything else, tabular-nums on every digit.
 *   - Linear-grade depth: shadows are tinted with canvas color (warm-black in
 *     dark, navy-tinted in light); dark mode uses warm grays (2026 refresh).
 *   - Severity locked to a 5-tier scale (info → low → medium → high → critical)
 *     used identically everywhere.
 *
 * Token naming convention: --lj-{category}-{name}-{variant}
 * Tailwind compatibility: every token is a CSS custom property usable as
 *   `var(--lj-…)` in arbitrary Tailwind values, e.g. bg-[var(--lj-color-canvas)].
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * :root — LIGHT MODE (default)
 * ------------------------------------------------------------------------- */
:root {
  /* ----- Brand: navy ramp ------------------------------------------------ */
  --lj-color-navy-950: #070B16;
  --lj-color-navy-900: #0B1220;
  --lj-color-navy-800: #131B2E;
  --lj-color-navy-700: #1B2640;
  --lj-color-navy-600: #243152;
  --lj-color-navy-500: #1E3A5F;
  --lj-color-navy-400: #2E4D7A;

  /* ----- Brand: primary (navy) ------------------------------------------ */
  --lj-color-primary: #1E3A5F;
  --lj-color-primary-hover: #16304F;
  --lj-color-primary-active: #102542;
  --lj-color-primary-subtle: #E8EEF7;

  /* ----- Brand: accent blue (CTAs, current selection) ------------------- */
  --lj-color-accent-blue: #2A6BFF;
  --lj-color-accent-blue-hover: #1E54D6;
  --lj-color-accent-blue-active: #1843B3;
  --lj-color-accent-blue-subtle: #E8F0FF;

  /* ----- Brand: accent gold (prestige only) ----------------------------- */
  --lj-color-accent-gold: #C9A55C;
  --lj-color-accent-gold-hover: #B58F45;
  --lj-color-accent-gold-subtle: #F7F1E2;
  --lj-color-accent-gold-foil: #D4B872;

  /* ----- Neutrals: surfaces & borders ----------------------------------- */
  --lj-color-canvas: #F7F8FA;
  --lj-color-surface: #FFFFFF;
  --lj-color-surface-raised: #FBFCFD;
  --lj-color-surface-sunken: #F2F4F8;
  --lj-color-border-subtle: #EDF0F4;
  --lj-color-border: #E5E8EE;
  --lj-color-border-strong: #D1D6E0;
  --lj-color-divider: #EEF1F5;

  /* ----- Neutrals: text -------------------------------------------------- */
  --lj-color-text-primary: #0B1220;
  --lj-color-text-secondary: #3A4256;
  --lj-color-text-tertiary: #4A5468;
  --lj-color-text-quaternary: #6B7388;
  --lj-color-text-disabled: #B8BFCD;
  --lj-color-text-inverse: #FFFFFF;

  /* ----- Semantic: success / warning / danger / info -------------------- */
  --lj-color-success: #16A34A;
  --lj-color-success-hover: #15803D;
  --lj-color-success-subtle: #DCFCE7;
  --lj-color-success-border: #86EFAC;

  --lj-color-warning: #D97706;
  --lj-color-warning-hover: #B45309;
  --lj-color-warning-subtle: #FEF3C7;
  --lj-color-warning-border: #FCD34D;

  --lj-color-danger: #DC2626;
  --lj-color-danger-hover: #B91C1C;
  --lj-color-danger-subtle: #FEE2E2;
  --lj-color-danger-border: #FCA5A5;

  --lj-color-info: #0EA5E9;
  --lj-color-info-hover: #0284C7;
  --lj-color-info-subtle: #E0F2FE;
  --lj-color-info-border: #7DD3FC;

  /* ----- Severity (LOCKED 5-tier scale) --------------------------------- */
  --lj-color-sev-info: #94A3B8;
  --lj-color-sev-info-bg: #F1F5F9;
  --lj-color-sev-low: #0EA5E9;
  --lj-color-sev-low-bg: #E0F2FE;
  --lj-color-sev-medium: #F59E0B;
  --lj-color-sev-medium-bg: #FEF3C7;
  --lj-color-sev-high: #EA580C;
  --lj-color-sev-high-bg: #FFEDD5;
  --lj-color-sev-critical: #DC2626;
  --lj-color-sev-critical-bg: #FEE2E2;
  --lj-color-sev-resurfaced: #FF3B30;

  /* ----- Score gradient (0–1000) ---------------------------------------- */
  --lj-color-score-excellent: #16A34A;
  --lj-color-score-good: #65A30D;
  --lj-color-score-fair: #EAB308;
  --lj-color-score-poor: #EA580C;
  --lj-color-score-critical: #DC2626;
  --lj-color-score-track: #E5E8EE;

  /* ----- Framework chips ------------------------------------------------- */
  --lj-color-fw-iso-27001: #1E3A5F;
  --lj-color-fw-soc-2: #7C3AED;
  --lj-color-fw-nis2: #0891B2;
  --lj-color-fw-dora: #0E7490;
  --lj-color-fw-gdpr: #0369A1;
  --lj-color-fw-ens: #B45309;

  /* ----- Node categories (attack graph) --------------------------------- */
  --lj-color-node-network: #0EA5E9;
  --lj-color-node-identity: #7C3AED;
  --lj-color-node-data: #16A34A;
  --lj-color-node-code: #F59E0B;
  --lj-color-node-infrastructure: #94A3B8;

  /* ----- Focus & overlays ----------------------------------------------- */
  --lj-color-focus-ring: rgba(42, 107, 255, 0.40);
  --lj-color-focus-ring-offset: #FFFFFF;
  --lj-color-scrim: rgba(11, 18, 32, 0.40);
  --lj-color-shimmer: rgba(255, 255, 255, 0.06);

  /* ----- Typography: families ------------------------------------------- */
  --lj-font-sans: 'Inter', 'Inter var', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --lj-font-serif: 'Source Serif 4', 'Source Serif Pro', 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --lj-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ----- Typography: weights (discipline: only 4) ----------------------- */
  --lj-fw-light: 300;
  --lj-fw-regular: 400;
  --lj-fw-medium: 500;
  --lj-fw-semibold: 600;

  /* ----- Typography: feature flags -------------------------------------- */
  --lj-font-feature-tabular: 'tnum' on, 'cv11' on;
  --lj-font-feature-stylistic: 'ss01' on, 'ss02' on, 'cv11' on, 'calt' on;
  --lj-font-feature-no-liga: 'liga' off, 'clig' off;

  /* ----- Typography: type scale ----------------------------------------- */
  --lj-fs-xs: 11px;     --lj-lh-xs: 16px;     --lj-tracking-xs: 0.04em;
  --lj-fs-sm: 12px;     --lj-lh-sm: 18px;     --lj-tracking-sm: -0.005em;
  --lj-fs-base: 14px;   --lj-lh-base: 22px;   --lj-tracking-base: -0.011em;
  --lj-fs-md: 15px;     --lj-lh-md: 24px;     --lj-tracking-md: -0.011em;
  --lj-fs-lg: 17px;     --lj-lh-lg: 26px;     --lj-tracking-lg: -0.014em;
  --lj-fs-xl: 20px;     --lj-lh-xl: 28px;     --lj-tracking-xl: -0.018em;
  --lj-fs-2xl: 24px;    --lj-lh-2xl: 32px;    --lj-tracking-2xl: -0.022em;
  --lj-fs-3xl: 30px;    --lj-lh-3xl: 38px;    --lj-tracking-3xl: -0.028em;
  --lj-fs-4xl: 40px;    --lj-lh-4xl: 44px;    --lj-tracking-4xl: -0.035em;
  --lj-fs-5xl: 64px;    --lj-lh-5xl: 64px;    --lj-tracking-5xl: -0.045em;
  --lj-fs-display: 96px; --lj-lh-display: 96px; --lj-tracking-display: -0.052em;

  /* ----- Spacing (4px base unit) ---------------------------------------- */
  --lj-space-0: 0px;
  --lj-space-px: 1px;
  --lj-space-0-5: 2px;
  --lj-space-1: 4px;
  --lj-space-1-5: 6px;
  --lj-space-2: 8px;
  --lj-space-2-5: 10px;
  --lj-space-3: 12px;
  --lj-space-4: 16px;
  --lj-space-5: 20px;
  --lj-space-6: 24px;
  --lj-space-7: 28px;
  --lj-space-8: 32px;
  --lj-space-10: 40px;
  --lj-space-12: 48px;
  --lj-space-14: 56px;
  --lj-space-16: 64px;
  --lj-space-20: 80px;
  --lj-space-24: 96px;
  --lj-space-32: 128px;
  --lj-space-40: 160px;
  --lj-space-48: 192px;
  --lj-space-64: 256px;

  /* ----- Semantic paddings ---------------------------------------------- */
  --lj-pad-card-compact: 16px;
  --lj-pad-card: 24px;
  --lj-pad-card-spacious: 32px;
  --lj-pad-card-hero: 40px;
  --lj-pad-input-x: 12px;
  --lj-pad-input-y: 10px;
  --lj-pad-btn-sm: 6px 12px;
  --lj-pad-btn-md: 8px 16px;
  --lj-pad-btn-lg: 12px 24px;
  --lj-pad-cell-y: 12px;
  --lj-pad-cell-x: 16px;
  --lj-pad-badge: 2px 8px;
  --lj-pad-pill: 4px 10px;
  --lj-gap-section: 32px;
  --lj-gap-card: 16px;
  --lj-gap-tile: 12px;
  --lj-gap-inline: 8px;
  --lj-gap-list: 4px;

  /* ----- Layout dimensions ---------------------------------------------- */
  --lj-layout-page-pad-mobile: 16px;
  --lj-layout-page-pad-tablet: 24px;
  --lj-layout-page-pad-desktop: 32px;
  --lj-layout-page-pad-wide: 48px;
  --lj-layout-page-max: 1440px;
  --lj-layout-content-max: 1280px;
  --lj-layout-reading-max: 680px;
  --lj-layout-sidebar-collapsed: 64px;
  --lj-layout-sidebar-expanded: 240px;
  --lj-layout-topbar: 56px;
  --lj-layout-subbar: 44px;
  --lj-layout-drawer: 480px;
  --lj-layout-drawer-wide: 640px;
  --lj-layout-modal-sm: 440px;
  --lj-layout-modal-md: 560px;
  --lj-layout-modal-lg: 720px;
  --lj-layout-cmd-palette-w: 640px;
  --lj-layout-cmd-palette-h: 480px;

  /* ----- Component heights ---------------------------------------------- */
  --lj-h-input-sm: 32px;
  --lj-h-input-md: 36px;
  --lj-h-input-lg: 40px;
  --lj-h-btn-sm: 28px;
  --lj-h-btn-md: 36px;
  --lj-h-btn-lg: 44px;
  --lj-h-row-compact: 40px;
  --lj-h-row: 48px;
  --lj-h-row-comfortable: 56px;
  --lj-h-chip: 28px;
  --lj-h-badge: 20px;
  --lj-h-sparkline: 24px;
  --lj-h-progress: 6px;
  --lj-h-severity-bar: 4px;

  /* ----- Icon sizes ----------------------------------------------------- */
  --lj-icon-xs: 12px;
  --lj-icon-sm: 14px;
  --lj-icon-md: 16px;
  --lj-icon-lg: 20px;
  --lj-icon-xl: 24px;
  --lj-icon-2xl: 32px;
  --lj-icon-graph-node: 64px;
  --lj-icon-storyboard-active: 56px;
  --lj-icon-storyboard-completed: 28px;

  /* ----- Radii ---------------------------------------------------------- */
  --lj-radius-none: 0px;
  --lj-radius-xs: 4px;
  --lj-radius-sm: 6px;
  --lj-radius-md: 8px;
  --lj-radius-lg: 12px;
  --lj-radius-xl: 16px;
  --lj-radius-2xl: 20px;
  --lj-radius-3xl: 24px;
  --lj-radius-full: 9999px;

  /* ----- Radii: semantic ------------------------------------------------ */
  --lj-radius-badge: 4px;
  --lj-radius-pill: 9999px;
  --lj-radius-chip: 8px;
  --lj-radius-tag-severity: 6px;
  --lj-radius-input: 8px;
  --lj-radius-button: 8px;
  --lj-radius-card: 12px;
  --lj-radius-card-hero: 16px;
  --lj-radius-modal: 16px;
  --lj-radius-tooltip: 6px;
  --lj-radius-popover: 12px;
  --lj-radius-cmd-palette: 16px;
  --lj-radius-avatar: 9999px;
  --lj-radius-avatar-square: 8px;
  --lj-radius-progress: 9999px;

  /* ----- Shadows (Linear-grade, navy-tinted) --------------------------- */
  --lj-shadow-0: none;
  --lj-shadow-1: 0 1px 2px rgba(11, 18, 32, 0.04), 0 1px 1px rgba(11, 18, 32, 0.02);
  --lj-shadow-2: 0 1px 3px rgba(11, 18, 32, 0.06), 0 4px 12px rgba(11, 18, 32, 0.05);
  --lj-shadow-3: 0 2px 4px rgba(11, 18, 32, 0.06), 0 8px 20px rgba(11, 18, 32, 0.08), 0 12px 32px rgba(11, 18, 32, 0.06);
  --lj-shadow-4: 0 4px 8px rgba(11, 18, 32, 0.08), 0 16px 32px rgba(11, 18, 32, 0.12), 0 24px 64px rgba(11, 18, 32, 0.14);
  --lj-shadow-5: 0 8px 16px rgba(11, 18, 32, 0.10), 0 24px 48px rgba(11, 18, 32, 0.16), 0 48px 96px rgba(11, 18, 32, 0.20);

  /* ----- Focus glows ---------------------------------------------------- */
  --lj-shadow-focus: 0 0 0 3px rgba(42, 107, 255, 0.35);
  --lj-shadow-focus-inset: inset 0 0 0 2px rgba(42, 107, 255, 0.50);
  --lj-shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.35);
  --lj-shadow-focus-success: 0 0 0 3px rgba(22, 163, 74, 0.35);

  /* ----- Interactive glows --------------------------------------------- */
  --lj-shadow-hover-lift: 0 4px 12px rgba(30, 58, 95, 0.10), 0 2px 4px rgba(30, 58, 95, 0.06);
  --lj-shadow-press-inset: inset 0 1px 2px rgba(11, 18, 32, 0.08);
  --lj-shadow-critical-pulse: 0 0 0 0 rgba(220, 38, 38, 0.50), 0 0 0 6px rgba(220, 38, 38, 0);
  --lj-shadow-active-breathe: 0 0 0 0 rgba(42, 107, 255, 0.35), 0 0 0 8px rgba(42, 107, 255, 0);
  --lj-shadow-gold-glow: 0 0 24px rgba(201, 165, 92, 0.20), 0 4px 12px rgba(201, 165, 92, 0.10);

  /* ----- Motion: durations --------------------------------------------- */
  --lj-dur-instant: 80ms;
  --lj-dur-fast: 140ms;
  --lj-dur-base: 220ms;
  --lj-dur-slow: 420ms;
  --lj-dur-slower: 640ms;
  --lj-dur-deliberate: 800ms;

  /* ----- Motion: easings ------------------------------------------------ */
  --lj-ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --lj-ease-in-out-quint: cubic-bezier(0.65, 0, 0.35, 1);
  --lj-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lj-ease-linear: linear;

  /* ----- Motion: named transitions ------------------------------------- */
  --lj-tr-color: color var(--lj-dur-fast) var(--lj-ease-out-quart), background-color var(--lj-dur-fast) var(--lj-ease-out-quart), border-color var(--lj-dur-fast) var(--lj-ease-out-quart);
  --lj-tr-hover-lift: transform var(--lj-dur-base) var(--lj-ease-out-quart), box-shadow var(--lj-dur-base) var(--lj-ease-out-quart);
  --lj-tr-panel-slide: transform var(--lj-dur-slow) var(--lj-ease-out-quart), opacity var(--lj-dur-base) var(--lj-ease-out-quart);
  --lj-tr-modal-enter: opacity var(--lj-dur-base) var(--lj-ease-out-quart), transform var(--lj-dur-slow) var(--lj-ease-out-quart);
  --lj-tr-focus-ring: box-shadow var(--lj-dur-fast) var(--lj-ease-out-quart);

  /* ============================================================================
   * RAMP OVERRIDES — token-backed Tailwind palette
   * ----------------------------------------------------------------------------
   * Brand designer review (Vanta/Drata/Wiz tier) flagged that ~80% of templates
   * reach straight into Tailwind's default red/orange/amber/blue/emerald/purple
   * /slate palette via utilities like `bg-red-50`, `text-emerald-700`,
   * `ring-red-200`, etc. — bypassing tokens.css entirely. The consequence: the
   * dark-mode toggle at the top of base.html could not re-theme those surfaces
   * (dashboard rendered light-mode UI on a dark canvas) and the brand read as
   * "generic Tailwind template with a custom token file taped on top".
   *
   * Fix: re-route every utility ramp through token vars. Existing markup keeps
   * working — `bg-red-50` now resolves to var(--lj-ramp-red-50) which respects
   * the dark-mode override below. No template sweep required.
   *
   * LIGHT-MODE values mirror Tailwind's defaults (so screenshots in the light
   * theme look identical). DARK-MODE values (below) collapse the lightest
   * tints (50/100/200) onto navy-tinted surfaces so semantic accents read
   * correctly on a warm-black canvas instead of glowing pastel.
   * ========================================================================== */

  /* red */
  --lj-ramp-red-50:  #FEF2F2;
  --lj-ramp-red-100: #FEE2E2;
  --lj-ramp-red-200: #FECACA;
  --lj-ramp-red-300: #FCA5A5;
  --lj-ramp-red-500: #EF4444;
  --lj-ramp-red-600: #DC2626;
  --lj-ramp-red-700: #B91C1C;
  --lj-ramp-red-900: #7F1D1D;
  --lj-ramp-red-950: #450A0A;

  /* orange */
  --lj-ramp-orange-50:  #FFF7ED;
  --lj-ramp-orange-100: #FFEDD5;
  --lj-ramp-orange-200: #FED7AA;
  --lj-ramp-orange-300: #FDBA74;
  --lj-ramp-orange-500: #F97316;
  --lj-ramp-orange-600: #EA580C;
  --lj-ramp-orange-700: #C2410C;
  --lj-ramp-orange-900: #7C2D12;
  --lj-ramp-orange-950: #431407;

  /* amber */
  --lj-ramp-amber-50:  #FFFBEB;
  --lj-ramp-amber-100: #FEF3C7;
  --lj-ramp-amber-200: #FDE68A;
  --lj-ramp-amber-300: #FCD34D;
  --lj-ramp-amber-500: #F59E0B;
  --lj-ramp-amber-600: #D97706;
  --lj-ramp-amber-700: #B45309;
  --lj-ramp-amber-900: #78350F;
  --lj-ramp-amber-950: #451A03;

  /* blue (re-tuned toward Nexo accent-blue) */
  --lj-ramp-blue-50:  #E8F0FF;
  --lj-ramp-blue-100: #DBE7FF;
  --lj-ramp-blue-200: #B8CFFF;
  --lj-ramp-blue-300: #8DB1FF;
  --lj-ramp-blue-500: #2A6BFF;
  --lj-ramp-blue-600: #1E54D6;
  --lj-ramp-blue-700: #1843B3;
  --lj-ramp-blue-900: #102A6E;
  --lj-ramp-blue-950: #081532;

  /* emerald */
  --lj-ramp-emerald-50:  #ECFDF5;
  --lj-ramp-emerald-100: #DCFCE7;
  --lj-ramp-emerald-200: #BBF7D0;
  --lj-ramp-emerald-300: #86EFAC;
  --lj-ramp-emerald-500: #22C55E;
  --lj-ramp-emerald-600: #16A34A;
  --lj-ramp-emerald-700: #15803D;
  --lj-ramp-emerald-900: #14532D;
  --lj-ramp-emerald-950: #052E16;

  /* purple (analyst tags, framework chips) */
  --lj-ramp-purple-50:  #FAF5FF;
  --lj-ramp-purple-100: #F3E8FF;
  --lj-ramp-purple-200: #E9D5FF;
  --lj-ramp-purple-300: #D8B4FE;
  --lj-ramp-purple-500: #A855F7;
  --lj-ramp-purple-600: #9333EA;
  --lj-ramp-purple-700: #7C3AED;
  --lj-ramp-purple-900: #581C87;
  --lj-ramp-purple-950: #3B0764;

  /* slate (re-tuned to align with Nexo neutral surfaces) */
  --lj-ramp-slate-50:  #F7F8FA;
  --lj-ramp-slate-100: #F2F4F8;
  --lj-ramp-slate-200: #E5E8EE;
  --lj-ramp-slate-300: #D1D6E0;
  --lj-ramp-slate-500: #5A6478;
  --lj-ramp-slate-600: #3A4256;
  --lj-ramp-slate-700: #243152;
  --lj-ramp-slate-900: #0B1220;
  --lj-ramp-slate-950: #070B16;
}

/* ---------------------------------------------------------------------------
 * [data-theme="dark"] — DARK MODE (warm-grays, Linear 2026 refresh)
 * ------------------------------------------------------------------------- */
[data-theme="dark"] {
  /* Neutrals: warm-gray surfaces */
  --lj-color-canvas: #0A0A0B;
  --lj-color-surface: #131316;
  --lj-color-surface-raised: #1A1A1F;
  --lj-color-surface-sunken: #0E0E11;
  --lj-color-surface-overlay: #1F1F25;
  --lj-color-border-subtle: #1F1F24;
  --lj-color-border: #26262B;
  --lj-color-border-strong: #34343C;
  --lj-color-divider: #1C1C21;
  --lj-color-sidebar-bg: #0E0E11;

  /* Text */
  --lj-color-text-primary: #F2F4F8;
  --lj-color-text-secondary: #C6CBD6;
  --lj-color-text-tertiary: #8B95AB;
  --lj-color-text-quaternary: #6B748A;
  --lj-color-text-disabled: #4A5063;
  --lj-color-text-inverse: #0A0A0B;

  /* Primary subtle re-tuned for dark */
  --lj-color-primary-subtle: #16213A;
  --lj-color-accent-blue-subtle: #0F1B3A;
  --lj-color-accent-gold-subtle: #2A2418;

  /* Semantic backgrounds (dark variants) */
  --lj-color-success-subtle: #0E2A1A;
  --lj-color-warning-subtle: #2B1F0A;
  --lj-color-danger-subtle: #2C1212;
  --lj-color-info-subtle: #0A1F2C;

  /* Severity backgrounds (dark) */
  --lj-color-sev-info-bg: #1A1F26;
  --lj-color-sev-low-bg: #0A1F2C;
  --lj-color-sev-medium-bg: #2B1F0A;
  --lj-color-sev-high-bg: #2C1A0E;
  --lj-color-sev-critical-bg: #2C1212;

  /* Score track */
  --lj-color-score-track: #26262B;

  /* Focus & overlays */
  --lj-color-focus-ring-offset: #0A0A0B;
  --lj-color-scrim: rgba(0, 0, 0, 0.60);
  --lj-color-shimmer: rgba(255, 255, 255, 0.04);

  /* Shadows: dark composites with inset highlight */
  --lj-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --lj-shadow-2: 0 1px 3px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --lj-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.50), 0 12px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --lj-shadow-4: 0 8px 16px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lj-shadow-5: 0 16px 32px rgba(0, 0, 0, 0.65), 0 32px 80px rgba(0, 0, 0, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Interactive (dark) */
  --lj-shadow-hover-lift: 0 4px 12px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lj-shadow-press-inset: inset 0 1px 2px rgba(0, 0, 0, 0.40);

  /* ----- Ramp overrides (DARK) ------------------------------------------
   * Light tints (50/100/200) collapse onto warm-black/navy-tinted surfaces
   * so utilities like `bg-red-50`, `bg-emerald-100`, `ring-red-200` do not
   * glow pastel against the dark canvas. Mid-and-deep ramps stay bright
   * enough to read as semantic accents on warm-black surfaces.
   * --------------------------------------------------------------------- */

  /* red */
  --lj-ramp-red-50:  #2C1212;
  --lj-ramp-red-100: #3A1717;
  --lj-ramp-red-200: #4E1D1D;
  --lj-ramp-red-300: #7A2929;
  --lj-ramp-red-500: #F87171;
  --lj-ramp-red-600: #FB7185;
  --lj-ramp-red-700: #FCA5A5;
  --lj-ramp-red-900: #FECACA;
  --lj-ramp-red-950: #FEE2E2;

  /* orange */
  --lj-ramp-orange-50:  #2C1A0E;
  --lj-ramp-orange-100: #3A2110;
  --lj-ramp-orange-200: #4E2A14;
  --lj-ramp-orange-300: #7A4A22;
  --lj-ramp-orange-500: #FB923C;
  --lj-ramp-orange-600: #FDBA74;
  --lj-ramp-orange-700: #FED7AA;
  --lj-ramp-orange-900: #FFEDD5;
  --lj-ramp-orange-950: #FFF7ED;

  /* amber */
  --lj-ramp-amber-50:  #2B1F0A;
  --lj-ramp-amber-100: #3A290D;
  --lj-ramp-amber-200: #4E3712;
  --lj-ramp-amber-300: #7A5A1F;
  --lj-ramp-amber-500: #FBBF24;
  --lj-ramp-amber-600: #FCD34D;
  --lj-ramp-amber-700: #FDE68A;
  --lj-ramp-amber-900: #FEF3C7;
  --lj-ramp-amber-950: #FFFBEB;

  /* blue */
  --lj-ramp-blue-50:  #0F1B3A;
  --lj-ramp-blue-100: #16213A;
  --lj-ramp-blue-200: #1B2D58;
  --lj-ramp-blue-300: #2A4A8F;
  --lj-ramp-blue-500: #5A8AFF;
  --lj-ramp-blue-600: #8DB1FF;
  --lj-ramp-blue-700: #B8CFFF;
  --lj-ramp-blue-900: #DBE7FF;
  --lj-ramp-blue-950: #E8F0FF;

  /* emerald */
  --lj-ramp-emerald-50:  #0E2A1A;
  --lj-ramp-emerald-100: #143A22;
  --lj-ramp-emerald-200: #1B4D2F;
  --lj-ramp-emerald-300: #2A7547;
  --lj-ramp-emerald-500: #4ADE80;
  --lj-ramp-emerald-600: #86EFAC;
  --lj-ramp-emerald-700: #BBF7D0;
  --lj-ramp-emerald-900: #DCFCE7;
  --lj-ramp-emerald-950: #ECFDF5;

  /* purple */
  --lj-ramp-purple-50:  #1F1232;
  --lj-ramp-purple-100: #2A1844;
  --lj-ramp-purple-200: #3A205C;
  --lj-ramp-purple-300: #5A348A;
  --lj-ramp-purple-500: #C084FC;
  --lj-ramp-purple-600: #D8B4FE;
  --lj-ramp-purple-700: #E9D5FF;
  --lj-ramp-purple-900: #F3E8FF;
  --lj-ramp-purple-950: #FAF5FF;

  /* slate */
  --lj-ramp-slate-50:  #131316;
  --lj-ramp-slate-100: #1A1A1F;
  --lj-ramp-slate-200: #26262B;
  --lj-ramp-slate-300: #34343C;
  --lj-ramp-slate-500: #8B95AB;
  --lj-ramp-slate-600: #C6CBD6;
  --lj-ramp-slate-700: #E5E8EE;
  --lj-ramp-slate-900: #F2F4F8;
  --lj-ramp-slate-950: #FFFFFF;
}

/* ---------------------------------------------------------------------------
 * UTILITY: CARDS
 * ------------------------------------------------------------------------- */
.lj-card {
  background: var(--lj-color-surface);
  border: 1px solid var(--lj-color-border);
  border-radius: var(--lj-radius-card);
  box-shadow: var(--lj-shadow-1);
  padding: var(--lj-pad-card);
  transition: var(--lj-tr-hover-lift);
  /* Clip any inner element whose background extends past the rounded edge
     (milestone tag pills, severity dot rings, gradient bands in widgets). */
  overflow: hidden;
}
.lj-card-compact { padding: var(--lj-pad-card-compact); }
.lj-card-spacious { padding: var(--lj-pad-card-spacious); }
.lj-card-hero {
  padding: var(--lj-pad-card-hero);
  border-radius: var(--lj-radius-card-hero);
  box-shadow: var(--lj-shadow-2);
}
.lj-card-elevated {
  background: var(--lj-color-surface-raised);
  border: 1px solid var(--lj-color-border);
  border-radius: var(--lj-radius-card);
  box-shadow: var(--lj-shadow-3);
  padding: var(--lj-pad-card);
}
.lj-card-interactive { cursor: pointer; }
.lj-card-interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--lj-shadow-hover-lift);
}
.lj-card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--lj-shadow-press-inset);
}

/* ---------------------------------------------------------------------------
 * UTILITY: STATUS CHIP (pill with status dot + label).
 * Locks `white-space: nowrap` so the label never breaks into word-per-line
 * on narrow viewports (the engagement chip on the dashboard hero used to
 * wrap to 'Engagement / activo / · / Día / 4 / de / 15' on 375px). Keep
 * this rule strong enough that the chip stays a single visual line even
 * inside a flex-col parent on mobile.
 * ------------------------------------------------------------------------- */
.lj-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-wrap: nowrap;
}
.lj-status-chip svg,
.lj-status-chip .dot,
.lj-status-chip > * {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  /* Belt-and-suspenders: keep nowrap on very narrow screens even if a
     parent flex container tries to shrink children below content size. */
  .lj-status-chip { white-space: nowrap; flex-wrap: nowrap; }
}

/* ---------------------------------------------------------------------------
 * UTILITY: PAGE GRID — 1 col mobile, 2 col tablet, 3 col desktop.
 * Drop-in replacement for ad-hoc Tailwind grid classes on KPI rows.
 * ------------------------------------------------------------------------- */
.lj-page-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .lj-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lj-page-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
 * UTILITY: NUMERIC / KPI STYLES (serif display, tabular-nums)
 * ------------------------------------------------------------------------- */
.lj-stat-number {
  font-family: var(--lj-font-serif);
  font-size: var(--lj-fs-display);
  line-height: var(--lj-lh-display);
  letter-spacing: var(--lj-tracking-display);
  font-weight: var(--lj-fw-light);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lj-color-text-primary);
}
.lj-stat-number-lg {
  font-family: var(--lj-font-serif);
  font-size: var(--lj-fs-5xl);
  line-height: var(--lj-lh-5xl);
  letter-spacing: var(--lj-tracking-5xl);
  font-weight: var(--lj-fw-regular);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lj-color-text-primary);
}
.lj-stat-number-md {
  font-family: var(--lj-font-serif);
  font-size: var(--lj-fs-4xl);
  line-height: var(--lj-lh-4xl);
  letter-spacing: var(--lj-tracking-4xl);
  font-weight: var(--lj-fw-regular);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lj-color-text-primary);
}
.lj-stat-number-sm {
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-2xl);
  line-height: var(--lj-lh-2xl);
  letter-spacing: var(--lj-tracking-2xl);
  font-weight: var(--lj-fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--lj-color-text-primary);
}
.lj-stat-label {
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-xs);
  line-height: var(--lj-lh-xs);
  letter-spacing: var(--lj-tracking-xs);
  font-weight: var(--lj-fw-medium);
  text-transform: uppercase;
  color: var(--lj-color-text-tertiary);
}
.lj-stat-delta {
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-sm);
  font-weight: var(--lj-fw-medium);
  letter-spacing: var(--lj-tracking-sm);
  font-variant-numeric: tabular-nums;
}
.lj-stat-delta-up { color: var(--lj-color-success); }
.lj-stat-delta-down { color: var(--lj-color-danger); }
.lj-table-numeric {
  font-family: var(--lj-font-sans);
  font-size: 13px;
  font-weight: var(--lj-fw-regular);
  letter-spacing: -0.008em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lj-code-inline {
  font-family: var(--lj-font-mono);
  font-size: 12.5px;
  font-weight: var(--lj-fw-regular);
  letter-spacing: 0;
}
/* Block-level <pre class="lj-code"> — used in findings/detail.html evidence + remediation tabs.
 * Without this rule the browser fell back to default <pre> behavior (white-space:pre, NO overflow),
 * causing long HTTP requests / SQLi payloads / JWTs to push the page wider than the viewport
 * and produce horizontal page scroll on mobile (375px). Mirrors `.lj-prose pre` overflow behavior
 * but keeps the locked typography for code-only contexts. */
.lj-code {
  font-family: var(--lj-font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--lj-color-surface-sunken);
  border: 1px solid var(--lj-color-border-subtle);
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
 * UTILITY: BADGES (status, severity, framework)
 * ------------------------------------------------------------------------- */
.lj-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lj-gap-list);
  height: var(--lj-h-badge);
  padding: var(--lj-pad-badge);
  border-radius: var(--lj-radius-badge);
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-xs);
  font-weight: var(--lj-fw-medium);
  letter-spacing: var(--lj-tracking-xs);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lj-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--lj-gap-list);
  padding: var(--lj-pad-pill);
  border-radius: var(--lj-radius-pill);
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-sm);
  font-weight: var(--lj-fw-medium);
}

/* Semantic badge variants */
.lj-badge-success { background: var(--lj-color-success-subtle); color: var(--lj-color-success); border: 1px solid var(--lj-color-success-border); }
.lj-badge-warning { background: var(--lj-color-warning-subtle); color: var(--lj-color-warning); border: 1px solid var(--lj-color-warning-border); }
.lj-badge-danger  { background: var(--lj-color-danger-subtle);  color: var(--lj-color-danger);  border: 1px solid var(--lj-color-danger-border);  }
.lj-badge-info    { background: var(--lj-color-info-subtle);    color: var(--lj-color-info);    border: 1px solid var(--lj-color-info-border);    }
.lj-badge-neutral { background: var(--lj-color-surface-sunken); color: var(--lj-color-text-secondary); border: 1px solid var(--lj-color-border); }

/* Severity (LOCKED — never deviate) */
.lj-badge-sev-info     { background: var(--lj-color-sev-info-bg);     color: var(--lj-color-sev-info);     }
.lj-badge-sev-low      { background: var(--lj-color-sev-low-bg);      color: var(--lj-color-sev-low);      }
.lj-badge-sev-medium   { background: var(--lj-color-sev-medium-bg);   color: var(--lj-color-sev-medium);   }
.lj-badge-sev-high     { background: var(--lj-color-sev-high-bg);     color: var(--lj-color-sev-high);     }
.lj-badge-sev-critical { background: var(--lj-color-sev-critical-bg); color: var(--lj-color-sev-critical); }

/* Framework chips */
.lj-badge-fw-iso     { background: rgba(30, 58, 95, 0.10);  color: var(--lj-color-fw-iso-27001); }
.lj-badge-fw-soc2    { background: rgba(124, 58, 237, 0.10); color: var(--lj-color-fw-soc-2);    }
.lj-badge-fw-nis2    { background: rgba(8, 145, 178, 0.10);  color: var(--lj-color-fw-nis2);     }
.lj-badge-fw-dora    { background: rgba(14, 116, 144, 0.10); color: var(--lj-color-fw-dora);     }
.lj-badge-fw-gdpr    { background: rgba(3, 105, 161, 0.10);  color: var(--lj-color-fw-gdpr);     }
.lj-badge-fw-ens     { background: rgba(180, 83, 9, 0.10);   color: var(--lj-color-fw-ens);      }

/* ---------------------------------------------------------------------------
 * UTILITY: SEVERITY LEFT-BAR (4px colored edge on cards)
 * ------------------------------------------------------------------------- */
.lj-severity-bar { position: relative; padding-left: calc(var(--lj-h-severity-bar) + var(--lj-pad-card)); }
.lj-severity-bar::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--lj-h-severity-bar); border-radius: 0;
}
.lj-severity-bar-info::before     { background: var(--lj-color-sev-info);     }
.lj-severity-bar-low::before      { background: var(--lj-color-sev-low);      }
.lj-severity-bar-medium::before   { background: var(--lj-color-sev-medium);   }
.lj-severity-bar-high::before     { background: var(--lj-color-sev-high);     }
.lj-severity-bar-critical::before { background: var(--lj-color-sev-critical); }

/* ---------------------------------------------------------------------------
 * UTILITY: PRESTIGE GRADIENTS (gold reserved for executive moments)
 * ------------------------------------------------------------------------- */
.lj-gradient-prestige {
  background: linear-gradient(135deg, var(--lj-color-accent-gold-foil) 0%, var(--lj-color-accent-gold) 50%, var(--lj-color-accent-gold-hover) 100%);
  color: var(--lj-color-navy-900);
  box-shadow: var(--lj-shadow-gold-glow);
}
.lj-gradient-navy {
  background: linear-gradient(135deg, var(--lj-color-navy-700) 0%, var(--lj-color-navy-500) 60%, var(--lj-color-navy-400) 100%);
  color: var(--lj-color-text-inverse);
}
.lj-gradient-canvas {
  background: linear-gradient(180deg, var(--lj-color-surface-raised) 0%, var(--lj-color-canvas) 100%);
}

/* ---------------------------------------------------------------------------
 * UTILITY: DIVIDERS
 * ------------------------------------------------------------------------- */
.lj-divider-soft {
  height: 1px;
  background: var(--lj-color-divider);
  border: 0;
  margin: var(--lj-space-4) 0;
}
.lj-divider {
  height: 1px;
  background: var(--lj-color-border);
  border: 0;
  margin: var(--lj-space-6) 0;
}
.lj-divider-strong {
  height: 1px;
  background: var(--lj-color-border-strong);
  border: 0;
  margin: var(--lj-space-8) 0;
}
.lj-divider-vertical {
  width: 1px;
  align-self: stretch;
  background: var(--lj-color-divider);
}

/* ---------------------------------------------------------------------------
 * UTILITY: BUTTONS
 * ------------------------------------------------------------------------- */
.lj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lj-gap-inline);
  height: var(--lj-h-btn-md);
  padding: var(--lj-pad-btn-md);
  border-radius: var(--lj-radius-button);
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-base);
  font-weight: var(--lj-fw-medium);
  letter-spacing: var(--lj-tracking-base);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--lj-tr-color), var(--lj-tr-hover-lift);
  user-select: none;
}
.lj-btn:focus-visible { outline: none; box-shadow: var(--lj-shadow-focus); }
.lj-btn-sm { height: var(--lj-h-btn-sm); padding: var(--lj-pad-btn-sm); font-size: var(--lj-fs-sm); }
.lj-btn-lg { height: var(--lj-h-btn-lg); padding: var(--lj-pad-btn-lg); font-size: var(--lj-fs-md); }

.lj-btn-primary {
  background: var(--lj-color-accent-blue);
  color: var(--lj-color-text-inverse);
}
.lj-btn-primary:hover { background: var(--lj-color-accent-blue-hover); }
.lj-btn-primary:active { background: var(--lj-color-accent-blue-active); box-shadow: var(--lj-shadow-press-inset); }

.lj-btn-secondary {
  background: var(--lj-color-surface);
  color: var(--lj-color-text-primary);
  border-color: var(--lj-color-border-strong);
}
.lj-btn-secondary:hover { background: var(--lj-color-surface-sunken); }

.lj-btn-ghost {
  background: transparent;
  color: var(--lj-color-text-secondary);
}
.lj-btn-ghost:hover { background: var(--lj-color-surface-sunken); color: var(--lj-color-text-primary); }

.lj-btn-danger {
  background: var(--lj-color-danger);
  color: var(--lj-color-text-inverse);
}
.lj-btn-danger:hover { background: var(--lj-color-danger-hover); }
.lj-btn-danger:focus-visible { box-shadow: var(--lj-shadow-focus-danger); }

.lj-btn-prestige {
  background: linear-gradient(135deg, var(--lj-color-accent-gold-foil) 0%, var(--lj-color-accent-gold) 100%);
  color: var(--lj-color-navy-900);
  border-color: var(--lj-color-accent-gold-hover);
  box-shadow: var(--lj-shadow-gold-glow);
}

/* ---------------------------------------------------------------------------
 * UTILITY: INPUTS
 * ------------------------------------------------------------------------- */
.lj-input {
  display: block;
  width: 100%;
  height: var(--lj-h-input-md);
  padding: var(--lj-pad-input-y) var(--lj-pad-input-x);
  background: var(--lj-color-surface);
  color: var(--lj-color-text-primary);
  border: 1px solid var(--lj-color-border-strong);
  border-radius: var(--lj-radius-input);
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-base);
  line-height: var(--lj-lh-base);
  letter-spacing: var(--lj-tracking-base);
  transition: var(--lj-tr-color), var(--lj-tr-focus-ring);
}
.lj-input::placeholder { color: var(--lj-color-text-quaternary); }
.lj-input:focus { outline: none; border-color: var(--lj-color-accent-blue); box-shadow: var(--lj-shadow-focus); }
.lj-input:disabled { background: var(--lj-color-surface-sunken); color: var(--lj-color-text-disabled); cursor: not-allowed; }

/* ---------------------------------------------------------------------------
 * UTILITY: PROGRESS BARS
 * ------------------------------------------------------------------------- */
.lj-progress {
  width: 100%;
  height: var(--lj-h-progress);
  background: var(--lj-color-score-track);
  border-radius: var(--lj-radius-progress);
  overflow: hidden;
}
.lj-progress-fill {
  height: 100%;
  background: var(--lj-color-accent-blue);
  border-radius: var(--lj-radius-progress);
  transition: width var(--lj-dur-slower) var(--lj-ease-out-quart);
}
.lj-progress-fill-success { background: var(--lj-color-success); }
.lj-progress-fill-warning { background: var(--lj-color-warning); }
.lj-progress-fill-danger  { background: var(--lj-color-danger);  }

/* ---------------------------------------------------------------------------
 * UTILITY: FOCUS RING (apply to any element)
 * ------------------------------------------------------------------------- */
.lj-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--lj-shadow-focus);
  border-radius: var(--lj-radius-md);
}

/* ---------------------------------------------------------------------------
 * UTILITY: PROSE (long-form body content, AI Analyst panel)
 * ------------------------------------------------------------------------- */
.lj-prose {
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-md);
  line-height: var(--lj-lh-md);
  letter-spacing: var(--lj-tracking-md);
  color: var(--lj-color-text-secondary);
  max-width: var(--lj-layout-reading-max);
}
.lj-prose h1 {
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-2xl);
  line-height: var(--lj-lh-2xl);
  letter-spacing: var(--lj-tracking-2xl);
  font-weight: var(--lj-fw-medium);
  color: var(--lj-color-text-primary);
  margin: var(--lj-space-8) 0 var(--lj-space-4);
}
.lj-prose h2 {
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-xl);
  line-height: var(--lj-lh-xl);
  letter-spacing: var(--lj-tracking-xl);
  font-weight: var(--lj-fw-medium);
  color: var(--lj-color-text-primary);
  margin: var(--lj-space-6) 0 var(--lj-space-3);
}
.lj-prose h3 {
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-lg);
  line-height: var(--lj-lh-lg);
  letter-spacing: var(--lj-tracking-lg);
  font-weight: var(--lj-fw-medium);
  color: var(--lj-color-text-primary);
  margin: var(--lj-space-5) 0 var(--lj-space-2);
}
.lj-prose p { margin: 0 0 var(--lj-space-4); }
.lj-prose a {
  color: var(--lj-color-accent-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: var(--lj-tr-color);
}
.lj-prose a:hover { color: var(--lj-color-accent-blue-hover); }
.lj-prose strong { color: var(--lj-color-text-primary); font-weight: var(--lj-fw-semibold); }
.lj-prose code {
  font-family: var(--lj-font-mono);
  font-size: 12.5px;
  background: var(--lj-color-surface-sunken);
  border: 1px solid var(--lj-color-border-subtle);
  border-radius: var(--lj-radius-xs);
  padding: 1px 6px;
}
.lj-prose pre {
  background: var(--lj-color-surface-sunken);
  border: 1px solid var(--lj-color-border);
  border-radius: var(--lj-radius-md);
  padding: var(--lj-space-4);
  overflow-x: auto;
}
.lj-prose ul, .lj-prose ol { margin: 0 0 var(--lj-space-4); padding-left: var(--lj-space-6); }
.lj-prose li { margin-bottom: var(--lj-space-2); }
.lj-prose blockquote {
  border-left: 3px solid var(--lj-color-accent-blue);
  padding-left: var(--lj-space-4);
  color: var(--lj-color-text-tertiary);
  margin: var(--lj-space-4) 0;
}

/* ---------------------------------------------------------------------------
 * UTILITY: SURFACES (canvas, sunken, raised — for layout)
 * ------------------------------------------------------------------------- */
.lj-surface-canvas { background: var(--lj-color-canvas); }
.lj-surface { background: var(--lj-color-surface); }
.lj-surface-raised { background: var(--lj-color-surface-raised); }
.lj-surface-sunken { background: var(--lj-color-surface-sunken); }

/* ---------------------------------------------------------------------------
 * UTILITY: TEXT UTILITIES
 * ------------------------------------------------------------------------- */
.lj-text-primary    { color: var(--lj-color-text-primary);    }
.lj-text-secondary  { color: var(--lj-color-text-secondary);  }
.lj-text-tertiary   { color: var(--lj-color-text-tertiary);   }
.lj-text-quaternary { color: var(--lj-color-text-quaternary); }
.lj-text-disabled   { color: var(--lj-color-text-disabled);   }
.lj-text-inverse    { color: var(--lj-color-text-inverse);    }

.lj-eyebrow {
  font-family: var(--lj-font-sans);
  font-size: var(--lj-fs-xs);
  font-weight: var(--lj-fw-medium);
  letter-spacing: var(--lj-tracking-xs);
  text-transform: uppercase;
  color: var(--lj-color-text-tertiary);
}

/* ---------------------------------------------------------------------------
 * UTILITY: REDUCED MOTION HONOR
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
 * USER-REPORTED VISUAL FIXES — 2026-06-14
 * Surgical overrides for: risk_gauge overlaps, severity_distribution legend
 * spacing, compliance radar grid, trend_area card height, milestone_timeline
 * spacing, risk_heatmap legend clarity, report hero clipping.
 * ========================================================================= */

/* --- 1) risk_gauge: remove cluttered tick numerals + tighten internals --- */
.lj-risk-gauge text[data-tick],
.lj-risk-gauge .lj-gauge-tick-label,
.lj-risk-gauge text.tick-label {
  display: none !important;
}
.lj-risk-gauge .lj-gauge-label { font-size: 0.7rem !important; letter-spacing: 0.08em !important; }

/* --- 2) severity_distribution legend: clear gap between dot / label / value --- */
.lj-severity-distribution [role="list"] { gap: 1rem 1.25rem !important; }
.lj-severity-distribution [role="listitem"] {
  display: inline-flex !important; align-items: center !important;
  gap: 0.5rem !important; white-space: nowrap !important;
  padding: 0.125rem 0.25rem;
}
.lj-severity-distribution [role="listitem"] > * + * { margin-left: 0.125rem; }
.lj-severity-distribution [role="listitem"] svg,
.lj-severity-distribution [role="listitem"] .lj-sd-dot,
.lj-severity-distribution [role="listitem"] [style*="border-radius"]:first-child {
  flex-shrink: 0 !important; margin-right: 0.375rem !important;
}

/* --- 3) compliance_radar — already disabled grid_labels in template;
 *    keep axis labels clean and inside container --- */
.lj-radar svg { overflow: visible !important; }
.lj-radar text.lj-radar-grid-label { display: none !important; }

/* --- 4) trend_area: don't force card to stretch above content height ----- */
.lj-card .lj-trend-area,
.lj-card .lj-widget.lj-trend-area { padding-bottom: 0 !important; }
.lj-card:has(.lj-trend-area) { display: flex; flex-direction: column; }

/* --- 5) milestone_timeline: more breathing room between items ------------ */
.lj-milestone-timeline .lj-mt-gap > li + li { margin-top: 2.5rem !important; }
.lj-milestone-timeline .lj-mt-gap-compact > li + li { margin-top: 1.75rem !important; }
.lj-milestone-timeline .lj-mt-card { padding: 1.125rem 1.25rem !important; }
.lj-milestone-timeline .lj-mt-title { margin-bottom: 0.5rem !important; font-size: 0.9375rem !important; }
.lj-milestone-timeline .lj-mt-desc { margin-top: 0.5rem !important; line-height: 1.55 !important; font-size: 0.8125rem !important; }
.lj-milestone-timeline .lj-mt-meta { margin-top: 0.625rem !important; gap: 0.625rem !important; }
.lj-milestone-timeline .lj-mt-tag { margin-bottom: 0.5rem !important; }

/* --- 6) risk_heatmap: legend always visible + readable -------------------- */
.lj-heatmap, .lj-risk-heatmap { display: block; }
.lj-heatmap [role="list"], .lj-risk-heatmap [role="list"],
.lj-heatmap .lj-heatmap-legend, .lj-risk-heatmap .lj-rh-legend {
  display: flex !important; align-items: center !important;
  gap: 0.75rem 1rem !important; flex-wrap: wrap !important;
  margin-top: 1.25rem !important; padding-top: 1rem !important;
  border-top: 1px solid var(--lj-color-border-subtle, #E5E7EB) !important;
  font-size: 0.8125rem !important; color: var(--lj-color-text-secondary) !important;
}
.lj-heatmap [role="listitem"], .lj-risk-heatmap [role="listitem"] {
  display: inline-flex !important; align-items: center !important;
  gap: 0.375rem !important; white-space: nowrap !important;
}
.lj-heatmap svg text, .lj-risk-heatmap svg text { font-size: 11px !important; }

/* --- 7) reports list hero card: no clipping, full content visible -------- */
.lj-reports-hero, .lj-report-card-hero,
article[class*="report"][class*="hero"] {
  overflow: visible !important;
}
.lj-reports-hero img,
.lj-reports-hero .lj-report-cover { max-width: 100% !important; height: auto !important; }