@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ────────────────────────────────────────────────
   AGENTBAK GLOBAL STYLES — brand.css
   Style-guide colors · Shared utilities · Base
──────────────────────────────────────────────── */

/* Brand colors from style guide */
:root, [data-theme="dark"] {
  --vault-blue: #3B82F6;
  --emerald: #10B981;
  --cipher: #A78BFA;
  --abyss: #0B1120;
  --obsidian: #111827;
  --slate: #1E293B;
  --cloud-text: #E5E7EB;
  --fog: #64748B;
  --vault-gradient: linear-gradient(135deg, #3B82F6, #A78BFA);
  /* Mapped to existing var names used in index.html */
  --accent: #3B82F6;
  --accent-dim: rgba(59,130,246,0.12);
  --green: #10B981;
  --green-dim: rgba(16,185,129,0.12);
  --text: #E5E7EB;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --bg: #0B1120;
  --bg-card: #111827;
  --bg-code: rgba(255,255,255,0.05);
  --border: #1E293B;
  --border-dim: rgba(30,41,59,0.6);
  --yellow: #F59E0B;
  --red: #DC2626;
  --red-dim: rgba(220,38,38,0.12);
  --sky: #60A5FA;
  --navy: #0B1120;
  --font-mono: "JetBrains Mono", "Fira Mono", monospace;
}

[data-theme="light"] {
  --accent: #2563EB;
  --accent-dim: rgba(37,99,235,0.10);
  --green: #10B981;
  --green-dim: rgba(16,185,129,0.12);
  --text: #111827;
  --text-muted: #475569;
  --text-dim: #6B7280;
  --bg: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-code: rgba(0,0,0,0.04);
  --border: #E5E7EB;
  --border-dim: rgba(229,231,235,0.8);
  --yellow: #D97706;
  --red: #DC2626;
  --red-dim: rgba(220,38,38,0.08);
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.5;
}

/* ── Shared utilities ── */
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline:hover { border-color: var(--text-dim); }

.section { padding: 56px 0; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.section-title { font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: var(--text); margin-bottom: 16px; letter-spacing: -0.5px; }
.section-sub { font-size: 16px; color: var(--text-muted); max-width: 560px; line-height: 1.6; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.badge-green { background: var(--green-dim); color: var(--green); }
.badge-blue { background: var(--accent-dim); color: var(--accent); }

.ic { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-code); padding: 1px 5px; border-radius: 4px; }