/**
 * BetDNA Theme Engine — EP-005 design tokens, foundation + extended themes.
 * Components MUST consume these tokens. Themes are VISUAL ONLY.
 */

/* ── Dark (default) ── */
:root,
[data-theme="dark"],
[data-theme="betdna-dark"] {
  color-scheme: dark;
  --bdna-primary: #22c55e;
  --bdna-secondary: #3b82f6;
  --bdna-accent: #22c55e;
  --bdna-success: #4ade80;
  --bdna-warning: #fbbf24;
  --bdna-danger: #f87171;
  --bdna-info: #60a5fa;
  --bdna-bg: #0f172a;
  --bdna-card: #1e293b;
  --bdna-panel: #1e293b;
  --bdna-surface-2: #334155;
  --bdna-border: #475569;
  --bdna-divider: #334155;
  --bdna-text-primary: #f1f5f9;
  --bdna-text-secondary: #cbd5e1;
  /* WCAG AA repair 2026-08-12 (G16). Was #94a3b8 (slate-400). Measured at
     4.04:1 against --bdna-surface-2 #334155, below the 4.5:1 body-text
     threshold, which failed .mode-indicator and every .lbl sitting on a
     surface-2 chip. #a6b4c6 measures 4.91:1 there and is strictly higher
     against the darker --bdna-bg and --bdna-card, so nothing regresses. It
     stays clearly below --bdna-text-secondary #cbd5e1, so the muted/secondary
     hierarchy survives. */
  --bdna-text-muted: #a6b4c6;
  --bdna-text-disabled: #64748b;
  --bdna-link: #4ade80;
  --bdna-link-hover: #86efac;
  --bdna-hover: rgba(148, 163, 184, 0.12);
  --bdna-focus: #60a5fa;
  --bdna-selection-bg: rgba(34, 197, 94, 0.25);
  --bdna-selection-text: #ecfdf5;
  --bdna-on-primary: #052e16;
  --bdna-on-accent: #052e16;
  /* Text ON a --bdna-secondary fill. .filter-chip.active previously borrowed
     --bdna-on-primary (#052e16), which is tuned for the GREEN primary; on the
     blue secondary it measured 4.05:1. #04121f measures 5.14:1. */
  --bdna-on-secondary: #04121f;
  /* --bdna-secondary #3b82f6 is a FILL colour. As TEXT on --bdna-card #1e293b
     it measures 3.98:1 - below AA - which failed .settings-section h3,
     .report-runtime-status and .ufc-sport-tag. This is the same hue one step
     lighter (blue-400), 5.75:1 on the card. The fill token is unchanged so no
     button or chip background moves. */
  --bdna-secondary-text: #60a5fa;
  --bdna-on-danger: #450a0a;
  --bdna-on-success: #052e16;
  --bdna-on-warning: #422006;
  --bdna-success-bg: rgba(34, 197, 94, 0.15);
  --bdna-success-border: #166534;
  --bdna-success-text: #86efac;
  --bdna-warning-bg: rgba(251, 191, 36, 0.15);
  --bdna-warning-border: #92400e;
  --bdna-warning-text: #fde68a;
  --bdna-danger-bg: rgba(248, 113, 113, 0.15);
  --bdna-danger-border: #991b1b;
  --bdna-danger-text: #fecaca;
  --bdna-info-bg: rgba(96, 165, 250, 0.12);
  --bdna-info-border: #1d4ed8;
  --bdna-info-text: #bfdbfe;
  --bdna-nav-bg: #1e293b;
  --bdna-nav-border: #334155;
  --bdna-nav-text: #94a3b8;
  --bdna-nav-active: #4ade80;
  --bdna-nav-active-bg: rgba(34, 197, 94, 0.12);
  --bdna-table-header: #334155;
  --bdna-table-row-alt: rgba(15, 23, 42, 0.5);
  --bdna-table-border: #334155;
  --bdna-chart-line: #22c55e;
  --bdna-chart-grid: #334155;
  --bdna-btn-primary-bg: #22c55e;
  --bdna-btn-primary-text: #052e16;
  --bdna-btn-primary-hover: #16a34a;
  --bdna-btn-secondary-bg: #334155;
  --bdna-btn-secondary-text: #f1f5f9;
  --bdna-btn-secondary-border: #475569;
  --bdna-btn-secondary-hover: #475569;
  --bdna-btn-ghost-text: #cbd5e1;
  --bdna-btn-ghost-hover: rgba(148, 163, 184, 0.12);
  --bdna-btn-danger-bg: #dc2626;
  --bdna-btn-danger-text: #fef2f2;
  --bdna-btn-success-bg: #16a34a;
  --bdna-btn-success-text: #ecfdf5;
  --bdna-btn-disabled-opacity: 0.45;
  --bdna-input-bg: #0f172a;
  --bdna-input-border: #475569;
  --bdna-input-text: #f1f5f9;
  --bdna-input-placeholder: #64748b;
  --bdna-progress-bg: #334155;
  --bdna-progress-fill: #22c55e;
  --bdna-header-gradient-start: #1e293b;
  --bdna-header-gradient-end: #0f172a;
  --bg: var(--bdna-bg);
  --surface: var(--bdna-card);
  --surface2: var(--bdna-surface-2);
  --text: var(--bdna-text-primary);
  --muted: var(--bdna-text-muted);
  --text-secondary: var(--bdna-text-secondary);
  --text-muted: var(--bdna-text-muted);
  --accent: var(--bdna-accent);
  /* --accent2 is used by styles.css for TEXT, borders and outlines - never as
     a background-color (verified across every usage). It therefore resolves to
     the readable text variant where a theme defines one, and falls back to the
     fill colour for themes that have not been measured yet. */
  --accent2: var(--bdna-secondary-text, var(--bdna-secondary));
  --warn: var(--bdna-warning);
}

