/* ============================================================
   ENIGMA P15 — refreshed design system layer
   Sidecar stylesheet ported from claude.ai/design "Enigma" bundle
   (tokens.css + primitives.jsx). Loaded after enigma-ds.css so its
   tokens override where they overlap; legacy --bg / --ink / --red
   vars in enigma-ds.css are preserved for older pages and are
   re-aliased here to the new --bg-0 / --fg-0 / --red vars so they
   continue to render correctly.

   Source: design-import/enigma/project/tokens.css + primitives.jsx
   Imported: 2026-05-11 (P15a).
   ============================================================ */

/* ---------- TOKENS — DARK (primary) ---------- */
:root,
:root[data-theme="dark"] {
  --bg-0: #0A0A0F;
  --bg-1: #12121A;
  --bg-2: #1A1A22;
  --bg-3: #21212B;
  --fg-0: #E8E8EA;
  --fg-1: #B8B8C0;
  --fg-2: #8A8A92;
  --fg-3: #5A5A65;
  --line: #2A2A32;
  --line-strong: #3A3A45;

  --neon:     #00FF9F;
  --neon-dim: #00B370;
  --red:      #DC2626;
  --amber:    #F59E0B;
  --blue:     #3B82F6;
  --violet:   #8B5CF6;

  --sev-crit: #DC2626;
  --sev-high: #F59E0B;
  --sev-med:  #FACC15;
  --sev-low:  #3B82F6;
  --sev-info: #8A8A92;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --grid: rgba(255,255,255,0.025);
}

/* ---------- TOKENS — LIGHT ---------- */
:root[data-theme="light"] {
  --bg-0: #F6F6F4;
  --bg-1: #FFFFFF;
  --bg-2: #FBFBF9;
  --bg-3: #F1F1EE;
  --fg-0: #0E0E14;
  --fg-1: #3A3A45;
  --fg-2: #6A6A75;
  --fg-3: #9A9AA5;
  --line: #E4E4DF;
  --line-strong: #C9C9C2;

  --neon:     #00A86B;
  --neon-dim: #007A4F;
  --red:      #B81F1F;
  --amber:    #B45309;
  --blue:     #1D4ED8;
  --violet:   #6D28D9;

  --sev-crit: #B81F1F;
  --sev-high: #B45309;
  --sev-med:  #92840E;
  --sev-low:  #1D4ED8;
  --sev-info: #6A6A75;

  --shadow-1: 0 1px 2px rgba(20,20,30,0.06);
  --shadow-2: 0 8px 24px rgba(20,20,30,0.08), 0 0 0 1px rgba(20,20,30,0.04);
  --shadow-3: 0 24px 60px rgba(20,20,30,0.12), 0 0 0 1px rgba(20,20,30,0.05);

  --grid: rgba(20,20,30,0.03);
}

