/* ============================================================
   agent-ads.org — human-first design system
   "Quiet infrastructure": light, restrained, trustworthy.
   Sans (IBM Plex Sans) + Mono (IBM Plex Mono).
   Electric blue = technical/trust. Muted green = live/healthy.
   ============================================================ */

:root {
  /* Neutrals — cool slate */
  --bg:            #f6f8fb;
  --bg-grid:       #eef2f7;
  --surface:       #ffffff;
  --surface-2:     #fbfcfe;
  --surface-sunken:#f1f4f9;
  --border:        #e2e8f1;
  --border-strong: #cdd6e3;

  --ink:           #0c1626;  /* headings */
  --text:          #33415a;  /* body */
  --text-muted:    #677488;
  --text-faint:    #95a1b3;

  /* Accent — electric blue */
  --accent:        #2f5bff;
  --accent-ink:    #1c40d6;
  --accent-soft:   #eaefff;
  --accent-border: #c4d1ff;

  /* Live / health — muted green */
  --live:          #1f9d6b;
  --live-soft:     #e6f6ee;
  --live-border:   #bfe7d2;

  /* Status hues (used sparingly) */
  --warn:          #c2790b;
  --warn-soft:     #fcf2dd;
  --danger:        #d2453b;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadows — soft, low */
  --shadow-sm: 0 1px 2px rgba(16,30,54,.05), 0 1px 1px rgba(16,30,54,.04);
  --shadow-md: 0 4px 14px rgba(16,30,54,.07), 0 1px 3px rgba(16,30,54,.05);
  --shadow-lg: 0 18px 50px rgba(16,30,54,.12), 0 4px 12px rgba(16,30,54,.06);

  /* Layout */
  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
}

[data-theme="dark"] {
  --bg:            #0b1018;
  --bg-grid:       #121925;
  --surface:       #121a26;
  --surface-2:     #0f1722;
  --surface-sunken:#0c131d;
  --border:        #1f2a3a;
  --border-strong: #2c3a4f;

  --ink:           #eef3fb;
  --text:          #c2cddd;
  --text-muted:    #8593a8;
  --text-faint:    #5d6b80;

  --accent:        #6e8dff;
  --accent-ink:    #9db2ff;
  --accent-soft:   #18233f;
  --accent-border: #2c3f6b;

  --live:          #45c08a;
  --live-soft:     #122a20;
  --live-border:   #1f4a36;

  --warn:          #e0a64a;
  --warn-soft:     #2a2113;
  --danger:        #f0726a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv05";
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0;
  font-weight: 600;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); }

p { margin: 0; }

code, kbd, .mono { font-family: var(--font-mono); }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* ---- shared layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 14.5px; font-weight: 500;
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .06s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-ink); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent-border); color: var(--accent-ink); background: var(--surface-2); }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: var(--r-sm); }

/* ---- badges / pills ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: var(--surface);
  white-space: nowrap;
}
.badge-accent { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-border); }
.badge-live { color: var(--live); background: var(--live-soft); border-color: var(--live-border); }

.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--text-faint); flex: none; }
.dot-live { background: var(--live); box-shadow: 0 0 0 0 rgba(31,157,107,.5); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,157,107,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(31,157,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,157,107,0); }
}
@media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } }

/* ---- card ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* subtle dotted background used on section bands */
.grid-bg {
  background-image: radial-gradient(var(--bg-grid) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}