/* ─────────────────────────────────────────────────────────────────────────
 * Agents Memory — Design System (authoritative stylesheet)
 *
 * Derived verbatim from design.md. Every custom property and utility
 * mirrors a rule in that document. Pages load this stylesheet before
 * their own page-specific styles so tokens are always available.
 *
 *   Tokens              §3 color system / §1 spacing
 *   Typography          §2 type scale + families
 *   Components          §4 cards, tables, badges, nav
 *   Buttons / inputs    §6
 *   Enforced rules      §7  (no gradients on interactive, weight ≤600,
 *                            radius ≤10px, one accent color, etc.)
 * ─────────────────────────────────────────────────────────────────────── */

/* ── Font imports (Chakra Petch + JetBrains Mono added to existing Inter) ── */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── §3  Background layers ───────────────────────────────── */
  --bg-base:             #0a0a0a;
  --bg-surface:          #111111;
  --bg-surface-raised:   #161616;
  --bg-surface-overlay:  #1c1c1c;
  --bg-input:            #0f0f0f;

  /* ── Borders ─────────────────────────────────────────────── */
  --border-base:      #1e1e1e;
  --border-subtle:    #181818;
  --border-emphasis:  #2a2a2a;
  --border-strong:    #383838;

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:   #f0f0f0;
  --text-secondary: #a0a0a0;
  --text-muted:     #5a5a5a;
  --text-disabled:  #333333;
  --text-inverse:   #0a0a0a;

  /* ── Accent (one only — blue) ────────────────────────────── */
  --accent-primary:        #3366ff;
  --accent-primary-hover:  #4d7fff;
  --accent-primary-muted:  #1a2e66;
  --accent-primary-subtle: #0d1733;
  --accent-primary-border: #1f3d99;

  /* ── Semantic (status indicators only) ───────────────────── */
  --status-success: #22c55e;
  --status-warning: #f59e0b;
  --status-error:   #ef4444;
  --status-neutral: #6b7280;
  --status-info:    #3b82f6;

  /* ── Spacing scale (§1) ──────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ── Radii (cap 10px — §7 non-negotiable) ───────────────── */
  --radius-sm:    4px;  /* badges, tooltips */
  --radius-md:    6px;  /* cards, buttons, inputs, avatars */
  --radius-lg:    8px;  /* modals */
  --radius-xl:   10px;  /* hard cap */

  /* ── Typography families ─────────────────────────────────── */
  --font-heading: 'Chakra Petch', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Layout constants ────────────────────────────────────── */
  --layout-max:            1280px;
  --sidebar-expanded:      224px;
  --sidebar-collapsed:     56px;
  --topnav-height:         48px;
  --subnav-height:         40px;

  /* ── Transitions (§5) ────────────────────────────────────── */
  --t-border: border-color 150ms ease;
  --t-bg:     background-color 100ms ease;
  --t-ui:     all 150ms ease;
}

/* ============================================================
   §2  Typography — global defaults for body, headings, code
   ============================================================ */

body.ds, .ds-body {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  background: var(--bg-base);
}

/* Elements inside a .ds scope inherit Inter by default;
   structural elements switch to Chakra Petch. */
.ds h1, .ds h2, .ds h3, .ds h4,
.ds .ds-heading, .ds-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Type scale utilities (exact values from design.md §2) */
.ds-page-title   { font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; }
.ds-section-head { font-family: var(--font-heading); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.01em; }
.ds-card-title   { font-family: var(--font-heading); font-size: 13px; font-weight: 500; line-height: 20px; }
.ds-body-text    { font-family: var(--font-body);    font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: -0.01em; }
.ds-table-head   { font-family: var(--font-body);    font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: 0.03em; text-transform: uppercase; }
.ds-table-cell   { font-family: var(--font-body);    font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: -0.01em; }
.ds-label        { font-family: var(--font-body);    font-size: 11px; font-weight: 400; line-height: 16px; color: var(--text-muted); }
.ds-kpi-value    { font-family: var(--font-heading); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.02em; }
.ds-kpi-label    { font-family: var(--font-body);    font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.02em; color: var(--text-muted); }
.ds-badge-text   { font-family: var(--font-body);    font-size: 10px; font-weight: 500; line-height: 14px; letter-spacing: 0.03em; text-transform: uppercase; }
.ds-caption      { font-family: var(--font-body);    font-size: 10px; font-weight: 400; line-height: 14px; color: var(--text-muted); }
.ds-code         { font-family: var(--font-mono);    font-size: 12px; font-weight: 400; line-height: 18px; }

/* ============================================================
   §4  Components
   ============================================================ */

/* Cards — 1px border, never box-shadow (§4, §7) */
.ds-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: var(--t-border);
}
.ds-card:hover { border-color: var(--border-emphasis); }

.ds-card-dense   { padding: var(--space-md); }
.ds-card-flush   { padding: 0; }

/* KPI card — exactly the structure in §4 ASCII example */
.ds-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: var(--t-border);
}
.ds-kpi:hover { border-color: var(--border-emphasis); }
.ds-kpi .val   { font-family: var(--font-heading); font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.02em; color: var(--text-primary); }
.ds-kpi .delta { font-family: var(--font-body);    font-size: 11px; font-weight: 400; margin-left: var(--space-sm); }
.ds-kpi .delta.up   { color: var(--status-success); }
.ds-kpi .delta.down { color: var(--status-error); }
.ds-kpi .lbl   { font-family: var(--font-body); font-size: 11px; font-weight: 400; line-height: 16px; color: var(--text-muted); margin-top: var(--space-xs); letter-spacing: 0.02em; }

