/* ============================================================
   Tenable Cloud Security - design tokens
   Extracted from the live TCS console (app.tenable.com), light
   theme, 2026-08-21. Values are measured computed styles, not
   estimates. See references/palette.md for provenance per group.

   IMPORTANT: the console sets html{font-size:12px}, so its own
   rem tokens are 12px-based. Everything below is already
   converted to px so this file is safe to drop into any page
   without inheriting that root-size assumption.
   ============================================================ */

:root {
  /* Brand */
  --tcs-brand-primary: #1e2426;
  --tcs-brand-highlight: #e6fd38;
  --tcs-brand-blue: #4ea5ff;
  --tcs-brand-green: #71ffc6;
  --tcs-brand-orange: #ff8837;
  --tcs-brand-purple: #bb8ff2;
  --tcs-brand-text: #0b1b29;

  /* Page & surface (light) */
  --tcs-page: #f2f5f8;
  --tcs-surface: #ffffff;
  --tcs-surface-raised: #ffffff;
  --tcs-surface-sunken: #f6f9fb;
  --tcs-surface-muted: #f2f5f8;
  --tcs-surface-strong: #ecf1f4;
  --tcs-surface-stronger: #e3eaef;

  /* Text (light) */
  --tcs-text-primary: #000000;
  --tcs-text-secondary: #2e4659;
  --tcs-text-tertiary: #61798c;
  --tcs-text-disabled: #a9becf;
  --tcs-text-invert: #ffffff;
  --tcs-text-link: #0b1b29;
  --tcs-text-link-hover: #0052a3;
  --tcs-text-selected: #046dd6;

  /* Border (light) */
  --tcs-border: #e3eaef;
  --tcs-border-mild: #ecf1f4;
  --tcs-border-secondary: #bdcdda;
  --tcs-border-strong: #000000;
  --tcs-border-focus: #1e8fff;

  /* Accent (interactive) */
  --tcs-accent-100: #ebf5ff;
  --tcs-accent-200: #d7ebff;
  --tcs-accent-300: #a5d2ff;
  --tcs-accent-400: #62b0ff;
  --tcs-accent-500: #1e8fff;
  --tcs-accent-600: #046dd6;
  --tcs-accent-700: #0052a3;
  --tcs-accent-800: #003d7a;
  --tcs-accent-900: #002952;

  /* Severity (charts + fills) */
  --tcs-sev-critical: #e0004d;
  --tcs-sev-high: #f77559;
  --tcs-sev-medium: #ffb633;
  --tcs-sev-low: #ffe26f;
  --tcs-sev-info: #1e8fff;
  --tcs-sev-none: #bdcdda;
  --tcs-sev-good: #1ad1a3;
  --tcs-sev-other: #a87df2;

  /* Status ramps (light) */
  --tcs-status-critical-100: #fff3f6;
  --tcs-status-critical-200: #ffe1e7;
  --tcs-status-critical-600: #e0004d;
  --tcs-status-critical-700: #c00042;
  --tcs-status-critical-800: #9a0035;
  --tcs-status-severe-100: #feebe7;
  --tcs-status-severe-200: #fdd8d0;
  --tcs-status-severe-600: #c22b0a;
  --tcs-status-severe-700: #8d1f07;
  --tcs-status-severe-800: #571305;
  --tcs-status-warning-100: #fff6e5;
  --tcs-status-warning-200: #ffedcc;
  --tcs-status-warning-600: #cc7100;
  --tcs-status-warning-700: #993e00;
  --tcs-status-warning-800: #660b00;
  --tcs-status-notice-100: #fffbea;
  --tcs-status-notice-200: #fff3c1;
  --tcs-status-notice-600: #cca300;
  --tcs-status-notice-700: #b28900;
  --tcs-status-notice-800: #805700;
  --tcs-status-secure-100: #f0fcf9;
  --tcs-status-secure-200: #d6f7ef;
  --tcs-status-secure-600: #00cc99;
  --tcs-status-secure-700: #00946f;
  --tcs-status-secure-800: #005c45;
  --tcs-status-info-100: #ebf5ff;
  --tcs-status-info-200: #d7ebff;
  --tcs-status-info-600: #046dd6;
  --tcs-status-info-700: #0052a3;
  --tcs-status-info-800: #003d7a;
  --tcs-status-other-100: #ece3fc;
  --tcs-status-other-200: #e1d2fa;
  --tcs-status-other-600: #7845d1;
  --tcs-status-other-700: #5b23bd;
  --tcs-status-other-800: #4a199f;

  /* Indicator chips (light) */
  --tcs-ind-red-fg: #c00042;
  --tcs-ind-red-bg: #e0004d14;
  --tcs-ind-red-bd: #e0004d1f;
  --tcs-ind-orange-fg: #c22b0a;
  --tcs-ind-orange-bg: #f44e2a14;
  --tcs-ind-orange-bd: #f44e2a1f;
  --tcs-ind-amber-fg: #660b00;
  --tcs-ind-amber-bg: #ffa4001f;
  --tcs-ind-amber-bd: #ffa4001f;
  --tcs-ind-yellow-fg: #805700;
  --tcs-ind-yellow-bg: #ffd63129;
  --tcs-ind-yellow-bd: #ffd63129;
  --tcs-ind-lime-fg: #368212;
  --tcs-ind-lime-bg: #68d9331f;
  --tcs-ind-lime-bd: #68d9331f;
  --tcs-ind-green-fg: #005c45;
  --tcs-ind-green-bg: #1ad1a31f;
  --tcs-ind-green-bd: #1ad1a31f;
  --tcs-ind-aqua-fg: #108188;
  --tcs-ind-aqua-bg: #15aeb41f;
  --tcs-ind-aqua-bd: #15aeb41f;
  --tcs-ind-blue-fg: #046dd6;
  --tcs-ind-blue-bg: #1e8fff1f;
  --tcs-ind-blue-bd: #1e8fff1f;
  --tcs-ind-purple-fg: #5b23bd;
  --tcs-ind-purple-bg: #874fe71f;
  --tcs-ind-purple-bd: #874fe71f;
  --tcs-ind-lilac-fg: #7c0891;
  --tcs-ind-lilac-bg: #b637c91f;
  --tcs-ind-lilac-bd: #b637c91f;
  --tcs-ind-pink-fg: #b00069;
  --tcs-ind-pink-bg: #ca0a821f;
  --tcs-ind-pink-bd: #ca0a821f;
  --tcs-ind-grey-fg: #2e4659;
  --tcs-ind-grey-bg: #f2f5f8;
  --tcs-ind-grey-bd: #f2f5f8;

  /* Categorical (charts) */
  --tcs-cat-1: #75dee3;
  --tcs-cat-2: #15aeb4;
  --tcs-cat-3: #0a545a;
  --tcs-cat-4: #c3f0ad;
  --tcs-cat-5: #68d933;
  --tcs-cat-6: #368212;
  --tcs-cat-7: #fe9eda;
  --tcs-cat-8: #fd3db5;
  --tcs-cat-9: #ca0a82;
  --tcs-cat-10: #da8be9;
  --tcs-cat-11: #b637cd;
  --tcs-cat-12: #7c0891;
  --tcs-cat-13: #a5d2ff;
  --tcs-cat-14: #62b0ff;
  --tcs-cat-15: #1e8fff;
  --tcs-cat-16: #046dd6;
  --tcs-cat-17: #0052a3;

  /* Heatmap */
  --tcs-heat-minor: #e0004d1f;
  --tcs-heat-moderate: #e0004d3d;
  --tcs-heat-major: #e0004da3;
  --tcs-heat-severe: #e0004d;

  /* spacing scale (console rem x 12) */
  --tcs-space-3xs: 2px;
  --tcs-space-2xs: 4px;
  --tcs-space-xs: 6px;
  --tcs-space-sm: 8px;
  --tcs-space-md: 12px;
  --tcs-space-lg: 16px;
  --tcs-space-xl: 24px;
  --tcs-space-2xl: 32px;
  --tcs-space-3xl: 40px;
  --tcs-space-4xl: 48px;
  --tcs-space-5xl: 56px;
  --tcs-space-6xl: 64px;

  /* radius */
  --tcs-radius-2xs: 2px;
  --tcs-radius-xs: 4px;
  --tcs-radius-sm: 6px;
  --tcs-radius-md: 8px;
  --tcs-radius-lg: 12px;
  --tcs-radius-xl: 16px;
  --tcs-radius-pill: 999px;

  /* elevation */
  --tcs-shadow-2xs: 0px 0px 1px 0px #0000003d;
  --tcs-shadow-xs: 0px 2px 4px 0px #0000003d;
  --tcs-shadow-sm: 0px 6px 20px 0px #00000014;
  --tcs-shadow-md: 0px 4px 20px 0px #0000001f;
  --tcs-shadow-lg: 0px 10px 20px 0px #00000029;
  --tcs-shadow-xl: 0px 10px 72px 0px #00000029;
  --tcs-shadow-card: 0 6px 12px 0 rgba(0,0,0,0.10);

  /* type */
  --tcs-font-sans: "Inter", "Inter var", -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tcs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --tcs-text-xs:   12px;  --tcs-leading-xs:   16px;
  --tcs-text-sm:   13px;  --tcs-leading-sm:   18px;
  --tcs-text-base: 14px;  --tcs-leading-base: 20px;
  --tcs-text-md:   16px;  --tcs-leading-md:   24px;
  --tcs-text-lg:   20px;  --tcs-leading-lg:   28px;
  --tcs-text-xl:   24px;  --tcs-leading-xl:   32px;
  --tcs-text-2xl:  32px;  --tcs-leading-2xl:  40px;
  --tcs-text-kpi:  34px;  --tcs-leading-kpi:  40px;

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

  /* semantic aliases - use these in components, not raw ramps */
  --tcs-bg:            var(--tcs-page);
  --tcs-bg-card:       var(--tcs-surface);
  --tcs-fg:            var(--tcs-text-primary);
  --tcs-fg-muted:      var(--tcs-text-secondary);
  --tcs-rule:          var(--tcs-border);
  --tcs-focus-ring:    0 0 0 3px color-mix(in srgb, var(--tcs-border-focus) 35%, transparent);
}

