/* empire-ds tokens v1 (F7515). Extracted from CoHostBnB (cohostbnb.xyz, Astro/Tailwind v4 theme)
   and AnswerBeacon (holdthewheel.eliteaiempire.com/rank). Three layers:
   1. primitives (raw values)  2. semantic (what a value is for)  3. brand (one accent per company).
   Sites set <html data-brand="cohostbnb"> (see brands.json) or override --ds-accent* inline. */

:root {
  /* 1. primitives: ink scale + paper from CoHostBnB */
  --ink-50: #f3f4f6; --ink-100: #e5e7eb; --ink-200: #d1d5db; --ink-300: #9ca3af;
  --ink-400: #6b7280; --ink-500: #4b5563; --ink-600: #2a3342; --ink-700: #1c2330;
  --ink-800: #11161f; --ink-900: #0a0e14;
  --paper: #fafaf9; --white: #ffffff;
  --green-600: #2f7d56; --green-50: #f0f7f4; --green-800: #143527;
  --amber-600: #b45309; --amber-50: #fffbeb;
  --red-600: #b91c1c; --red-50: #fef2f2;
  --blue-600: #2563eb; --blue-50: #eff6ff;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem;
  --leading-tight: 1.25; --leading-snug: 1.375; --leading-body: 1.6;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;

  --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(10,14,20,.06);
  --shadow-md: 0 4px 16px rgba(10,14,20,.08);
  --container: 72rem; --container-narrow: 42rem;
  --duration: .15s; --ease: cubic-bezier(.4,0,.2,1);

  /* 2. semantic */
  --ds-bg: var(--paper);
  --ds-surface: var(--white);
  --ds-surface-alt: var(--ink-50);
  --ds-text: var(--ink-800);
  --ds-text-muted: var(--ink-500);
  --ds-border: var(--ink-100);
  --ds-border-strong: var(--ink-200);
  --ds-ok: var(--green-600);   --ds-ok-soft: var(--green-50);
  --ds-warn: var(--amber-600); --ds-warn-soft: var(--amber-50);
  --ds-bad: var(--red-600);    --ds-bad-soft: var(--red-50);
  --ds-focus: 0 0 0 3px color-mix(in srgb, var(--ds-accent) 35%, transparent);

  /* 3. brand: default = CoHostBnB green. Every accent below passes WCAG AA (>=4.5:1) on white. */
  --ds-accent: #2f7d56;
  --ds-accent-strong: #1c4a34;
  --ds-accent-soft: #f0f7f4;
  --ds-accent-ink: #ffffff;
}

