/*
 * AwareAI Design System — v1.0
 * File: assets/css/design-system.css
 *
 * Shared tokens, components, and zone shells used by all 22 renderer patterns.
 * Generated from Claude Design output, June 2026.
 *
 * Sections:
 *   1. CSS custom properties (tokens)
 *   2. Zone 1 — Problem banner
 *   3. Zone 3 — Benefit banner + CTA
 *   4. Buttons
 *   5. Status badges
 *   6. Cards / panels
 *   7. Toolbar
 *   8. Data table
 *   9. Form inputs
 *  10. Tags / chips
 *  11. Before/After callout
 *  12. KPI metric cards
 *  13. Live badge
 */

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  /* Layer colours */
  --ds-bg:           #020C1B;
  --ds-surface:      #060D1C;
  --ds-card:         #0A1628;
  --ds-card-hover:   #0D1E38;
  --ds-card-raised:  #0F2040;
  --ds-border:       #1A2942;
  --ds-border-subtle:#0E1B2E;
  --ds-border-focus: #2A4A7F;

  /* Brand */
  --ds-accent:       #C4261F;
  --ds-accent-dim:   rgba(196,38,31,.13);
  --ds-accent-glow:  rgba(196,38,31,.28);
  --ds-accent-bright:#E5352D;

  /* Semantic */
  --ds-ok:           #10B981;  --ds-ok-dim:    rgba(16,185,129,.12);  --ds-ok-t:    #34D399;
  --ds-warn:         #F59E0B;  --ds-warn-dim:  rgba(245,158,11,.12);  --ds-warn-t:  #FCD34D;
  --ds-breach:       #EF4444;  --ds-breach-dim:rgba(239,68,68,.12);   --ds-breach-t:#FCA5A5;
  --ds-active:       #3B82F6;  --ds-active-dim:rgba(59,130,246,.12);  --ds-active-t:#93C5FD;
  --ds-idle:         #6B7280;  --ds-idle-dim:  rgba(107,114,128,.14); --ds-idle-t:  #9CA3AF;

  /* Text */
  --ds-t1: #E2E8F0;  --ds-t2: #94A3B8;  --ds-t3: #64748B;  --ds-t4: #334155;

  /* Type scale */
  --ds-font:      'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --ds-fs-2xs:10px; --ds-fs-xs:11px; --ds-fs-sm:12px; --ds-fs-base:14px;
  --ds-fs-md:15px;  --ds-fs-lg:16px; --ds-fs-xl:18px; --ds-fs-2xl:21px;
  --ds-fs-3xl:26px;
  --ds-fw-n:400; --ds-fw-m:500; --ds-fw-sb:600; --ds-fw-b:700; --ds-fw-eb:800;
  --ds-ls-tight:-.03em; --ds-ls-snug:-.015em; --ds-ls-wide:.04em; --ds-ls-wider:.08em; --ds-ls-widest:.12em;

  /* Spacing (4px base) */
  --ds-s1:4px;  --ds-s2:8px;  --ds-s3:12px; --ds-s4:16px; --ds-s5:20px; --ds-s6:24px;
  --ds-s7:28px; --ds-s8:32px; --ds-s10:40px;

  /* Radius */
  --ds-r-xs:2px; --ds-r-sm:4px; --ds-r-md:6px; --ds-r-lg:8px; --ds-r-xl:12px; --ds-r-full:9999px;

  /* Shadows */
  --ds-sh-xs:  0 1px 2px rgba(0,0,0,.35);
  --ds-sh-sm:  0 2px 6px rgba(0,0,0,.45);
  --ds-sh-md:  0 4px 14px rgba(0,0,0,.55);
  --ds-sh-card:0 0 0 1px var(--ds-border), 0 4px 14px rgba(0,0,0,.5);
  --ds-sh-focus:0 0 0 2px var(--ds-border-focus);
  --ds-sh-glow-accent:0 0 24px var(--ds-accent-glow);
  --ds-sh-glow-ok:0 0 16px rgba(16,185,129,.25);

  /* Motion */
  --ds-tx-fast:100ms ease; --ds-tx-base:180ms ease; --ds-tx-slow:320ms ease;
  --ds-tx-spring:280ms cubic-bezier(.34,1.56,.64,1);
}

/* ================================================================
   2. ZONE 1 — PROBLEM BANNER
   ================================================================ */