/* ---------- ACCENT VARIANTS ---------- */
:root[data-accent="green"]  { --neon: #00A86B; --neon-dim: #007A4F; }
:root[data-accent="cyan"]   { --neon: #0891B2; --neon-dim: #155E75; }
:root[data-accent="amber"]  { --neon: #B45309; --neon-dim: #92400E; }
:root[data-accent="violet"] { --neon: #7C3AED; --neon-dim: #5B21B6; }
:root[data-theme="dark"][data-accent="green"]  { --neon: #00FF9F; --neon-dim: #00B370; }
:root[data-theme="dark"][data-accent="cyan"]   { --neon: #22D3EE; --neon-dim: #0891B2; }
:root[data-theme="dark"][data-accent="amber"]  { --neon: #FBBF24; --neon-dim: #B45309; }
:root[data-theme="dark"][data-accent="violet"] { --neon: #A78BFA; --neon-dim: #7C3AED; }

/* ---------- LEGACY BACKWARD-COMPAT ALIASES ----------
   The existing 1500+ lines of layout in enigma-ds.css reference
   --bg, --ink, --line-soft, --color-text-primary etc. Re-route
   them to the new tokens so legacy pages render with the P15
   palette without per-page edits.

   These aliases live in the same :root scope as the new tokens so
   they pick up the correct dark/light variant.
*/
:root {
  --bg:        var(--bg-0);
  --bg-2:      var(--bg-1);   /* old --bg-2 was the lighter raised surface */
  --bg-3:      var(--bg-2);   /* old --bg-3 was the overlay surface */

  --ink:       var(--fg-0);
  --ink-2:     var(--fg-1);
  --ink-3:     var(--fg-2);

  --line-soft: var(--bg-2);   /* used by ds.css for dividers; closest token */

  /* keep semantic --color-* aliases pointed at the new palette */
  --color-bg:              var(--bg-0);
  --color-surface-raised:  var(--bg-1);
  --color-surface-overlay: var(--bg-2);
  --color-border:          var(--line);
  --color-border-soft:     var(--bg-2);
  --color-text-primary:    var(--fg-0);
  --color-text-secondary:  var(--fg-1);
  --color-text-tertiary:   var(--fg-2);
  --color-accent:          var(--neon);
  --color-accent-dark:     var(--neon-dim);
  --color-accent-bright:   var(--neon);
  --color-accent-subtle:   color-mix(in oklab, var(--neon) 8%, transparent);
  --color-accent-glow:     color-mix(in oklab, var(--neon) 30%, transparent);
}

/* ---------- DENSITY MODIFIERS ----------
   Set via <html data-density="regular"> (default).
*/
[data-density="compact"]  { --pad: 12px; --pad-lg: 16px; --gap: 8px;  --row-h: 28px; }
[data-density="regular"], :root { --pad: 16px; --pad-lg: 24px; --gap: 12px; --row-h: 32px; }
[data-density="comfy"]    { --pad: 22px; --pad-lg: 32px; --gap: 18px; --row-h: 40px; }

/* ---------- TYPE UTILITIES (matching primitives.jsx) ---------- */
.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: 'zero', 'ss02';
  letter-spacing: 0;
}
.display {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.grid-bg {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pulse {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 0 currentColor;
  animation: ds-pulse 1.6s ease-out infinite;
}
@keyframes ds-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,255,159,0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(0,255,159,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,159,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
}

/* ---------- PRIMITIVE: Card ---------- */
.ds-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.ds-card--hero {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  box-shadow: var(--shadow-2);
}
.ds-card--accent {
  border-color: color-mix(in oklab, var(--neon) 35%, var(--line));
}
.ds-card__body { padding: var(--pad); }

/* ---------- PRIMITIVE: Panel header ---------- */
.ds-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.ds-panel-header__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--fg-2); text-transform: uppercase;
  margin-bottom: 2px;
}
.ds-panel-header__title {
  font-size: 13px; font-weight: 500; color: var(--fg-0);
}
.ds-panel-header__right {
  display: flex; gap: 6px; align-items: center;
}

/* ---------- PRIMITIVE: Tags (neutral/neon/warn/danger/info) ---------- */
.ds-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.ds-tag--neutral { color: var(--fg-1);  background: var(--bg-2); border-color: var(--line); }
.ds-tag--neon    { color: var(--neon);  background: color-mix(in oklab, var(--neon)  8%, transparent); border-color: color-mix(in oklab, var(--neon)  30%, transparent); }
.ds-tag--warn    { color: var(--amber); background: color-mix(in oklab, var(--amber) 10%, transparent); border-color: color-mix(in oklab, var(--amber) 35%, transparent); }
.ds-tag--danger  { color: var(--red);   background: color-mix(in oklab, var(--red)   10%, transparent); border-color: color-mix(in oklab, var(--red)   35%, transparent); }
.ds-tag--info    { color: var(--blue);  background: color-mix(in oklab, var(--blue)  10%, transparent); border-color: color-mix(in oklab, var(--blue)  35%, transparent); }

/* ---------- PRIMITIVE: Severity chip ----------
   Markup pattern (encodes severity without color alone):
   <span class="ds-sev-chip ds-sev-chip--crit">
     <span class="ds-sev-chip__bars" data-bars="4">
       <i></i><i></i><i></i><i></i>
     </span>
     CRIT
   </span>
*/
.ds-sev-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
}
.ds-sev-chip--sm  { padding: 1px 5px; font-size: 9px; }
.ds-sev-chip__bars { display: inline-flex; gap: 1.5px; }
.ds-sev-chip__bars > i {
  display: block; width: 2px; height: 10px; border-radius: 1px;
  background: currentColor; opacity: 0.18;
}
.ds-sev-chip__bars[data-bars="1"] > i:nth-child(-n+1),
.ds-sev-chip__bars[data-bars="2"] > i:nth-child(-n+2),
.ds-sev-chip__bars[data-bars="3"] > i:nth-child(-n+3),
.ds-sev-chip__bars[data-bars="4"] > i:nth-child(-n+4) { opacity: 1; }

.ds-sev-chip--crit { color: var(--sev-crit); background: color-mix(in oklab, var(--sev-crit) 16%, transparent); border: 1px solid color-mix(in oklab, var(--sev-crit) 40%, transparent); }
.ds-sev-chip--high { color: var(--sev-high); background: color-mix(in oklab, var(--sev-high) 16%, transparent); border: 1px solid color-mix(in oklab, var(--sev-high) 40%, transparent); }
.ds-sev-chip--med  { color: var(--sev-med);  background: color-mix(in oklab, var(--sev-med)  16%, transparent); border: 1px solid color-mix(in oklab, var(--sev-med)  40%, transparent); }
.ds-sev-chip--low  { color: var(--sev-low);  background: color-mix(in oklab, var(--sev-low)  16%, transparent); border: 1px solid color-mix(in oklab, var(--sev-low)  40%, transparent); }
.ds-sev-chip--info { color: var(--sev-info); background: color-mix(in oklab, var(--sev-info) 16%, transparent); border: 1px solid color-mix(in oklab, var(--sev-info) 40%, transparent); }

/* ---------- PRIMITIVE: Delta indicator (▲/▼/·) ---------- */
.ds-delta {
  display: inline-flex; gap: 3px; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
}
.ds-delta__arrow { font-size: 8px; }
.ds-delta--up    { color: var(--neon); }
.ds-delta--down  { color: var(--red); }
.ds-delta--flat  { color: var(--fg-2); }
/* invert tones for "lower is better" metrics */
.ds-delta--up.ds-delta--invert   { color: var(--red); }
.ds-delta--down.ds-delta--invert { color: var(--neon); }

/* ---------- PRIMITIVE: Severity stack-bar ---------- */
.ds-sevbar {
  display: flex; border-radius: 2px; overflow: hidden;
  background: var(--bg-3); min-height: 6px;
}
.ds-sevbar > span { display: block; height: 6px; }
.ds-sevbar > .ds-sevbar--crit { background: var(--sev-crit); }
.ds-sevbar > .ds-sevbar--high { background: var(--sev-high); }
.ds-sevbar > .ds-sevbar--med  { background: var(--sev-med); }
.ds-sevbar > .ds-sevbar--low  { background: var(--sev-low); }
.ds-sevbar > .ds-sevbar--info { background: var(--sev-info); }

/* ---------- PRIMITIVE: Status pulse pill ---------- */
.ds-status-pulse {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.1em; font-weight: 500;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.ds-status-pulse--warn .pulse { background: var(--amber); animation-name: ds-pulse-amber; }
@keyframes ds-pulse-amber {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* ---------- PRIMITIVE: Section eyebrow ---------- */
.ds-section-eyebrow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0 4px;
}
.ds-section-eyebrow__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.22em;
  color: var(--fg-2); text-transform: uppercase;
}
.ds-section-eyebrow__right {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--fg-3);
}

/* ---------- PRIMITIVE: Phase dots (29-phase pipeline) ---------- */
.ds-phase-dots { display: inline-flex; gap: 2px; }
.ds-phase-dots > i {
  display: block; width: 4px; height: 12px; border-radius: 1px;
  background: var(--bg-3);
}
.ds-phase-dots > i.is-on   { background: var(--neon); opacity: 0.55; }
.ds-phase-dots > i.is-head { background: var(--neon); opacity: 1; box-shadow: 0 0 6px var(--neon); }

/* ---------- PRIMITIVE: TopBar (P15 chrome) ----------
   Used by the refreshed admin layouts. Coexists with the old
   .dash-sidebar layout (kept for legacy pages) — pages opting in
   to P15 set <body class="p15"> to switch shells.
*/
.ds-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 24px; gap: 24px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.ds-topbar__left  { display: flex; align-items: center; gap: 14px; }
.ds-topbar__right { display: flex; align-items: center; gap: 12px; }
.ds-topbar__divider { width: 1px; height: 22px; background: var(--line); }
.ds-topbar__nav { display: flex; gap: 4px; }
.ds-topbar__nav a {
  padding: 6px 10px; font-size: 12px; color: var(--fg-2);
  text-decoration: none; border-radius: 6px; font-weight: 500;
  border: 1px solid transparent;
}
.ds-topbar__nav a:hover  { color: var(--fg-1); background: var(--bg-2); }
.ds-topbar__nav a.is-on  { color: var(--fg-0); background: var(--bg-2); border-color: var(--line); }
.ds-topbar__clock  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--fg-2); }
.ds-topbar__user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 11px; color: var(--fg-1);
}
.ds-topbar__avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-dim), var(--violet));
  display: grid; place-items: center;
  font-size: 10px; color: #000; font-weight: 700;
}

/* ---------- PRIMITIVE: Logo ---------- */
.ds-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.18em; color: var(--fg-0); font-weight: 600;
}
.ds-logo__mark {
  width: 18px; height: 18px;
  border: 1.5px solid var(--neon); border-radius: 3px;
  position: relative;
}
.ds-logo__mark::after {
  /* check mark drawn with two angled lines */
  content: ""; position: absolute; left: 4px; top: 4px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--neon); border-bottom: 1.5px solid var(--neon);
  transform: rotate(-45deg); transform-origin: bottom left;
}
.ds-logo__tld { color: var(--neon); }

/* ---------- PRIMITIVE: Env badge ----------
   Use markup: <span class="ds-tag ds-tag--danger ds-envbadge">● production</span>
*/
.ds-envbadge { /* shape inherited from ds-tag; reserved for future tweaks */ }

/* ---------- SHELL: P15 layout switch ----------
   Pages set <body class="p15"> to opt into the new top-bar chrome
   instead of the legacy sidebar shell. Both ship at the same time;
   the per-page templates pick.
*/
body.p15 {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -0.005em;
}
body.p15 main {
  display: block; padding: var(--pad-lg);
  max-width: 1440px; margin: 0 auto;
}