/* One accent per master group (see brands.json). Same layout, same components, different hue. */
[data-brand="cohostbnb"]      { --ds-accent:#2f7d56; --ds-accent-strong:#1c4a34; --ds-accent-soft:#f0f7f4; }
[data-brand="answerbeacon"],
[data-brand="holdthewheel"]   { --ds-accent:#2563eb; --ds-accent-strong:#1e40af; --ds-accent-soft:#eff6ff; }
[data-brand="myaiceo"]        { --ds-accent:#6d28d9; --ds-accent-strong:#4c1d95; --ds-accent-soft:#f5f3ff; }
[data-brand="security"]       { --ds-accent:#0f766e; --ds-accent-strong:#134e4a; --ds-accent-soft:#f0fdfa; }
[data-brand="cloud"]          { --ds-accent:#0369a1; --ds-accent-strong:#0c4a6e; --ds-accent-soft:#f0f9ff; }
[data-brand="tradehouse"]     { --ds-accent:#1d4ed8; --ds-accent-strong:#1e3a8a; --ds-accent-soft:#eff6ff; }
[data-brand="eas"]            { --ds-accent:#334155; --ds-accent-strong:#0f172a; --ds-accent-soft:#f1f5f9; }
[data-brand="apps"]           { --ds-accent:#c2410c; --ds-accent-strong:#7c2d12; --ds-accent-soft:#fff7ed; }
[data-brand="reviews"]        { --ds-accent:#a16207; --ds-accent-strong:#713f12; --ds-accent-soft:#fefce8; }
[data-brand="lifestrategist"] { --ds-accent:#7c3aed; --ds-accent-strong:#5b21b6; --ds-accent-soft:#f5f3ff; }
[data-brand="careerpro"]      { --ds-accent:#0e7490; --ds-accent-strong:#164e63; --ds-accent-soft:#ecfeff; }

/* empire-ds components v1 (F7515). Every class is prefixed .ds- so a site can adopt the system
   page by page without breaking its old CSS. Mobile first; one breakpoint at 768px. */

.ds, .ds-page { font-family: var(--font-sans); color: var(--ds-text); background: var(--ds-bg);
  font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
.ds *, .ds-page * { box-sizing: border-box; }
.ds a { color: var(--ds-accent); }
.ds :focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--radius-sm); }
.ds h1, .ds h2, .ds h3 { font-family: var(--font-display); line-height: var(--leading-tight); margin: 0 0 var(--space-3); letter-spacing: -.01em; }
.ds h1 { font-size: var(--text-3xl); } .ds h2 { font-size: var(--text-2xl); } .ds h3 { font-size: var(--text-lg); }
@media (min-width: 768px) { .ds h1 { font-size: var(--text-5xl); } .ds h2 { font-size: var(--text-3xl); } }
.ds p { margin: 0 0 var(--space-4); }
.ds-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.ds-narrow { max-width: var(--container-narrow); }
.ds-section { padding: var(--space-12) 0; }
@media (min-width: 768px) { .ds-section { padding: var(--space-20) 0; } }
.ds-muted { color: var(--ds-text-muted); }
.ds-small { font-size: var(--text-sm); }
.ds-center { text-align: center; }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-skip { position: absolute; left: -999px; top: 0; background: var(--ds-surface); padding: var(--space-2) var(--space-4); z-index: 100; }
.ds-skip:focus { left: var(--space-2); }

/* nav */
.ds-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ds-bg) 92%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--ds-border); }
.ds-nav__in { display: flex; align-items: center; gap: var(--space-4); min-height: 60px; }
.ds-nav__brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--ds-text); text-decoration: none; font-size: var(--text-lg); }
.ds-nav__brand img { width: 28px; height: 28px; }
.ds-nav__links { display: none; gap: var(--space-5); margin-left: auto; }
.ds-nav__links a { color: var(--ds-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.ds-nav__links a:hover, .ds-nav__links a[aria-current="page"] { color: var(--ds-text); }
.ds-nav__cta { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
@media (min-width: 768px) { .ds-nav__links { display: flex; } .ds-nav__cta { margin-left: var(--space-5); } }

/* buttons */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px;
  padding: 0 var(--space-5); border-radius: var(--radius-md); font: 600 var(--text-base)/1 var(--font-sans);
  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background var(--duration) var(--ease); }
.ds-btn--primary { background: var(--ds-accent); color: var(--ds-accent-ink); }
.ds-btn--primary:hover { background: var(--ds-accent-strong); }
.ds-btn--secondary { background: var(--ds-surface); color: var(--ds-text); border-color: var(--ds-border-strong); }
.ds-btn--secondary:hover { background: var(--ds-surface-alt); }
.ds-btn--ghost { background: transparent; color: var(--ds-accent); padding: 0 var(--space-2); }
.ds-btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.ds-btn--block { width: 100%; }
.ds a.ds-btn--primary { color: var(--ds-accent-ink); }

/* hero: one sentence, one action, result visible in 5 s */
.ds-hero { padding: var(--space-12) 0 var(--space-10); }
.ds-hero__eyebrow { display: inline-block; font-size: var(--text-sm); font-weight: 600; color: var(--ds-accent);
  background: var(--ds-accent-soft); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin-bottom: var(--space-4); }
.ds-hero__lead { font-size: var(--text-lg); color: var(--ds-text-muted); max-width: 40rem; }
.ds-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.ds-hero__proof { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ds-text-muted); }

/* tool: the shortest path to a result (input + button on one line) */
.ds-tool { display: flex; flex-direction: column; gap: var(--space-2); background: var(--ds-surface); border: 1px solid var(--ds-border-strong);
  border-radius: var(--radius-lg); padding: var(--space-2); box-shadow: var(--shadow-md); max-width: 40rem; }
@media (min-width: 640px) { .ds-tool { flex-direction: row; } }
.ds-input { flex: 1; min-height: 44px; border: 1px solid var(--ds-border-strong); border-radius: var(--radius-md); padding: 0 var(--space-3);
  font: inherit; color: var(--ds-text); background: var(--ds-surface); }
.ds-tool .ds-input { border-color: transparent; }
.ds-label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.ds-field { margin-bottom: var(--space-4); }

/* steps: 1-2-3 to the result */
.ds-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); counter-reset: ds-step; }
@media (min-width: 768px) { .ds-steps { grid-template-columns: repeat(3, 1fr); } }
.ds-steps li { counter-increment: ds-step; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.ds-steps li::before { content: counter(ds-step); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ds-accent); color: var(--ds-accent-ink); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-3); }

/* cards + grid */
.ds-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .ds-grid--2 { grid-template-columns: repeat(2, 1fr); } .ds-grid--3 { grid-template-columns: repeat(3, 1fr); } .ds-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.ds-card--accent { border-color: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-accent), var(--shadow-md); }

/* result: score + findings, thorough but scannable */
.ds-result { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--radius-xl); padding: var(--space-6); }
.ds-score { display: flex; align-items: baseline; gap: var(--space-2); }
.ds-score__n { font: 800 var(--text-5xl)/1 var(--font-display); color: var(--ds-accent); }
.ds-findings { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.ds-findings li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--ds-border); }