[data-theme="midnight-pro"] {
  color-scheme: dark;
  --bdna-primary: #818cf8; --bdna-secondary: #6366f1; --bdna-accent: #a78bfa;
  --bdna-success: #34d399; --bdna-warning: #fbbf24; --bdna-danger: #fb7185; --bdna-info: #38bdf8;
  --bdna-bg: #0a0a12; --bdna-card: #12121f; --bdna-panel: #161625; --bdna-surface-2: #252538;
  --bdna-border: #3f3f5c; --bdna-divider: #252538;
  --bdna-text-primary: #f4f4f5; --bdna-text-secondary: #d4d4d8; --bdna-text-muted: #a1a1aa; --bdna-text-disabled: #71717a;
  --bdna-link: #a78bfa; --bdna-link-hover: #c4b5fd;
  --bdna-on-primary: #1e1b4b; --bdna-on-accent: #1e1b4b;
  --bdna-nav-active: #a78bfa; --bdna-nav-active-bg: rgba(129, 140, 248, 0.15);
  --bdna-btn-primary-bg: #6366f1; --bdna-btn-primary-text: #eef2ff; --bdna-btn-primary-hover: #4f46e5;
  --bdna-chart-line: #818cf8; --bdna-progress-fill: #818cf8;
  --bdna-header-gradient-start: #161625; --bdna-header-gradient-end: #0a0a12;
}

