/* Dark theme -- semantic variables derived from brand colors */
:root.theme-dark {
  /* --- Backgrounds --- */
  --bg: #0b0f14;
  --bg-deep: #070a0f;
  --bg-elevated: #0f1419;

  /* --- Panels (containers, cards) --- */
  --panel: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  --panel-hover: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --panel-active: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --panel-strong: color-mix(in srgb, var(--brand-primary) 22%, transparent);

  /* --- Text --- */
  --text: rgba(255, 255, 255, 0.92);
  --text-muted: rgba(255, 255, 255, 0.68);
  --text-faint: rgba(255, 255, 255, 0.42);
  --text-inverse: #0b0f14;
  --text-bright: rgba(255, 255, 255, 0.88);

  /* --- Borders --- */
  --border: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-faint: rgba(255, 255, 255, 0.05);

  /* --- Accent (primary brand) --- */
  --accent: var(--brand-primary);
  --accent-bright: color-mix(in srgb, var(--brand-primary) 115%, black);
  --accent-bg: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --accent-bg-hover: color-mix(in srgb, var(--brand-primary) 35%, transparent);
  --accent-bg-subtle: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --accent-border: color-mix(in srgb, var(--brand-primary) 35%, transparent);
  --accent-border-hover: color-mix(in srgb, var(--brand-primary) 55%, transparent);
  --accent-glow: color-mix(in srgb, var(--brand-primary) 18%, transparent);

  /* --- Accent2 (secondary brand) --- */
  --accent2: var(--brand-accent);
  --accent2-bg: color-mix(in srgb, var(--brand-accent) 18%, transparent);
  --accent2-bg-hover: color-mix(in srgb, var(--brand-accent) 28%, transparent);
  --accent2-border: color-mix(in srgb, var(--brand-accent) 28%, transparent);
  --accent2-border-hover: color-mix(in srgb, var(--brand-accent) 55%, transparent);
  --accent2-glow: color-mix(in srgb, var(--brand-accent) 16%, transparent);

  /* --- Danger / Success / Warning / Info --- */
  --danger: var(--brand-danger);
  --danger-bg: color-mix(in srgb, var(--brand-danger) 10%, transparent);
  --danger-glow: color-mix(in srgb, var(--brand-danger) 15%, transparent);
  --success: var(--brand-success);
  --success-bg: color-mix(in srgb, var(--brand-success) 16%, transparent);
  --success-border: color-mix(in srgb, var(--brand-success) 50%, transparent);
  --warn: var(--brand-warn);
  --warn-bg: color-mix(in srgb, var(--brand-warn) 16%, transparent);
  --warn-border: color-mix(in srgb, var(--brand-warn) 50%, transparent);
  --info: var(--brand-info);
  --info-bg: color-mix(in srgb, var(--brand-info) 16%, transparent);
  --info-border: color-mix(in srgb, var(--brand-info) 50%, transparent);

  /* --- Links --- */
  --link-color: var(--brand-primary);
  --link-hover-color: color-mix(in srgb, var(--brand-primary) 115%, white);
  --link-underline: color-mix(in srgb, var(--brand-primary) 55%, transparent);
  --link-hover-underline: color-mix(in srgb, var(--brand-accent) 70%, transparent);

  /* --- Buttons --- */
  --button-bg: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --button-hover: color-mix(in srgb, var(--brand-primary) 30%, transparent);
  --button-border: color-mix(in srgb, var(--brand-accent) 28%, transparent);
  --button-hover-border: color-mix(in srgb, var(--brand-accent) 50%, transparent);

  /* --- Shadows --- */
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 26px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5);

  /* --- Overlays --- */
  --overlay: rgba(0, 0, 0, 0.35);
  --overlay-heavy: rgba(0, 0, 0, 0.9);
  --overlay-medium: rgba(0, 0, 0, 0.5);

  /* --- Focus --- */
  --focus-ring: color-mix(in srgb, var(--brand-primary) 85%, transparent);

  /* --- Gradients --- */
  --grad-h1: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 60%, var(--text) 100%);
  --grad-hero: radial-gradient(1200px 700px at 20% 10%, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 55%),
               radial-gradient(900px 600px at 80% 20%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 55%),
               radial-gradient(800px 600px at 60% 80%, color-mix(in srgb, var(--brand-danger) 10%, transparent), transparent 55%),
               linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  --grad-card: linear-gradient(135deg, var(--panel) 0%, color-mix(in srgb, var(--brand-primary) 3%, transparent) 100%);
  --grad-card-accent: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 22%, transparent) 0%, color-mix(in srgb, var(--brand-accent) 18%, transparent) 100%);
  --grad-navbar: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, color-mix(in srgb, var(--brand-primary) 8%, rgba(0, 0, 0, 0.92)) 72%);
  --grad-navbar-pill: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--brand-primary) 8%, rgba(0, 0, 0, 0.92)), color-mix(in srgb, var(--bg-deep) 98%, transparent) 68%);

  /* --- Layout (non-color, but theme-level) --- */
  --radius: 18px;
  --radius2: 28px;
  --max: 1080px;

  /* --- Form elements --- */
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-bg-alt: #483d8b;
  --placeholder: rgba(255, 255, 255, 0.6);

  /* --- Tooltip --- */
  --tooltip-bg: rgba(8, 10, 12, 0.95);
}