/* ============================================================================
   OmniPatch console — DESIGN TOKENS (reskin of the NGIT AppKit template).
   Only the brand ramp + a few semantic aliases change; every component style
   in app.css is untouched, so OmniPatch reads as one product with the suite.
   Light is default; [data-theme="dark"] remaps the SAME names.
   ============================================================================ */
:root {
  /* Brand ramp — OmniPatch teal-blue (in the corporate-blue family, 500 anchor) */
  --color-brand-50:  #e9f6f8;
  --color-brand-100: #c9eaef;
  --color-brand-200: #98d6df;
  --color-brand-300: #5fb9c8;
  --color-brand-400: #2f97ab;
  --color-brand-500: #157a90;   /* anchor */
  --color-brand-600: #106377;
  --color-brand-700: #0d4f60;
  --color-brand-800: #0b3f4d;
  --color-brand-900: #082c37;

  /* Neutrals (cool slate) */
  --color-neutral-0:  #ffffff;
  --color-neutral-50: #f7f9fb;
  --color-neutral-100:#eef1f5;
  --color-neutral-200:#e2e7ee;
  --color-neutral-300:#cbd3de;
  --color-neutral-400:#9aa6b6;
  --color-neutral-500:#6b7787;
  --color-neutral-600:#4d5766;
  --color-neutral-700:#39424e;
  --color-neutral-800:#232a33;
  --color-neutral-900:#151a20;

  /* Status */
  --color-success-bg:#e7f6ec; --color-success-fg:#1b7a3d; --color-success-solid:#22a355;
  --color-warning-bg:#fdf0dc; --color-warning-fg:#9a5b06; --color-warning-solid:#e08a1e;
  --color-danger-bg: #fdE7e7; --color-danger-fg: #b3261e; --color-danger-solid:#e0362c;
  --color-info-bg:   #e6eefb; --color-info-fg:   #1d4fa3; --color-info-solid:#2f6fe0;
  --color-yellow-bg: #fbf6d9; --color-yellow-fg: #85670a; --color-yellow-solid:#e6c020;

  /* Risk / severity ramp (bg / fg / solid) — distinct from status */
  --risk-critical-bg:#f6d9dc; --risk-critical-fg:#8f1a22; --risk-critical-solid:#c62234;
  --risk-high-bg:    #fbe2d6; --risk-high-fg:    #9a3d10; --risk-high-solid:#e2662a;
  --risk-medium-bg:  #fbf1d6; --risk-medium-fg:  #8a6207; --risk-medium-solid:#e0a81e;
  --risk-low-bg:     #e3f0e4; --risk-low-fg:     #2f6d38; --risk-low-solid:#4f9a58;
  --risk-none-bg:    #e7ebf0; --risk-none-fg:    #566072; --risk-none-solid:#8b96a6;

  /* Categorical chart palette */
  --chart-cat-1:#157a90; --chart-cat-2:#2aa9a1; --chart-cat-3:#7a5cd0; --chart-cat-4:#d6607f;
  --chart-grid:var(--color-neutral-200); --chart-track:var(--color-neutral-100);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --text-xs:12px; --text-sm:13px; --text-md:14px; --text-lg:16px; --text-xl:20px;
  --text-2xl:24px; --text-3xl:30px; --text-4xl:38px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --leading-tight:1.25; --leading-normal:1.5;

  /* Spacing (4px base) */
  --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;

  /* Radius / border / elevation / motion */
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-xl:14px; --radius-full:999px;
  --border-w:1px;
  --shadow-xs:0 1px 2px rgba(21,26,32,.06);
  --shadow-sm:0 1px 3px rgba(21,26,32,.08),0 1px 2px rgba(21,26,32,.06);
  --shadow-md:0 4px 12px rgba(21,26,32,.10);
  --shadow-lg:0 12px 32px rgba(21,26,32,.16);
  --motion-fast:150ms; --motion-base:200ms; --easing:cubic-bezier(.2,.6,.2,1);

  /* Semantic aliases (components use ONLY these) */
  --color-bg:        var(--color-neutral-50);
  --color-surface:   var(--color-neutral-0);
  --color-surface-2: var(--color-neutral-50);
  --color-border:    var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-text:      var(--color-neutral-900);
  --color-text-muted:var(--color-neutral-500);
  --color-primary:   var(--color-brand-500);
  --color-primary-hover: var(--color-brand-600);
  --color-on-primary:#ffffff;
  --color-focus-ring: rgba(21,122,144,.45);

  --shell-topbar-h:56px;
  --shell-nav-w:300px;
  --content-pad:24px;
}

:root[data-theme="dark"] {
  --color-bg:        #0f141a;
  --color-surface:   #161c24;
  --color-surface-2: #1c232d;
  --color-border:    #2a323d;
  --color-border-strong:#3a444f;
  --color-text:      #e7ecf2;
  --color-text-muted:#93a0b0;
  --color-primary:   #3aa7bd;
  --color-primary-hover:#54bccf;
  --color-on-primary:#0f141a;
  --color-focus-ring: rgba(58,167,189,.5);

  --color-success-bg:#12301f; --color-success-fg:#5cd08a;
  --color-warning-bg:#332413; --color-warning-fg:#e6b26a;
  --color-danger-bg: #351a1a; --color-danger-fg: #ef8a84;
  --color-info-bg:   #16233c; --color-info-fg:   #7aa8ea;
  --color-yellow-bg: #2f2a12; --color-yellow-fg: #e6d06a;

  --risk-critical-bg:#3a1720; --risk-critical-fg:#f08a97;
  --risk-high-bg:    #35200f; --risk-high-fg:    #f0a074;
  --risk-medium-bg:  #302811; --risk-medium-fg:  #e6c463;
  --risk-low-bg:     #16281a; --risk-low-fg:     #7cc088;
  --risk-none-bg:    #212832; --risk-none-fg:    #9aa6b6;

  --chart-grid:#2a323d; --chart-track:#212832;
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --shadow-md:0 6px 16px rgba(0,0,0,.5);
  --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast:0ms; --motion-base:0ms; }
}