.ds-problem-banner {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-subtle);
  border-left: 3px solid var(--ds-accent);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-s5) var(--ds-s6);
  display: flex;
  flex-direction: column;
  gap: var(--ds-s2);
  margin-bottom: var(--ds-s3);
}
.ds-pb-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ds-s2);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-sb);
  letter-spacing: var(--ds-ls-widest);
  text-transform: uppercase;
  color: var(--ds-accent);
}
.ds-pb-headline {
  font-size: var(--ds-fs-xl);
  font-weight: var(--ds-fw-b);
  letter-spacing: var(--ds-ls-tight);
  color: var(--ds-t1);
  line-height: 1.25;
  margin: 0;
}
.ds-pb-body {
  font-size: var(--ds-fs-sm);
  color: var(--ds-t2);
  line-height: 1.55;
  max-width: 72ch;
}
.ds-pb-tags {
  display: flex;
  gap: var(--ds-s2);
  flex-wrap: wrap;
  margin-top: var(--ds-s1);
}

/* ================================================================
   3. ZONE 3 — BENEFIT BANNER
   ================================================================ */
.ds-benefit-banner {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-s4) var(--ds-s6);
  display: flex;
  align-items: center;
  gap: var(--ds-s5);
  flex-wrap: wrap;
  margin-top: var(--ds-s3);
}
.ds-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-s1);
  background: var(--ds-accent-dim);
  border: 1px solid var(--ds-accent-glow);
  color: var(--ds-accent-bright);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-b);
  letter-spacing: var(--ds-ls-wide);
  padding: 3px var(--ds-s3);
  border-radius: var(--ds-r-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-bb-outcome {
  font-size: var(--ds-fs-sm);
  color: var(--ds-t2);
  flex: 1;
  min-width: 160px;
  line-height: 1.5;
}
.ds-bb-outcome strong {
  color: var(--ds-t1);
  font-weight: var(--ds-fw-sb);
}
.ds-bb-cta {
  margin-left: auto;
  flex-shrink: 0;
}

/* ================================================================
   4. BUTTONS
   ================================================================ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-s2);
  font-family: var(--ds-font);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-sb);
  letter-spacing: var(--ds-ls-wide);
  border: 1px solid transparent;
  border-radius: var(--ds-r-md);
  padding: 7px var(--ds-s4);
  cursor: pointer;
  transition: all var(--ds-tx-base);
  user-select: none;
  white-space: nowrap;
  line-height: 1.2;
  text-decoration: none;
  background: none;
}
.ds-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-sh-focus); }
.ds-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

.ds-btn--primary { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }
.ds-btn--primary:hover:not(:disabled) { background: var(--ds-accent-bright); border-color: var(--ds-accent-bright); box-shadow: var(--ds-sh-glow-accent); }

.ds-btn--secondary { background: transparent; border-color: var(--ds-border); color: var(--ds-t1); }
.ds-btn--secondary:hover:not(:disabled) { background: rgba(255,255,255,.05); border-color: #2A3F5F; }

.ds-btn--ghost { background: transparent; border-color: transparent; color: var(--ds-t2); }
.ds-btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,.05); color: var(--ds-t1); }

.ds-btn--ok { background: var(--ds-ok-dim); border-color: rgba(16,185,129,.35); color: var(--ds-ok-t); }
.ds-btn--ok:hover:not(:disabled) { background: rgba(16,185,129,.2); }

.ds-btn--breach { background: var(--ds-breach-dim); border-color: rgba(239,68,68,.35); color: var(--ds-breach-t); }
.ds-btn--breach:hover:not(:disabled) { background: rgba(239,68,68,.2); }

.ds-btn--sm { font-size: var(--ds-fs-xs); padding: 4px var(--ds-s3); border-radius: var(--ds-r-sm); }
.ds-btn--lg { font-size: var(--ds-fs-base); padding: 10px var(--ds-s6); border-radius: var(--ds-r-lg); }

.ds-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.ds-btn--loading::after {
  content: '';
  position: absolute;
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,.6);
  border-top-color: transparent;
  border-radius: 50%;
  animation: ds-spin .65s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ================================================================
   5. STATUS BADGES
   ================================================================ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-b);
  letter-spacing: var(--ds-ls-widest);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--ds-r-sm);
  white-space: nowrap;
  line-height: 1.3;
}
.ds-badge .ds-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.ds-badge--ok     { background: var(--ds-ok-dim);     color: var(--ds-ok-t);     border: 1px solid rgba(16,185,129,.2); }
.ds-badge--ok     .ds-dot { background: var(--ds-ok);     box-shadow: 0 0 6px var(--ds-ok); }
.ds-badge--warn   { background: var(--ds-warn-dim);   color: var(--ds-warn-t);   border: 1px solid rgba(245,158,11,.2); }
.ds-badge--warn   .ds-dot { background: var(--ds-warn); }
.ds-badge--breach { background: var(--ds-breach-dim); color: var(--ds-breach-t); border: 1px solid rgba(239,68,68,.25); }
.ds-badge--breach .ds-dot { background: var(--ds-breach); box-shadow: 0 0 6px var(--ds-breach); }
.ds-badge--active { background: var(--ds-active-dim); color: var(--ds-active-t); border: 1px solid rgba(59,130,246,.2); }
.ds-badge--active .ds-dot { background: var(--ds-active); animation: ds-blink 2s ease infinite; }
.ds-badge--idle   { background: var(--ds-idle-dim);   color: var(--ds-idle-t);   border: 1px solid rgba(107,114,128,.2); }
.ds-badge--idle   .ds-dot { background: var(--ds-idle); }
@keyframes ds-blink { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ================================================================
   6. CARDS / PANELS
   ================================================================ */
.ds-card {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  overflow: hidden;
}
.ds-card--hover { transition: background var(--ds-tx-base), border-color var(--ds-tx-base), box-shadow var(--ds-tx-base); cursor: pointer; }
.ds-card--hover:hover { background: var(--ds-card-hover); border-color: #2A3F5F; box-shadow: var(--ds-sh-md); }
.ds-card--ok     { border-left: 3px solid var(--ds-ok); }
.ds-card--warn   { border-left: 3px solid var(--ds-warn); }
.ds-card--accent { border-left: 3px solid var(--ds-accent); }
.ds-card--breach { border-left: 3px solid var(--ds-breach); box-shadow: 0 0 0 1px rgba(239,68,68,.12), 0 4px 14px rgba(0,0,0,.5); }

.ds-card__hdr   { display: flex; align-items: center; gap: var(--ds-s3); padding: var(--ds-s3) var(--ds-s4); border-bottom: 1px solid var(--ds-border-subtle); }
.ds-card__title { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-sb); color: var(--ds-t1); flex: 1; }
.ds-card__body  { padding: var(--ds-s4); }
.ds-card__ftr   { padding: var(--ds-s2) var(--ds-s4); border-top: 1px solid var(--ds-border-subtle); display: flex; gap: var(--ds-s3); align-items: center; }

.ds-panel { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); overflow: hidden; }
.ds-panel__hdr { display: flex; align-items: center; gap: var(--ds-s4); padding: var(--ds-s3) var(--ds-s5); border-bottom: 1px solid var(--ds-border); }