[data-theme="royal-blue"],
[data-theme="ocean-blue"] {
  color-scheme: dark;
  --bdna-primary: #0ea5e9; --bdna-secondary: #0284c7; --bdna-accent: #38bdf8;
  --bdna-success: #2dd4bf; --bdna-warning: #f59e0b; --bdna-danger: #f43f5e; --bdna-info: #7dd3fc;
  --bdna-bg: #0c1929; --bdna-card: #132337; --bdna-panel: #162a42; --bdna-surface-2: #1e3a5f;
  --bdna-border: #2d4a6f; --bdna-divider: #1e3a5f;
  --bdna-text-primary: #f0f9ff; --bdna-text-secondary: #bae6fd; --bdna-text-muted: #7dd3fc; --bdna-text-disabled: #64748b;
  --bdna-link: #38bdf8; --bdna-link-hover: #7dd3fc;
  --bdna-on-primary: #082f49; --bdna-on-accent: #082f49;
  --bdna-nav-active: #38bdf8; --bdna-nav-active-bg: rgba(14, 165, 233, 0.15);
  --bdna-btn-primary-bg: #0284c7; --bdna-btn-primary-text: #f0f9ff; --bdna-btn-primary-hover: #0369a1;
  --bdna-chart-line: #0ea5e9; --bdna-progress-fill: #0ea5e9;
  --bdna-header-gradient-start: #162a42; --bdna-header-gradient-end: #0c1929;
}

[data-theme="emerald"] {
  color-scheme: dark;
  --bdna-primary: #10b981; --bdna-secondary: #059669; --bdna-accent: #34d399;
  --bdna-success: #6ee7b7; --bdna-warning: #fbbf24; --bdna-danger: #ef4444; --bdna-info: #2dd4bf;
  --bdna-bg: #0a1612; --bdna-card: #0f1f1a; --bdna-panel: #122820; --bdna-surface-2: #1a3d32;
  --bdna-border: #2d5a4a; --bdna-divider: #1a3d32;
  --bdna-text-primary: #ecfdf5; --bdna-text-secondary: #a7f3d0; --bdna-text-muted: #6ee7b7; --bdna-text-disabled: #64748b;
  --bdna-link: #34d399; --bdna-link-hover: #6ee7b7;
  --bdna-on-primary: #022c22; --bdna-on-accent: #022c22;
  --bdna-nav-active: #34d399; --bdna-nav-active-bg: rgba(16, 185, 129, 0.15);
  --bdna-btn-primary-bg: #059669; --bdna-btn-primary-text: #ecfdf5; --bdna-btn-primary-hover: #047857;
  --bdna-chart-line: #10b981; --bdna-progress-fill: #10b981;
  --bdna-header-gradient-start: #122820; --bdna-header-gradient-end: #0a1612;
}

[data-theme="slate"] {
  color-scheme: dark;
  --bdna-primary: #94a3b8; --bdna-secondary: #64748b; --bdna-accent: #cbd5e1;
  --bdna-success: #86efac; --bdna-warning: #fcd34d; --bdna-danger: #fca5a5; --bdna-info: #93c5fd;
  --bdna-bg: #111827; --bdna-card: #1f2937; --bdna-panel: #1f2937; --bdna-surface-2: #374151;
  --bdna-border: #4b5563; --bdna-divider: #374151;
  --bdna-text-primary: #f9fafb; --bdna-text-secondary: #e5e7eb; --bdna-text-muted: #9ca3af; --bdna-text-disabled: #6b7280;
  --bdna-link: #cbd5e1; --bdna-link-hover: #f1f5f9;
  --bdna-on-primary: #111827; --bdna-on-accent: #111827;
  --bdna-nav-active: #e5e7eb; --bdna-nav-active-bg: rgba(148, 163, 184, 0.15);
  --bdna-btn-primary-bg: #475569; --bdna-btn-primary-text: #f9fafb; --bdna-btn-primary-hover: #64748b;
  --bdna-chart-line: #94a3b8; --bdna-progress-fill: #64748b;
  --bdna-header-gradient-start: #1f2937; --bdna-header-gradient-end: #111827;
}