/* ------------------------------------------------------------
   Dark mode. DERIVED, NOT MEASURED: the console's dark primitive
   ramps (--surface-dark-*, --ink-dark-*, --accent-dark-*,
   --status-dark-*) were captured verbatim, but the semantic
   aliases that map them were only resolvable in light mode. The
   ramp values below are exact; the assignment of ramp step to
   semantic role is a reasoned inference. Verify before shipping
   a dark deliverable to a customer.
   ------------------------------------------------------------ */
[data-tcs-theme="dark"] {
  /* Surface (dark) */
  --tcs-dk-surface-100: #101013;
  --tcs-dk-surface-200: #18181b;
  --tcs-dk-surface-250: #1e1e20;
  --tcs-dk-surface-300: #27272a;
  --tcs-dk-surface-400: #3f3f46;
  --tcs-dk-surface-500: #52525c;
  --tcs-dk-surface-600: #71717b;
  --tcs-dk-surface-700: #9f9fa9;
  --tcs-dk-surface-800: #d4d4d8;
  --tcs-dk-surface-900: #e4e4e7;

  /* Ink (dark) */
  --tcs-dk-ink-100: #8b8d92;
  --tcs-dk-ink-200: #9a9b9f;
  --tcs-dk-ink-300: #a8a9ad;
  --tcs-dk-ink-400: #b6b7ba;
  --tcs-dk-ink-500: #c4c5c8;
  --tcs-dk-ink-600: #d3d3d5;
  --tcs-dk-ink-700: #e1e2e3;
  --tcs-dk-ink-800: #eff0f0;
  --tcs-dk-ink-900: #ffffff;

  /* Accent (dark) */
  --tcs-dk-accent-100: #202f41;
  --tcs-dk-accent-300: #194470;
  --tcs-dk-accent-500: #13589f;
  --tcs-dk-accent-700: #0c6dce;
  --tcs-dk-accent-900: #0582ff;
  --tcs-dk-accent-1000: #2090ff;
  --tcs-dk-accent-1100: #3c9dff;
  --tcs-dk-accent-1200: #58abff;

  /* Status (dark) */
  --tcs-dk-status-critical-100: #402c34;
  --tcs-dk-status-critical-200: #532b34;
  --tcs-dk-status-critical-900: #d31f37;
  --tcs-dk-status-critical-1000: #df5d6f;
  --tcs-dk-status-critical-1100: #e78693;
  --tcs-dk-status-severe-100: #442f2f;
  --tcs-dk-status-severe-200: #5a312b;
  --tcs-dk-status-severe-900: #f44e2a;
  --tcs-dk-status-severe-1000: #f77559;
  --tcs-dk-status-severe-1100: #f88971;
  --tcs-dk-status-warning-100: #453c2d;
  --tcs-dk-status-warning-200: #5d4927;
  --tcs-dk-status-warning-900: #ffad1a;
  --tcs-dk-status-warning-1000: #ffbf4d;
  --tcs-dk-status-warning-1100: #ffd180;
  --tcs-dk-status-notice-100: #454233;
  --tcs-dk-status-notice-200: #5d5533;
  --tcs-dk-status-notice-900: #ffd631;
  --tcs-dk-status-notice-1000: #ffe26f;
  --tcs-dk-status-notice-1100: #ffeb98;
  --tcs-dk-status-secure-100: #274542;
  --tcs-dk-status-secure-200: #225a50;
  --tcs-dk-status-secure-900: #00edb1;
  --tcs-dk-status-secure-1000: #4df2c8;
  --tcs-dk-status-secure-1100: #80f6d8;
  --tcs-dk-status-info-100: #202f41;
  --tcs-dk-status-info-200: #1c3959;
  --tcs-dk-status-info-900: #0582ff;
  --tcs-dk-status-info-1000: #2090ff;
  --tcs-dk-status-info-1100: #3c9dff;
  --tcs-dk-status-other-100: #39334b;
  --tcs-dk-status-other-200: #443861;
  --tcs-dk-status-other-900: #aa7bfc;
  --tcs-dk-status-other-1000: #bb95fd;
  --tcs-dk-status-other-1100: #ccb0fd;

  /* Status alpha (dark) */
  --tcs-dk-status-critical-a200: #d31f371f;
  --tcs-dk-status-critical-a300: #d31f3729;
  --tcs-dk-status-severe-a200: #dd39161f;
  --tcs-dk-status-severe-a300: #dd391629;
  --tcs-dk-status-warning-a200: #ffad1a1f;
  --tcs-dk-status-warning-a300: #ffad1a29;
  --tcs-dk-status-notice-a200: #ffd6311f;
  --tcs-dk-status-notice-a300: #ffd63129;
  --tcs-dk-status-secure-a200: #00edb11f;
  --tcs-dk-status-secure-a300: #00edb129;
  --tcs-dk-status-info-a200: #0582ff1f;
  --tcs-dk-status-info-a300: #0582ff29;
  --tcs-dk-status-other-a200: #955afb1f;
  --tcs-dk-status-other-a300: #955afb29;

  /* semantic remap */
  --tcs-page:            var(--tcs-dk-surface-100);
  --tcs-surface:         var(--tcs-dk-surface-200);
  --tcs-surface-raised:  var(--tcs-dk-surface-250);
  --tcs-surface-sunken:  var(--tcs-dk-surface-100);
  --tcs-surface-muted:   var(--tcs-dk-surface-300);
  --tcs-surface-strong:  var(--tcs-dk-surface-300);
  --tcs-surface-stronger:var(--tcs-dk-surface-400);
  --tcs-status-critical-700: var(--tcs-dk-status-critical-900);
  --tcs-accent-600:      var(--tcs-dk-accent-900);
  --tcs-accent-700:      var(--tcs-dk-accent-1000);
  --tcs-text-primary:    var(--tcs-dk-ink-900);
  --tcs-text-secondary:  var(--tcs-dk-ink-600);
  --tcs-text-tertiary:   var(--tcs-dk-ink-400);
  --tcs-text-disabled:   var(--tcs-dk-ink-100);
  --tcs-text-invert:     var(--tcs-dk-surface-100);
  --tcs-text-link:       var(--tcs-dk-accent-1100);
  --tcs-text-link-hover: var(--tcs-dk-accent-1200);
  --tcs-text-selected:   var(--tcs-dk-accent-1000);
  --tcs-border:          var(--tcs-dk-surface-300);
  --tcs-border-mild:     var(--tcs-dk-surface-250);
  --tcs-border-secondary:var(--tcs-dk-surface-400);
  --tcs-border-strong:   var(--tcs-dk-ink-900);
  --tcs-border-focus:    var(--tcs-dk-accent-1000);

  /* severity holds its hue in dark, shifted to the dark ramp so it
     stays legible on #101013 - a "High" is still orange either way */
  --tcs-sev-critical: var(--tcs-dk-status-critical-1000);
  --tcs-sev-high:     var(--tcs-dk-status-severe-1000);
  --tcs-sev-medium:   var(--tcs-dk-status-warning-1000);
  --tcs-sev-low:      var(--tcs-dk-status-notice-1000);
  --tcs-sev-info:     var(--tcs-dk-status-info-1000);
  --tcs-sev-good:     var(--tcs-dk-status-secure-1000);
  --tcs-sev-other:    var(--tcs-dk-status-other-1000);
  --tcs-sev-none:     var(--tcs-dk-surface-500);

  /* Indicator chips must be remapped for dark, or they inherit the light
     foregrounds and become unreadable: #c00042 on #18181b is 1.87:1.
     Step 1000 of each dark ramp was chosen because it is the lowest step
     that clears WCAG AA (>=4.5:1) on the dark card for every family --
     critical 5.01, severe 6.45, warning 10.81, notice 13.80, secure 12.53,
     info 5.48, other 7.45. */
  --tcs-ind-red-fg:    var(--tcs-dk-status-critical-1000);
  --tcs-ind-red-bg:    var(--tcs-dk-status-critical-a200);
  --tcs-ind-red-bd:    var(--tcs-dk-status-critical-a300);
  --tcs-ind-orange-fg: var(--tcs-dk-status-severe-1000);
  --tcs-ind-orange-bg: var(--tcs-dk-status-severe-a200);
  --tcs-ind-orange-bd: var(--tcs-dk-status-severe-a300);
  --tcs-ind-amber-fg:  var(--tcs-dk-status-warning-1000);
  --tcs-ind-amber-bg:  var(--tcs-dk-status-warning-a200);
  --tcs-ind-amber-bd:  var(--tcs-dk-status-warning-a300);
  --tcs-ind-yellow-fg: var(--tcs-dk-status-notice-1000);
  --tcs-ind-yellow-bg: var(--tcs-dk-status-notice-a200);
  --tcs-ind-yellow-bd: var(--tcs-dk-status-notice-a300);
  --tcs-ind-green-fg:  var(--tcs-dk-status-secure-1000);
  --tcs-ind-green-bg:  var(--tcs-dk-status-secure-a200);
  --tcs-ind-green-bd:  var(--tcs-dk-status-secure-a300);
  --tcs-ind-lime-fg:   var(--tcs-dk-status-secure-1000);
  --tcs-ind-lime-bg:   var(--tcs-dk-status-secure-a200);
  --tcs-ind-lime-bd:   var(--tcs-dk-status-secure-a300);
  --tcs-ind-aqua-fg:   var(--tcs-dk-status-secure-1100);
  --tcs-ind-aqua-bg:   var(--tcs-dk-status-secure-a200);
  --tcs-ind-aqua-bd:   var(--tcs-dk-status-secure-a300);
  --tcs-ind-blue-fg:   var(--tcs-dk-status-info-1000);
  --tcs-ind-blue-bg:   var(--tcs-dk-status-info-a200);
  --tcs-ind-blue-bd:   var(--tcs-dk-status-info-a300);
  --tcs-ind-purple-fg: var(--tcs-dk-status-other-1000);
  --tcs-ind-purple-bg: var(--tcs-dk-status-other-a200);
  --tcs-ind-purple-bd: var(--tcs-dk-status-other-a300);
  --tcs-ind-lilac-fg:  var(--tcs-dk-status-other-1100);
  --tcs-ind-lilac-bg:  var(--tcs-dk-status-other-a200);
  --tcs-ind-lilac-bd:  var(--tcs-dk-status-other-a300);
  --tcs-ind-pink-fg:   var(--tcs-dk-status-critical-1100);
  --tcs-ind-pink-bg:   var(--tcs-dk-status-critical-a200);
  --tcs-ind-pink-bd:   var(--tcs-dk-status-critical-a300);
  --tcs-ind-grey-fg:   var(--tcs-dk-ink-400);
  --tcs-ind-grey-bg:   var(--tcs-dk-surface-300);
  --tcs-ind-grey-bd:   var(--tcs-dk-surface-400);

  /* heatmap needs the dark critical hue, not the light one */
  --tcs-heat-minor:    var(--tcs-dk-status-critical-a200);
  --tcs-heat-moderate: var(--tcs-dk-status-critical-a300);
  --tcs-heat-major:    var(--tcs-dk-status-critical-1000);
  --tcs-heat-severe:   var(--tcs-dk-status-critical-1100);
}