/* ================================================================
   7. TOOLBAR
   ================================================================ */
.ds-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ds-s2);
  padding: 0 var(--ds-s4);
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border-subtle);
  min-height: 40px;
}
.ds-tb-title { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-sb); color: var(--ds-t1); margin-right: var(--ds-s1); }
.ds-tb-sep   { width: 1px; height: 18px; background: var(--ds-border); margin: 0 var(--ds-s1); flex-shrink: 0; }
.ds-tb-space { flex: 1; }
.ds-tb-group { display: flex; align-items: center; gap: 2px; }
.ds-tb-meta  { font-size: var(--ds-fs-xs); color: var(--ds-t3); }

/* ================================================================
   8. DATA TABLE
   ================================================================ */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.ds-table thead th {
  text-align: left;
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-sb);
  letter-spacing: var(--ds-ls-wider); text-transform: uppercase;
  color: var(--ds-t3); padding: var(--ds-s2) var(--ds-s3);
  border-bottom: 1px solid var(--ds-border); white-space: nowrap;
}
.ds-table tbody tr { border-bottom: 1px solid var(--ds-border-subtle); transition: background var(--ds-tx-fast); }
.ds-table tbody tr:hover { background: rgba(255,255,255,.025); }
.ds-table tbody tr:last-child { border-bottom: none; }
.ds-table td { padding: var(--ds-s2) var(--ds-s3); color: var(--ds-t2); vertical-align: middle; }
.ds-table td:first-child { color: var(--ds-t1); font-weight: var(--ds-fw-m); }
.ds-table .dt-mono { font-family: var(--ds-font-mono); font-size: var(--ds-fs-xs); }
.ds-table .row--breach td { background: rgba(239,68,68,.04); }
.ds-table .row--warn   td { background: rgba(245,158,11,.035); }
.ds-table .row--ok     td { background: rgba(16,185,129,.025); }