[data-theme="graphite"] {
  color-scheme: dark;
  --bdna-primary: #e5e5e5; --bdna-secondary: #a3a3a3; --bdna-accent: #fafafa;
  --bdna-success: #a3e635; --bdna-warning: #facc15; --bdna-danger: #f87171; --bdna-info: #67e8f9;
  --bdna-bg: #0a0a0a; --bdna-card: #171717; --bdna-panel: #171717; --bdna-surface-2: #262626;
  --bdna-border: #404040; --bdna-divider: #262626;
  --bdna-text-primary: #fafafa; --bdna-text-secondary: #d4d4d4; --bdna-text-muted: #a3a3a3; --bdna-text-disabled: #737373;
  --bdna-link: #fafafa; --bdna-link-hover: #ffffff;
  --bdna-on-primary: #0a0a0a; --bdna-on-accent: #0a0a0a;
  --bdna-nav-active: #fafafa; --bdna-nav-active-bg: rgba(250, 250, 250, 0.1);
  --bdna-btn-primary-bg: #fafafa; --bdna-btn-primary-text: #0a0a0a; --bdna-btn-primary-hover: #e5e5e5;
  --bdna-chart-line: #e5e5e5; --bdna-progress-fill: #a3a3a3;
  --bdna-header-gradient-start: #171717; --bdna-header-gradient-end: #0a0a0a;
}

[data-theme="light"] {
  color-scheme: light;
  --bdna-primary: #15803d; --bdna-secondary: #2563eb; --bdna-accent: #16a34a;
  --bdna-success: #15803d; --bdna-warning: #b45309; --bdna-danger: #dc2626; --bdna-info: #2563eb;
  --bdna-bg: #f8fafc; --bdna-card: #ffffff; --bdna-panel: #ffffff; --bdna-surface-2: #e2e8f0;
  --bdna-border: #cbd5e1; --bdna-divider: #e2e8f0;
  --bdna-text-primary: #0f172a; --bdna-text-secondary: #334155; --bdna-text-muted: #64748b; --bdna-text-disabled: #94a3b8;
  --bdna-link: #15803d; --bdna-link-hover: #166534;
  --bdna-on-primary: #ffffff; --bdna-on-accent: #ffffff;
  --bdna-hover: rgba(15, 23, 42, 0.06);
  --bdna-nav-bg: #ffffff; --bdna-nav-border: #e2e8f0; --bdna-nav-text: #64748b;
  --bdna-nav-active: #15803d; --bdna-nav-active-bg: rgba(22, 163, 74, 0.1);
  --bdna-btn-primary-bg: #16a34a; --bdna-btn-primary-text: #ffffff; --bdna-btn-primary-hover: #15803d;
  --bdna-btn-secondary-bg: #e2e8f0; --bdna-btn-secondary-text: #0f172a;
  --bdna-btn-secondary-border: #cbd5e1; --bdna-btn-secondary-hover: #cbd5e1;
  --bdna-input-bg: #ffffff; --bdna-input-border: #cbd5e1; --bdna-input-text: #0f172a;
  --bdna-success-bg: rgba(22, 163, 74, 0.12); --bdna-success-text: #166534;
  --bdna-warning-bg: rgba(245, 158, 11, 0.12); --bdna-warning-text: #92400e;
  --bdna-danger-bg: rgba(220, 38, 38, 0.1); --bdna-danger-text: #991b1b;
  --bdna-info-bg: rgba(37, 99, 235, 0.1); --bdna-info-text: #1d4ed8;
  --bdna-chart-line: #16a34a; --bdna-progress-fill: #16a34a;
  --bdna-header-gradient-start: #ffffff; --bdna-header-gradient-end: #f8fafc;
}