/* pills */
.ds-pill { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.ds-pill--ok { background: var(--ds-ok-soft); color: var(--ds-ok); }
.ds-pill--warn { background: var(--ds-warn-soft); color: var(--ds-warn); }
.ds-pill--bad { background: var(--ds-bad-soft); color: var(--ds-bad); }
.ds-pill--accent { background: var(--ds-accent-soft); color: var(--ds-accent-strong); }

/* pricing */
.ds-pricing { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .ds-pricing { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.ds-plan { display: flex; flex-direction: column; }
.ds-plan__price { font: 800 var(--text-4xl)/1 var(--font-display); margin: var(--space-3) 0 var(--space-1); }
.ds-plan__price small { font-size: var(--text-base); font-weight: 500; color: var(--ds-text-muted); }
.ds-plan ul { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-6); flex: 1; }
.ds-plan li { padding: var(--space-1) 0 var(--space-1) var(--space-6); position: relative; font-size: var(--text-sm); }
.ds-plan li::before { content: "\2713"; position: absolute; left: 0; color: var(--ds-ok); font-weight: 700; }

/* comparison table: every competitor claim carries a source + checked date (see compare/*.json) */
.ds-compare-wrap { overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--radius-lg); background: var(--ds-surface); }
.ds-compare { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 36rem; }
.ds-compare th, .ds-compare td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--ds-border); vertical-align: top; }
.ds-compare thead th { background: var(--ds-surface-alt); font-weight: 700; position: sticky; top: 0; }
.ds-compare th[scope="row"] { font-weight: 600; position: sticky; left: 0; background: var(--ds-surface); }
.ds-compare .ds-us { background: var(--ds-accent-soft); }
.ds-compare sup a { text-decoration: none; font-weight: 700; }
.ds-sources { font-size: var(--text-xs); color: var(--ds-text-muted); margin-top: var(--space-3); padding-left: var(--space-5); }
.ds-sources li { margin: var(--space-1) 0; }

/* dashboard shell: sidebar + topbar + tiles for add-ons/tools */
.ds-dash { display: grid; min-height: 100vh; grid-template-columns: 1fr; background: var(--ds-bg); }
@media (min-width: 900px) { .ds-dash { grid-template-columns: 15rem 1fr; } }
.ds-dash__side { background: var(--ds-surface); border-right: 1px solid var(--ds-border); padding: var(--space-5) var(--space-4); }
.ds-dash__side nav a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--ds-text-muted); text-decoration: none; font-weight: 500; font-size: var(--text-sm); }
.ds-dash__side nav a[aria-current="page"], .ds-dash__side nav a:hover { background: var(--ds-accent-soft); color: var(--ds-accent-strong); }
.ds-dash__main { padding: var(--space-6) var(--space-5); min-width: 0; }
.ds-dash__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.ds-kpi { font: 800 var(--text-3xl)/1 var(--font-display); }
.ds-tile { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-tile__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.ds-tile__foot { margin-top: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* checkout: summary + one button + trust line */
.ds-checkout { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .ds-checkout { grid-template-columns: 1.2fr 1fr; } }
.ds-summary dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); margin: 0; }
.ds-summary dt { color: var(--ds-text-muted); } .ds-summary dd { margin: 0; font-weight: 600; text-align: right; }
.ds-summary .ds-total { border-top: 1px solid var(--ds-border); padding-top: var(--space-2); font-size: var(--text-lg); color: var(--ds-text); }
.ds-trust { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--ds-text-muted); margin-top: var(--space-3); }

/* affiliate link + FTC disclosure */
.ds-aff { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ds-disclosure { font-size: var(--text-xs); color: var(--ds-text-muted); background: var(--ds-surface-alt); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }

/* account (one Empire account) */
.ds-account { font-size: var(--text-sm); }

/* footer */
.ds-footer { border-top: 1px solid var(--ds-border); padding: var(--space-10) 0; font-size: var(--text-sm); color: var(--ds-text-muted); }
.ds-footer a { color: var(--ds-text-muted); }
.ds-footer__cols { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ds-footer__cols { grid-template-columns: repeat(4, 1fr); } }

@media (prefers-reduced-motion: reduce) { .ds * { transition: none !important; animation: none !important; } }