/* ============================================================================
   OSSUS theme for the Defender dashboard.
   OSSUS is the single, always-on design language, so this mapping applies at
   :root for every page regardless of the light/dark choice. It maps the OSSUS
   design tokens (ossus-tokens.css) onto the dashboard's token names so every
   component that reads var(--canvas) / var(--accent) / var(--sev-*) re-skins to
   OSSUS automatically. The primitives themselves flip between the light and
   dark palettes (see ossus-tokens.css), so most of this mapping is palette-
   agnostic; the html[data-theme="dark"] block below only re-points the handful
   of values that are literal (rather than var()) here.
   Every value resolves to an OSSUS token, per brand-lock.
   Load order: defender.css -> ossus-tokens.css -> ossus-theme.css.
   ========================================================================== */
:root {
  /* Surfaces */
  --canvas:         var(--color-bg);
  --canvas-2:       #EDF1EF;
  --surface:        var(--color-paper);
  --surface-raised: var(--color-paper);
  --surface-sunken: var(--color-table-header);
  --surface-hover:  #F1F5F2;

  /* Hairlines */
  --border:        var(--color-card-border);
  --border-strong: #D1D5DB;
  --border-faint:  #EEF1F3;

  /* Text */
  --text:       var(--color-text-primary);
  --text-2:     var(--color-text-secondary);
  --text-muted: rgba(38, 43, 67, 0.5);
  --text-faint: var(--color-text-disabled);

  /* Brand accent — OSSUS green */
  --accent:        var(--color-primary);
  --accent-hover:  var(--color-primary-dark);
  --accent-active: #2C4F3B;
  --accent-soft:   rgba(62, 120, 82, 0.12);
  --accent-softer: rgba(62, 120, 82, 0.06);
  --accent-ring:   rgba(62, 120, 82, 0.26);
  --accent-glow:   rgba(62, 120, 82, 0.20);
  --on-accent:     #FFFFFF;
  --accent-2:      var(--color-info);

  /* Severity */
  --sev-critical:  var(--color-error);
  --sev-high:      var(--color-warning);
  --sev-medium:    var(--severity-medium);
  --sev-low:       var(--color-info);
  --sev-info:      var(--severity-info);
  --sev-critical-bg: rgba(201, 32, 44, 0.10);
  --sev-high-bg:     rgba(247, 121, 40, 0.12);
  --sev-medium-bg:   rgba(184, 134, 0, 0.12);
  --sev-low-bg:      rgba(29, 100, 216, 0.10);
  --sev-info-bg:     rgba(107, 114, 128, 0.10);

  /* Semantic states */
  --verified:    var(--color-success);
  --verified-bg: rgba(62, 120, 82, 0.12);
  --fp:          var(--color-icon-grey);
  --fp-bg:       rgba(124, 124, 124, 0.10);
  --danger:      var(--color-error);
  --warning:     var(--color-warning);
  --success:     var(--color-success);

  /* Elevation */
  --shadow-sm:  var(--ossus-shadow-sm);
  --shadow-md:  var(--ossus-shadow-md);
  --shadow-lg:  var(--ossus-shadow-lg);
  --shadow-pop: var(--ossus-shadow-xl);

  /* Radius — OSSUS scale */
  --r-xs: var(--radius-sm);
  --r-sm: var(--radius-md);
  --r-md: var(--radius-lg);
  --r-lg: var(--radius-xl);
  --r-xl: var(--radius-2xl);

  /* Type */
  --font-sans: var(--ossus-font-sans);
  --fs-base:   var(--ossus-font-size-base);

  /* Module rail + white sub-sidebar */
  --rail-bg:          var(--color-sidebar);
  --rail-fg:          rgba(255, 255, 255, 0.78);
  --rail-fg-active:    #FFFFFF;
  --rail-active-bg:    rgba(255, 255, 255, 0.12);
  --subnav-bg:         var(--sub-bg);
  --subnav-fg:         var(--sub-text);
  --subnav-title:      var(--sub-title);
  --subnav-hover-bg:   var(--sub-hover-bg);
  --subnav-active-bg:  var(--sub-active-bg);
  --subnav-active-fg:  var(--sub-active-text);
  --subnav-border:     var(--sub-border);
  --subnav-label:      var(--sub-label);
  --subnav-icon:       var(--sub-icon);

  color-scheme: light;
}

/* ----------------------------------------------------------------------------
   OSSUS dark overrides. Only the values that are LITERAL in the :root mapping
   above need a dark counterpart; everything mapped via var(--color-*) already
   flips through the dark primitives in ossus-tokens.css. The brand green stays
   as the accent fill (--accent); --accent-hover is lifted to the lighter green
   so text highlights stay legible on near-black surfaces.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --canvas-2:       #0A0A0A;
  --surface-raised: #141414;
  --surface-sunken: #0A0A0A;
  --surface-hover:  #1C1C1C;

  --border-strong:  rgba(255,255,255,0.24);
  --border-faint:   rgba(255,255,255,0.06);

  --text-muted:     rgba(255,255,255,0.5);

  /* Keep the green fill, lift the hover/active + text-highlight green. */
  --accent-hover:   var(--color-icon-green);  /* #65A278 */
  --accent-active:  var(--color-primary);     /* #3E7852 */

  /* Severity tints need a touch more presence on near-black. */
  --sev-critical-bg: rgba(239, 83, 80, 0.18);
  --sev-high-bg:     rgba(249, 155, 78, 0.18);
  --sev-medium-bg:   rgba(236, 204, 101, 0.18);
  --sev-low-bg:      rgba(90, 162, 240, 0.18);
  --sev-info-bg:     rgba(156, 163, 175, 0.16);

  --verified-bg: rgba(101, 162, 120, 0.16);
  --fp-bg:       rgba(255, 255, 255, 0.08);

  color-scheme: dark;
}

/* Brand lockup: OSSUS logo on, legacy Defender shield off, in every palette. */
.brand-legacy { display: none !important; }
.brand-ossus   { display: flex; }

/* The OSSUS rail active highlight is a rounded-left pill tucked to the rail's
   right edge, matching the captured chrome. */
.rail-mod.active::before {
  content: "";
  position: absolute;
  inset: 6px 0 6px auto;
  left: 8px;
  right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--rail-active-bg);
  z-index: 0;
}
.rail-mod > * { position: relative; z-index: 1; }

/* IBM Plex reads a touch heavier; keep headings crisp. */
h1, h2, h3, h4 { font-weight: 600; }