[data-theme="high-contrast"] {
  color-scheme: dark;
  --bdna-primary: #ffff00; --bdna-secondary: #00ffff; --bdna-accent: #ffff00;
  --bdna-success: #00ff00; --bdna-warning: #ffaa00; --bdna-danger: #ff4444; --bdna-info: #00ccff;
  --bdna-bg: #000000; --bdna-card: #0a0a0a; --bdna-panel: #0a0a0a; --bdna-surface-2: #1a1a1a;
  --bdna-border: #ffffff; --bdna-divider: #666666;
  --bdna-text-primary: #ffffff; --bdna-text-secondary: #eeeeee; --bdna-text-muted: #cccccc; --bdna-text-disabled: #888888;
  --bdna-link: #00ffff; --bdna-link-hover: #ffff00;
  --bdna-on-primary: #000000; --bdna-on-accent: #000000;
  --bdna-nav-active: #ffff00; --bdna-nav-active-bg: rgba(255, 255, 0, 0.15);
  --bdna-btn-primary-bg: #ffff00; --bdna-btn-primary-text: #000000; --bdna-btn-primary-hover: #ffee00;
  --bdna-btn-secondary-bg: #1a1a1a; --bdna-btn-secondary-text: #ffffff; --bdna-btn-secondary-border: #ffffff;
  --bdna-chart-line: #ffff00; --bdna-progress-fill: #ffff00;
  --bdna-header-gradient-start: #0a0a0a; --bdna-header-gradient-end: #000000;
}

[data-theme="founder-gold"] {
  color-scheme: dark;
  --bdna-primary: #d4af37; --bdna-secondary: #b8860b; --bdna-accent: #f5d061;
  --bdna-success: #4ade80; --bdna-warning: #fbbf24; --bdna-danger: #ef4444; --bdna-info: #60a5fa;
  --bdna-bg: #0c0a08; --bdna-card: #1a1610; --bdna-panel: #1f1a12; --bdna-surface-2: #2d2618;
  --bdna-border: #4a3f28; --bdna-divider: #2d2618;
  --bdna-text-primary: #faf6ed; --bdna-text-secondary: #e8dcc8; --bdna-text-muted: #c4b896; --bdna-text-disabled: #8a7a5c;
  --bdna-link: #f5d061; --bdna-link-hover: #fde68a;
  --bdna-on-primary: #1a1208; --bdna-on-accent: #1a1208;
  --bdna-nav-active: #f5d061; --bdna-nav-active-bg: rgba(212, 175, 55, 0.15);
  --bdna-btn-primary-bg: #b8860b; --bdna-btn-primary-text: #faf6ed; --bdna-btn-primary-hover: #d4af37;
  --bdna-chart-line: #d4af37; --bdna-progress-fill: #d4af37;
  --bdna-header-gradient-start: #1f1a12; --bdna-header-gradient-end: #0c0a08;
}