/* ──  §6  Buttons — flat, never gradient (§7) ── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: 32px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: var(--t-ui);
  white-space: nowrap;
}
.ds-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-btn-sm { height: 28px; padding: 0 var(--space-sm); font-size: 12px; }
.ds-btn-lg { height: 36px; padding: 0 var(--space-lg); }

.ds-btn-primary   { background: var(--accent-primary); color: #ffffff; }
.ds-btn-primary:hover:not(:disabled) { background: var(--accent-primary-hover); }

.ds-btn-secondary { background: rgba(255,255,255,0.03); color: var(--text-secondary); border-color: var(--border-base); font-weight: 400; }
.ds-btn-secondary:hover:not(:disabled) { border-color: var(--border-emphasis); color: var(--text-primary); }

.ds-btn-danger    { background: transparent; color: var(--status-error); border-color: var(--status-error); font-weight: 400; }
.ds-btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.08); }

.ds-btn-ghost     { background: transparent; color: var(--text-muted); font-weight: 400; }
.ds-btn-ghost:hover:not(:disabled) { color: var(--text-primary); background: rgba(255,255,255,0.03); }

/* Icon-only square button */
.ds-btn-icon { width: 28px; height: 28px; padding: 0; }

/* ── Inputs (§6) ─────────────────────────────────────── */
.ds-input, .ds-select, .ds-textarea {
  width: 100%;
  height: 32px;
  padding: 0 var(--space-md);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  outline: none;
  transition: var(--t-border);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--text-disabled); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color: var(--accent-primary); }
.ds-textarea { height: auto; min-height: 80px; padding: var(--space-sm) var(--space-md); line-height: 20px; }

/* ── Badges / tags (§4, §6) ──────────────────────────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
}
.ds-badge-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.ds-badge.success { background: rgba(34,197,94,0.15);  color: var(--status-success); }
.ds-badge.warning { background: rgba(245,158,11,0.15); color: var(--status-warning); }
.ds-badge.error   { background: rgba(239,68,68,0.15);  color: var(--status-error); }
.ds-badge.neutral { background: rgba(107,114,128,0.18); color: var(--status-neutral); }
.ds-badge.info    { background: rgba(59,130,246,0.15); color: var(--status-info); }
.ds-badge.success .ds-badge-dot { background: var(--status-success); }
.ds-badge.warning .ds-badge-dot { background: var(--status-warning); }
.ds-badge.error   .ds-badge-dot { background: var(--status-error); }
.ds-badge.neutral .ds-badge-dot { background: var(--status-neutral); }
.ds-badge.info    .ds-badge-dot { background: var(--status-info); }

/* ── Tables (§4) ─────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.ds-table thead th {
  text-align: left;
  height: 32px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
}
.ds-table tbody td {
  height: 36px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-table tbody tr:hover td { background: var(--bg-surface-raised); }
.ds-table .primary  { color: var(--text-primary); font-weight: 500; }
.ds-table .num      { text-align: right; font-family: var(--font-mono); font-size: 12px; }
.ds-table tbody tr.selected td { background: rgba(51,102,255,0.06); color: var(--text-primary); }

/* ── Nav items ───────────────────────────────────────── */
.ds-nav-item {
  display: flex; align-items: center; gap: var(--space-sm);
  height: 32px; padding: 6px 12px;
  border-left: 2px solid transparent;
  border-radius: 0;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  transition: var(--t-bg);
}
.ds-nav-item:hover { background: rgba(255,255,255,0.03); }
.ds-nav-item.active { background: rgba(51,102,255,0.094); border-left-color: var(--accent-primary); color: var(--text-primary); font-weight: 500; }
.ds-nav-item .icon { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.ds-nav-item.active .icon { color: var(--text-primary); }

/* Section divider used inside nav blocks */
.ds-nav-divider { height: 1px; background: var(--border-subtle); margin: var(--space-sm) 0; }

/* Section label (use sparingly — spec §4) */
.ds-section-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

/* ── Tooltips (§6) ───────────────────────────────────── */
.ds-tooltip {
  background: var(--bg-surface-overlay);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 16px;
  color: var(--text-secondary);
  max-width: 240px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* ── Modals (§6) ─────────────────────────────────────── */
.ds-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 999; }
.ds-modal {
  position: fixed; left: 50%; top: 10vh; transform: translateX(-50%);
  width: 480px; max-width: calc(100vw - 32px);
  background: var(--bg-surface-overlay);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-lg);
  z-index: 1000;
}
.ds-modal-header  { padding: 20px 24px 16px; font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--text-primary); }
.ds-modal-body    { padding: 0 24px 20px; font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.ds-modal-footer  { padding: 16px 24px; display: flex; gap: var(--space-sm); justify-content: flex-end; border-top: 1px solid var(--border-subtle); }

/* ── Empty state (§6) ────────────────────────────────── */
.ds-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: var(--space-2xl);
  max-height: 200px;
  text-align: center;
}
.ds-empty .icon { width: 24px; height: 24px; color: var(--text-muted); }
.ds-empty h4    { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-secondary); margin: 0; }
.ds-empty p     { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin: 0; }

/* ── Status delta arrows (§4 KPI) ────────────────────── */
.ds-delta-up::before    { content: '\2191 '; color: var(--status-success); }
.ds-delta-down::before  { content: '\2193 '; color: var(--status-error); }

/* ── Utilities ───────────────────────────────────────── */
.ds-mono   { font-family: var(--font-mono); }
.ds-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-tabular-nums { font-variant-numeric: tabular-nums; }

/* §5 — killswitch for animations that contradict the spec */
.ds-no-animate, .ds-no-animate * { animation: none !important; transition: none !important; }