/* ================================================================
   9. FORM INPUTS
   ================================================================ */
.ds-input {
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  color: var(--ds-t1);
  font-family: var(--ds-font);
  font-size: var(--ds-fs-base);
  padding: 7px var(--ds-s4);
  transition: border-color var(--ds-tx-fast), box-shadow var(--ds-tx-fast);
  outline: none;
  width: 100%;
}
.ds-input::placeholder { color: var(--ds-t4); }
.ds-input:hover { border-color: #2A3F5F; }
.ds-input:focus { border-color: var(--ds-border-focus); box-shadow: var(--ds-sh-focus); }

.ds-select {
  appearance: none;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  color: var(--ds-t1);
  font-family: var(--ds-font);
  font-size: var(--ds-fs-base);
  padding: 7px var(--ds-s8) 7px var(--ds-s4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  outline: none;
}
.ds-select:focus { border-color: var(--ds-border-focus); box-shadow: var(--ds-sh-focus); }

/* ================================================================
   10. TAGS / CHIPS
   ================================================================ */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-m);
  color: var(--ds-t2);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-full);
  padding: 2px 10px;
  white-space: nowrap;
  line-height: 1.6;
}
.ds-tag--accent { background: var(--ds-accent-dim); border-color: rgba(196,38,31,.3); color: var(--ds-accent-bright); }
.ds-tag--active { background: var(--ds-active-dim); border-color: rgba(59,130,246,.3); color: var(--ds-active-t); }

/* ================================================================
   11. BEFORE / AFTER CALLOUT
   ================================================================ */
.ds-before-after {
  display: flex;
  align-items: center;
  gap: var(--ds-s3);
  padding: var(--ds-s3) var(--ds-s4);
  background: rgba(255,255,255,.025);
  border-radius: var(--ds-r-lg);
  border: 1px solid var(--ds-border-subtle);
}
.ds-ba-col   { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.ds-ba-lbl   { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-sb); letter-spacing: var(--ds-ls-widest); text-transform: uppercase; color: var(--ds-t3); }
.ds-ba-lbl.before { color: var(--ds-breach-t); opacity: .7; }
.ds-ba-lbl.after  { color: var(--ds-ok-t); opacity: .8; }
.ds-ba-val   { font-size: var(--ds-fs-2xl); font-weight: var(--ds-fw-b); letter-spacing: var(--ds-ls-snug); color: var(--ds-t1); font-variant-numeric: tabular-nums; }
.ds-ba-val.before { color: #FF8080; text-decoration: line-through; opacity: .65; }
.ds-ba-val.after  { color: var(--ds-ok-t); }
.ds-ba-arrow { font-size: var(--ds-fs-lg); color: var(--ds-t3); flex-shrink: 0; }

/* ================================================================
   12. KPI METRIC CARDS
   ================================================================ */
.ds-kpi-row { display: flex; gap: var(--ds-s2); flex-wrap: wrap; }
.ds-kpi {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--ds-s3) var(--ds-s4);
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
}
.ds-kpi__lbl { font-size: 9px; font-weight: var(--ds-fw-sb); letter-spacing: var(--ds-ls-widest); text-transform: uppercase; color: var(--ds-t3); }
.ds-kpi__val { font-size: var(--ds-fs-2xl); font-weight: var(--ds-fw-eb); font-variant-numeric: tabular-nums; color: var(--ds-t1); letter-spacing: var(--ds-ls-tight); line-height: 1.15; }
.ds-kpi__val.ok   { color: var(--ds-ok-t); }
.ds-kpi__val.warn { color: var(--ds-warn-t); }
.ds-kpi__val.br   { color: var(--ds-breach-t); }
.ds-kpi__sub { font-size: var(--ds-fs-xs); color: var(--ds-t3); }

/* ================================================================
   13. LIVE BADGE
   ================================================================ */
.ds-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-sb);
  color: var(--ds-ok-t);
  letter-spacing: var(--ds-ls-wide);
  text-transform: uppercase;
}
.ds-live-dot {
  width: 7px; height: 7px;
  background: var(--ds-ok);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--ds-ok);
  animation: ds-livepulse 1.8s ease infinite;
}
@keyframes ds-livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.8)} }