/* ── OLED — true black ── */
[data-theme="oled"] {
  color-scheme: dark;
  --bdna-primary: #ffffff; --bdna-secondary: #a3a3a3; --bdna-accent: #e5e5e5;
  --bdna-success: #86efac; --bdna-warning: #fcd34d; --bdna-danger: #fca5a5; --bdna-info: #93c5fd;
  --bdna-bg: #000000; --bdna-card: #0a0a0a; --bdna-panel: #0a0a0a; --bdna-surface-2: #141414;
  --bdna-border: #262626; --bdna-divider: #141414;
  --bdna-text-primary: #fafafa; --bdna-text-secondary: #d4d4d4; --bdna-text-muted: #a3a3a3; --bdna-text-disabled: #737373;
  --bdna-link: #ffffff; --bdna-link-hover: #e5e5e5;
  --bdna-on-primary: #000000; --bdna-on-accent: #000000;
  --bdna-nav-active: #ffffff; --bdna-nav-active-bg: rgba(255, 255, 255, 0.08);
  --bdna-btn-primary-bg: #fafafa; --bdna-btn-primary-text: #000000; --bdna-btn-primary-hover: #e5e5e5;
  --bdna-chart-line: #ffffff; --bdna-progress-fill: #d4d4d4;
  --bdna-header-gradient-start: #0a0a0a; --bdna-header-gradient-end: #000000;
  --bdna-shadow-sm: none;
  --bdna-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ── Classic BetDNA ── */
[data-theme="classic"] {
  color-scheme: dark;
  --bdna-primary: #22c55e; --bdna-secondary: #16a34a; --bdna-accent: #4ade80;
  --bdna-success: #4ade80; --bdna-warning: #fbbf24; --bdna-danger: #f87171; --bdna-info: #60a5fa;
  --bdna-bg: #111827; --bdna-card: #1f2937; --bdna-panel: #1f2937; --bdna-surface-2: #374151;
  --bdna-border: #4b5563; --bdna-divider: #374151;
  --bdna-text-primary: #f9fafb; --bdna-text-secondary: #e5e7eb; --bdna-text-muted: #9ca3af; --bdna-text-disabled: #6b7280;
  --bdna-link: #4ade80; --bdna-link-hover: #86efac;
  --bdna-on-primary: #052e16; --bdna-on-accent: #052e16;
  --bdna-nav-active: #4ade80; --bdna-nav-active-bg: rgba(34, 197, 94, 0.14);
  --bdna-btn-primary-bg: #22c55e; --bdna-btn-primary-text: #052e16; --bdna-btn-primary-hover: #16a34a;
  --bdna-chart-line: #22c55e; --bdna-progress-fill: #22c55e;
  --bdna-header-gradient-start: #1f2937; --bdna-header-gradient-end: #111827;
}

/* ── Crimson premium ── */
[data-theme="crimson"] {
  color-scheme: dark;
  --bdna-primary: #ef4444; --bdna-secondary: #dc2626; --bdna-accent: #f87171;
  --bdna-success: #4ade80; --bdna-warning: #fbbf24; --bdna-danger: #fca5a5; --bdna-info: #60a5fa;
  --bdna-bg: #120808; --bdna-card: #1c0f0f; --bdna-panel: #221212; --bdna-surface-2: #3d1a1a;
  --bdna-border: #5c2828; --bdna-divider: #3d1a1a;
  --bdna-text-primary: #fef2f2; --bdna-text-secondary: #fecaca; --bdna-text-muted: #f87171; --bdna-text-disabled: #991b1b;
  --bdna-link: #f87171; --bdna-link-hover: #fecaca;
  --bdna-on-primary: #450a0a; --bdna-on-accent: #450a0a;
  --bdna-nav-active: #f87171; --bdna-nav-active-bg: rgba(239, 68, 68, 0.15);
  --bdna-btn-primary-bg: #dc2626; --bdna-btn-primary-text: #fef2f2; --bdna-btn-primary-hover: #b91c1c;
  --bdna-chart-line: #ef4444; --bdna-progress-fill: #ef4444;
  --bdna-header-gradient-start: #221212; --bdna-header-gradient-end: #120808;
}

/* ── Spacing scale ── */
:root {
  --bdna-space-xs: 4px;
  --bdna-space-s: 8px;
  --bdna-space-m: 12px;
  --bdna-space-l: 16px;
  --bdna-space-xl: 24px;
  --bdna-space-xxl: 32px;
  --bdna-radius-sm: 8px;
  --bdna-radius-md: 12px;
  --bdna-radius-lg: 16px;
  --bdna-radius-pill: 999px;
  --bdna-shadow-sm: 0 1px 2px color-mix(in srgb, var(--bdna-bg) 60%, transparent);
  --bdna-shadow-md: 0 4px 12px color-mix(in srgb, var(--bdna-bg) 70%, transparent);
  --bdna-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bdna-type-display: 1.5rem;
  --bdna-type-h1: 1.35rem;
  --bdna-type-h2: 1.15rem;
  --bdna-type-h3: 1rem;
  --bdna-type-title: 0.95rem;
  --bdna-type-subtitle: 0.875rem;
  --bdna-type-body: 0.875rem;
  --bdna-type-caption: 0.8125rem;
  --bdna-type-tiny: 0.75rem;
  --radius: var(--bdna-radius-md);
}

.bdna-display { font-size: var(--bdna-type-display); font-weight: 700; line-height: 1.25; color: var(--bdna-text-primary); }
.bdna-h1 { font-size: var(--bdna-type-h1); font-weight: 700; line-height: 1.3; color: var(--bdna-text-primary); }
.bdna-h2 { font-size: var(--bdna-type-h2); font-weight: 600; line-height: 1.35; color: var(--bdna-text-primary); }
.bdna-h3 { font-size: var(--bdna-type-h3); font-weight: 600; line-height: 1.35; color: var(--bdna-text-primary); }
.bdna-title { font-size: var(--bdna-type-title); font-weight: 600; line-height: 1.35; color: var(--bdna-text-primary); }
.bdna-subtitle { font-size: var(--bdna-type-subtitle); font-weight: 500; line-height: 1.4; color: var(--bdna-text-secondary); }
.bdna-body { font-size: var(--bdna-type-body); line-height: 1.5; color: var(--bdna-text-primary); }
.bdna-caption { font-size: var(--bdna-type-caption); line-height: 1.45; color: var(--bdna-text-muted); }
.bdna-tiny { font-size: var(--bdna-type-tiny); line-height: 1.4; color: var(--bdna-text-muted); }
.bdna-label { font-size: var(--bdna-type-caption); font-weight: 600; color: var(--bdna-text-secondary); display: block; margin-bottom: var(--bdna-space-xs); }

.card, .bdna-card {
  background: var(--bdna-card);
  border-radius: var(--bdna-radius-md);
  padding: var(--bdna-space-l);
  margin-bottom: var(--bdna-space-m);
  border: 1px solid var(--bdna-border);
  box-shadow: var(--bdna-shadow-sm);
  color: var(--bdna-text-primary);
  max-width: 100%;
  overflow: hidden;
}

.btn-primary, .bdna-btn-primary {
  background: var(--bdna-btn-primary-bg);
  color: var(--bdna-btn-primary-text);
  border: none;
  border-radius: var(--bdna-radius-sm);
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) { background: var(--bdna-btn-primary-hover); }
.btn-primary:disabled { opacity: var(--bdna-btn-disabled-opacity); }
.btn-primary:focus-visible { outline: 2px solid var(--bdna-focus); outline-offset: 2px; }

.btn-secondary, .bdna-btn-secondary {
  background: var(--bdna-btn-secondary-bg);
  color: var(--bdna-btn-secondary-text);
  border: 1px solid var(--bdna-btn-secondary-border);
  border-radius: var(--bdna-radius-sm);
}
.btn-secondary:hover:not(:disabled) { background: var(--bdna-btn-secondary-hover); }

.link-btn, .btn-ghost { color: var(--bdna-link); background: transparent; border: none; }
.link-btn:hover { color: var(--bdna-link-hover); }

.btn-danger, .bdna-btn-danger { background: var(--bdna-btn-danger-bg); color: var(--bdna-btn-danger-text); border: none; border-radius: var(--bdna-radius-sm); }
.btn-success, .bdna-btn-success { background: var(--bdna-btn-success-bg); color: var(--bdna-btn-success-text); border: none; border-radius: var(--bdna-radius-sm); }
.btn-sm { min-height: 36px; font-size: var(--bdna-type-tiny); }
.btn-lg { min-height: 52px; font-size: var(--bdna-type-body); }

.bdna-input, .field input, .field select {
  background: var(--bdna-input-bg);
  border: 1px solid var(--bdna-input-border);
  color: var(--bdna-input-text);
  border-radius: var(--bdna-radius-sm);
}

.pos { color: var(--bdna-success) !important; }
.neg { color: var(--bdna-danger) !important; }
.warn-txt { color: var(--bdna-warning) !important; }

.badge.live { background: var(--bdna-success-bg); color: var(--bdna-success-text); border: 1px solid var(--bdna-success-border); }
.betdna-badge-status-ok, .betdna-badge-validation-pass { background: var(--bdna-success-bg); color: var(--bdna-success-text); border: 1px solid var(--bdna-success-border); }
.betdna-badge-status-warn, .betdna-badge-validation-partial { background: var(--bdna-warning-bg); color: var(--bdna-warning-text); border: 1px solid var(--bdna-warning-border); }
.betdna-badge-status-error, .betdna-badge-validation-fail { background: var(--bdna-danger-bg); color: var(--bdna-danger-text); border: 1px solid var(--bdna-danger-border); }

.bottom-nav { background: var(--bdna-nav-bg); border-top: 1px solid var(--bdna-nav-border); }
.nav-btn { color: var(--bdna-nav-text); }
.nav-btn.active { color: var(--bdna-nav-active); background: var(--bdna-nav-active-bg); }

.header { background: linear-gradient(180deg, var(--bdna-header-gradient-start) 0%, var(--bdna-header-gradient-end) 100%); }
.header h1 { color: var(--bdna-text-primary); }
.subtitle { color: var(--bdna-text-secondary); }
body { background: var(--bdna-bg); color: var(--bdna-text-primary); font-family: var(--bdna-font-family); }

.card-rank { background: var(--bdna-accent); color: var(--bdna-on-accent); }
.card-rank.example { background: var(--bdna-warning); color: var(--bdna-on-warning); }
.match-name, .bet-row strong, h1, h2, h3, h4, strong { color: var(--bdna-text-primary); }
.meta, .small, .muted, .tap-hint { color: var(--bdna-text-muted); }
.tab.active { background: var(--bdna-secondary); color: var(--bdna-on-primary); }
.free-badge { background: var(--bdna-success-bg); color: var(--bdna-success-text); }
.acca-leg.hit { color: var(--bdna-success); }
.acca-leg.miss { color: var(--bdna-danger); }
.stat-val { color: var(--bdna-accent); }
.stat-lbl { color: var(--bdna-text-muted); }
.lab-opt-progress-fill { background: var(--bdna-progress-fill); }
.lab-opt-progress { background: var(--bdna-progress-bg); }

::selection { background: var(--bdna-selection-bg); color: var(--bdna-selection-text); }

.bdna-theme-swatches { display: flex; flex-wrap: wrap; gap: var(--bdna-space-s); margin-top: var(--bdna-space-m); }
.bdna-theme-swatch {
  flex: 1 1 calc(33% - var(--bdna-space-s));
  min-width: 88px;
  padding: var(--bdna-space-s);
  border: 2px solid var(--bdna-border);
  border-radius: var(--bdna-radius-sm);
  background: var(--bdna-panel);
  color: var(--bdna-text-secondary);
  font-size: var(--bdna-type-tiny);
  cursor: pointer;
}
.bdna-theme-swatch.active { border-color: var(--bdna-accent); color: var(--bdna-accent); font-weight: 700; }
.bdna-theme-field select { width: 100%; }

.bdna-theme-swatches-wrap { display: flex; flex-direction: column; gap: var(--bdna-space-m); margin-top: var(--bdna-space-m); }
.bdna-theme-group-label { margin: 0 0 var(--bdna-space-xs); font-weight: 600; }

/* ── EP-005 accessibility & motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root, [data-theme] {
    --bdna-border: color-mix(in srgb, var(--bdna-text-primary) 40%, var(--bdna-border));
    --bdna-focus: #ffffff;
  }
}

:focus-visible {
  outline: 2px solid var(--bdna-focus);
  outline-offset: 2px;
}

.nav-btn, .btn-primary, .btn-secondary, .bdna-theme-swatch {
  min-height: 44px;
}

@media (max-width: 480px) {
  :root {
    --bdna-type-body: 0.9375rem;
    --bdna-type-caption: 0.875rem;
  }
}