/**
 * eCard centralized theme token system.
 * Add a theme by defining token values only — layout stays identical app-wide.
 *
 * Token layers:
 * 1. --brand-*     Platform / semantic constants (not theme-scoped)
 * 2. --bg-primary, --text-primary, …  Per-theme semantic tokens
 * 3. Legacy aliases (--bg-top, --text, …) for existing component rules
 */

/* ── Brand & semantic constants (shared across themes) ── */
:root {
  --brand-linkedin: #0a66c2;
  --brand-twitter: #1da1f2;
  --brand-instagram-a: #f09433;
  --brand-instagram-b: #e6683c;
  --brand-instagram-c: #dc2743;
  --brand-instagram-d: #cc2366;
  --brand-instagram-e: #bc1888;
  --brand-youtube: #ff0000;
  --brand-facebook: #1877f2;
  --brand-tiktok: #010101;
  --brand-github: #24292f;
  --brand-pinterest: #bd081c;
  --brand-snapchat: #fffc00;
  --brand-threads: #000000;
  --brand-whatsapp: #25d366;
  --brand-link: #6b7280;
  --brand-icon-light: #ffffff;
  --brand-icon-dark: #111111;

  --danger: #dc3545;
  --danger-hover: #e04555;
  --danger-text: #fca5a5;
  --danger-bg-soft: rgba(248, 113, 113, 0.2);
  --danger-bg-soft-hover: rgba(248, 113, 113, 0.45);
  --text-on-danger: #ffffff;

  --success: #34d399;
  --success-text: #042f1a;
  --error-text: #f87171;
  --error-bg: #f87171;
  --error-text-on: #450a0a;

  --shadow-neutral: rgba(0, 0, 0, 0.35);
  --shadow-neutral-strong: rgba(0, 0, 0, 0.5);
  --drag-opacity: 0.55;

  --header-auth-border: rgba(255, 255, 255, 0.28);
  --header-auth-border-hover: rgba(255, 255, 255, 0.42);
}

/* ── Classic Blue (default) ── */
:root,
:is(
    body:not([data-user-theme]),
    #card-shell:not([data-design]),
    .theme-preview-shell:not([data-design])
  ) {
  --bg-primary: #0c1526;
  --bg-secondary: #060d18;
  --bg-gradient-mid: #0a1322;
  --card-bg: #152238;
  --surface: rgba(22, 38, 66, 0.72);
  --surface-glass: rgba(22, 38, 66, 0.72);
  --button-bg: #1e3458;
  --button-hover: #243f66;
  --text-primary: #ffffff;
  --text-secondary: #8b9cb5;
  --text-tertiary: #6b7d96;
  --accent: #4d9fff;
  --accent-light: rgba(77, 159, 255, 0.35);
  --accent-subtle: rgba(77, 159, 255, 0.15);
  --accent-border: rgba(77, 159, 255, 0.45);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.06);
  --divider: rgba(255, 255, 255, 0.06);
  --icon-bg: transparent;
  --icon-color: var(--accent);
  --contact-icon-bg-start: #2a5fad;
  --contact-icon-bg-end: #1e4a8c;
  --contact-icon-color: #c5dcff;
  --avatar-ring-start: #5eb0ff;
  --avatar-ring-end: #3d7fd9;
  --avatar-ring-glow: rgba(77, 159, 255, 0.45);
  --avatar-border: #0c1526;
  --avatar-placeholder-start: rgba(30, 52, 88, 0.95);
  --avatar-placeholder-end: rgba(12, 22, 40, 0.98);
  --avatar-placeholder-text: rgba(255, 255, 255, 0.85);
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.7);
  --page-bg: #050a12;
  --overlay: rgba(0, 0, 0, 0.65);
  --overlay-strong: rgba(0, 0, 0, 0.72);
  --shadow-card: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: 0 6px 20px rgba(37, 99, 235, 0.08);
  --menu-bg: rgba(12, 22, 40, 0.98);
  --menu-border: rgba(77, 159, 255, 0.35);
  --menu-hover: rgba(77, 159, 255, 0.15);
  --modal-bg-start: #152238;
  --modal-bg-end: #0c1526;
  --modal-border: rgba(77, 159, 255, 0.25);
  --input-bg: rgba(0, 0, 0, 0.25);
  --input-border: rgba(255, 255, 255, 0.12);
  --input-border-soft: rgba(255, 255, 255, 0.1);
  --cancel-bg: rgba(255, 255, 255, 0.08);
  --edit-outline: rgba(77, 159, 255, 0.65);
  --drop-target-ring: rgba(77, 159, 255, 0.75);
  --add-btn-border: rgba(77, 159, 255, 0.45);
  --add-btn-bg: rgba(77, 159, 255, 0.08);
  --add-btn-bg-hover: rgba(77, 159, 255, 0.16);
  --drag-handle-bg: rgba(77, 159, 255, 0.15);
  --move-btn-bg: rgba(77, 159, 255, 0.18);
  --move-btn-bg-hover: rgba(77, 159, 255, 0.32);
  --move-btn-border: rgba(8, 14, 28, 0.92);
  --apply-disabled-bg: rgba(77, 159, 255, 0.35);
  --apply-disabled-text: rgba(6, 16, 24, 0.65);
  --qr-image-bg: #ffffff;
  --guest-btn-primary-border: #7eb8ff;
  --pill-border: rgba(255, 255, 255, 0.06);
  --action-border: rgba(255, 255, 255, 0.05);
  --icon-size: 22px;
  --icon-bg-radius: 0;
  --themes-page-bg: #eef2f7;
  --themes-panel-bg: #ffffff;
  --themes-border: rgba(15, 23, 42, 0.1);
}

/* ── Midnight ── */
:is(body[data-user-theme="midnight"], #card-shell[data-design="midnight"], .theme-preview-shell[data-design="midnight"]) {
  --bg-primary: #0a0a12;
  --bg-secondary: #030308;
  --bg-gradient-mid: #06060e;
  --card-bg: #16161f;
  --surface: rgba(30, 30, 46, 0.78);
  --surface-glass: rgba(30, 30, 46, 0.78);
  --button-bg: #1e1e2e;
  --button-hover: #28283d;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --accent: #818cf8;
  --accent-light: rgba(129, 140, 248, 0.35);
  --accent-subtle: rgba(129, 140, 248, 0.15);
  --accent-border: rgba(129, 140, 248, 0.45);
  --accent-contrast: #0f0f18;
  --contact-icon-bg-start: #4f46e5;
  --contact-icon-bg-end: #3730a3;
  --contact-icon-color: #e0e7ff;
  --avatar-ring-start: #a5b4fc;
  --avatar-ring-end: #6366f1;
  --avatar-ring-glow: rgba(129, 140, 248, 0.45);
  --avatar-border: #0a0a12;
  --page-bg: #030308;
  --menu-bg: rgba(12, 12, 20, 0.98);
  --menu-border: rgba(129, 140, 248, 0.35);
  --menu-hover: rgba(129, 140, 248, 0.15);
  --modal-bg-start: #16161f;
  --modal-bg-end: #0a0a12;
  --modal-border: rgba(129, 140, 248, 0.25);
  --cancel-bg: rgba(255, 255, 255, 0.08);
  --edit-outline: rgba(129, 140, 248, 0.65);
  --drop-target-ring: rgba(129, 140, 248, 0.75);
  --add-btn-border: rgba(129, 140, 248, 0.45);
  --add-btn-bg: rgba(129, 140, 248, 0.08);
  --add-btn-bg-hover: rgba(129, 140, 248, 0.16);
  --drag-handle-bg: rgba(129, 140, 248, 0.15);
  --move-btn-bg: rgba(129, 140, 248, 0.18);
  --move-btn-bg-hover: rgba(129, 140, 248, 0.32);
  --apply-disabled-bg: rgba(129, 140, 248, 0.35);
  --guest-btn-primary-border: #a5b4fc;
}

/* ── Ocean ── */
:is(body[data-user-theme="ocean"], #card-shell[data-design="ocean"], .theme-preview-shell[data-design="ocean"]) {
  --bg-primary: #0a1628;
  --bg-secondary: #041018;
  --bg-gradient-mid: #071220;
  --card-bg: #0f2838;
  --surface: rgba(15, 45, 55, 0.75);
  --surface-glass: rgba(15, 45, 55, 0.75);
  --button-bg: #143040;
  --button-hover: #1a3d50;
  --accent: #2dd4bf;
  --accent-light: rgba(45, 212, 191, 0.35);
  --accent-subtle: rgba(45, 212, 191, 0.15);
  --accent-border: rgba(45, 212, 191, 0.45);
  --accent-contrast: #042f2e;
  --contact-icon-bg-start: #0d9488;
  --contact-icon-bg-end: #0f766e;
  --contact-icon-color: #ccfbf1;
  --avatar-ring-start: #5eead4;
  --avatar-ring-end: #14b8a6;
  --avatar-ring-glow: rgba(45, 212, 191, 0.45);
  --avatar-border: #0a1628;
  --page-bg: #041018;
  --menu-bg: rgba(8, 20, 32, 0.98);
  --menu-border: rgba(45, 212, 191, 0.35);
  --menu-hover: rgba(45, 212, 191, 0.15);
  --modal-bg-start: #0f2838;
  --modal-bg-end: #0a1628;
  --modal-border: rgba(45, 212, 191, 0.25);
  --cancel-bg: rgba(255, 255, 255, 0.08);
  --edit-outline: rgba(45, 212, 191, 0.65);
  --drop-target-ring: rgba(45, 212, 191, 0.75);
  --add-btn-border: rgba(45, 212, 191, 0.45);
  --add-btn-bg: rgba(45, 212, 191, 0.08);
  --add-btn-bg-hover: rgba(45, 212, 191, 0.16);
  --drag-handle-bg: rgba(45, 212, 191, 0.15);
  --move-btn-bg: rgba(45, 212, 191, 0.18);
  --move-btn-bg-hover: rgba(45, 212, 191, 0.32);
  --apply-disabled-bg: rgba(45, 212, 191, 0.35);
  --guest-btn-primary-border: #5eead4;
}

/* ── Sunset ── */
:is(body[data-user-theme="sunset"], #card-shell[data-design="sunset"], .theme-preview-shell[data-design="sunset"]) {
  --bg-primary: #1c0a2e;
  --bg-secondary: #0f0518;
  --bg-gradient-mid: #160820;
  --card-bg: #2a1535;
  --surface: rgba(60, 25, 70, 0.78);
  --surface-glass: rgba(60, 25, 70, 0.78);
  --button-bg: #3a1f45;
  --button-hover: #452550;
  --accent: #fb923c;
  --accent-light: rgba(251, 146, 60, 0.35);
  --accent-subtle: rgba(251, 146, 60, 0.15);
  --accent-border: rgba(251, 146, 60, 0.45);
  --accent-contrast: #1c0a02;
  --contact-icon-bg-start: #ea580c;
  --contact-icon-bg-end: #c2410c;
  --contact-icon-color: #ffedd5;
  --avatar-ring-start: #fdba74;
  --avatar-ring-end: #f97316;
  --avatar-ring-glow: rgba(251, 146, 60, 0.45);
  --avatar-border: #1c0a2e;
  --page-bg: #0f0518;
  --menu-bg: rgba(20, 8, 28, 0.98);
  --menu-border: rgba(251, 146, 60, 0.35);
  --menu-hover: rgba(251, 146, 60, 0.15);
  --modal-bg-start: #2a1535;
  --modal-bg-end: #1c0a2e;
  --modal-border: rgba(251, 146, 60, 0.25);
  --cancel-bg: rgba(255, 255, 255, 0.08);
  --edit-outline: rgba(251, 146, 60, 0.65);
  --drop-target-ring: rgba(251, 146, 60, 0.75);
  --add-btn-border: rgba(251, 146, 60, 0.45);
  --add-btn-bg: rgba(251, 146, 60, 0.08);
  --add-btn-bg-hover: rgba(251, 146, 60, 0.16);
  --drag-handle-bg: rgba(251, 146, 60, 0.15);
  --move-btn-bg: rgba(251, 146, 60, 0.18);
  --move-btn-bg-hover: rgba(251, 146, 60, 0.32);
  --apply-disabled-bg: rgba(251, 146, 60, 0.35);
  --guest-btn-primary-border: #fdba74;
}

/* ── White ── */
:is(body[data-user-theme="white"], #card-shell[data-design="white"], .theme-preview-shell[data-design="white"]) {
  --bg-primary: #ffffff;
  --bg-secondary: #f1f5f9;
  --bg-gradient-mid: #f8fafc;
  --card-bg: #ffffff;
  --surface: rgba(255, 255, 255, 0.98);
  --surface-glass: rgba(255, 255, 255, 0.98);
  --button-bg: #e2e8f0;
  --button-hover: #cbd5e1;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --accent: #2563eb;
  --accent-light: rgba(37, 99, 235, 0.18);
  --accent-subtle: rgba(37, 99, 235, 0.1);
  --accent-border: rgba(37, 99, 235, 0.35);
  --accent-contrast: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --divider: rgba(15, 23, 42, 0.1);
  --icon-bg: #e0ecff;
  --icon-color: #2563eb;
  --contact-icon-bg-start: #3b82f6;
  --contact-icon-bg-end: #2563eb;
  --contact-icon-color: #dbeafe;
  --avatar-ring-start: #93c5fd;
  --avatar-ring-end: #2563eb;
  --avatar-ring-glow: rgba(37, 99, 235, 0.25);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #e2e8f0;
  --avatar-placeholder-end: #f8fafc;
  --avatar-placeholder-text: #2563eb;
  --status-online: #059669;
  --status-online-glow: rgba(5, 150, 105, 0.45);
  --page-bg: #f1f5f9;
  --overlay: rgba(15, 23, 42, 0.45);
  --overlay-strong: rgba(15, 23, 42, 0.55);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.12);
  --menu-bg: #ffffff;
  --menu-border: rgba(15, 23, 42, 0.12);
  --menu-hover: rgba(37, 99, 235, 0.08);
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f8fafc;
  --modal-border: rgba(15, 23, 42, 0.12);
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-soft: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(37, 99, 235, 0.45);
  --drop-target-ring: rgba(37, 99, 235, 0.55);
  --add-btn-border: rgba(37, 99, 235, 0.35);
  --add-btn-bg: rgba(37, 99, 235, 0.06);
  --add-btn-bg-hover: rgba(37, 99, 235, 0.12);
  --drag-handle-bg: rgba(37, 99, 235, 0.1);
  --move-btn-bg: rgba(37, 99, 235, 0.12);
  --move-btn-bg-hover: rgba(37, 99, 235, 0.22);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --apply-disabled-bg: rgba(37, 99, 235, 0.2);
  --apply-disabled-text: rgba(15, 23, 42, 0.45);
  --pill-border: rgba(15, 23, 42, 0.08);
  --header-auth-border: #cbd5e1;
  --header-auth-border-hover: #94a3b8;
  --action-border: rgba(15, 23, 42, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #93c5fd;
}

/* ── Arctic White ── */
:is(body[data-user-theme="arctic-white"], #card-shell[data-design="arctic-white"], .theme-preview-shell[data-design="arctic-white"]) {
  --bg-primary: #f8fafc;
  --bg-secondary: #eef4ff;
  --bg-gradient-mid: #f4f7fb;
  --card-bg: #ffffff;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.98);
  --button-bg: #dbeafe;
  --button-hover: #bfdbfe;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #64748b;
  --accent: #2563eb;
  --accent-light: rgba(96, 165, 250, 0.35);
  --accent-subtle: rgba(37, 99, 235, 0.12);
  --accent-border: rgba(37, 99, 235, 0.3);
  --accent-contrast: #ffffff;
  --border: #e2e8f0;
  --divider: #e5e7eb;
  --icon-bg: #e0ecff;
  --icon-color: #2563eb;
  --contact-icon-bg-start: #60a5fa;
  --contact-icon-bg-end: #2563eb;
  --contact-icon-color: #eff6ff;
  --avatar-ring-start: #60a5fa;
  --avatar-ring-end: #2563eb;
  --avatar-ring-glow: rgba(37, 99, 235, 0.15);
  --avatar-border: #e2e8f0;
  --avatar-placeholder-start: #eef4ff;
  --avatar-placeholder-end: #ffffff;
  --avatar-placeholder-text: #2563eb;
  --status-online: #10b981;
  --status-online-glow: rgba(16, 185, 129, 0.45);
  --page-bg: #eef4ff;
  --overlay: rgba(15, 23, 42, 0.4);
  --overlay-strong: rgba(15, 23, 42, 0.5);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px #e2e8f0;
  --shadow-button: 0 6px 20px rgba(37, 99, 235, 0.15);
  --menu-bg: #ffffff;
  --menu-border: #e2e8f0;
  --menu-hover: #eef4ff;
  --modal-bg-start: #ffffff;
  --modal-bg-end: #f8fafc;
  --modal-border: #e2e8f0;
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --cancel-bg: #f1f5f9;
  --edit-outline: rgba(37, 99, 235, 0.4);
  --drop-target-ring: rgba(37, 99, 235, 0.5);
  --add-btn-border: rgba(37, 99, 235, 0.3);
  --add-btn-bg: rgba(37, 99, 235, 0.05);
  --add-btn-bg-hover: rgba(37, 99, 235, 0.1);
  --drag-handle-bg: rgba(37, 99, 235, 0.1);
  --move-btn-bg: rgba(37, 99, 235, 0.12);
  --move-btn-bg-hover: rgba(37, 99, 235, 0.2);
  --move-btn-border: rgba(255, 255, 255, 0.95);
  --pill-border: #e2e8f0;
  --header-auth-border: #cbd5e1;
  --header-auth-border-hover: #94a3b8;
  --action-border: #e2e8f0;
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #93c5fd;
}

/* ── Executive Onyx (NEW — premium enterprise) ── */
:is(body[data-user-theme="executive-onyx"], #card-shell[data-design="executive-onyx"], .theme-preview-shell[data-design="executive-onyx"]) {
  --bg-primary: #141418;
  --bg-secondary: #0a0a0d;
  --bg-gradient-mid: #101014;
  --card-bg: #1c1c22;
  --surface: rgba(28, 28, 34, 0.88);
  --surface-glass: rgba(28, 28, 34, 0.88);
  --button-bg: #26262e;
  --button-hover: #32323c;
  --text-primary: #f7f6f3;
  --text-secondary: #a1a09a;
  --text-tertiary: #787770;
  --accent: #c4a35a;
  --accent-light: rgba(196, 163, 90, 0.28);
  --accent-subtle: rgba(196, 163, 90, 0.14);
  --accent-border: rgba(196, 163, 90, 0.42);
  --accent-contrast: #1a1814;
  --border: rgba(255, 255, 255, 0.07);
  --divider: rgba(255, 255, 255, 0.06);
  --icon-bg: rgba(196, 163, 90, 0.14);
  --icon-color: #d4b96e;
  --contact-icon-bg-start: #5c5346;
  --contact-icon-bg-end: #3d3830;
  --contact-icon-color: #f0e6d0;
  --avatar-ring-start: #dfc588;
  --avatar-ring-end: #b8923f;
  --avatar-ring-glow: rgba(196, 163, 90, 0.35);
  --avatar-border: #141418;
  --avatar-placeholder-start: rgba(38, 38, 46, 0.95);
  --avatar-placeholder-end: rgba(20, 20, 24, 0.98);
  --avatar-placeholder-text: #d4b96e;
  --status-online: #4ade80;
  --status-online-glow: rgba(74, 222, 128, 0.5);
  --page-bg: #08080a;
  --overlay: rgba(0, 0, 0, 0.72);
  --overlay-strong: rgba(0, 0, 0, 0.78);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.5);
  --menu-bg: rgba(20, 20, 24, 0.98);
  --menu-border: rgba(196, 163, 90, 0.28);
  --menu-hover: rgba(196, 163, 90, 0.12);
  --modal-bg-start: #1c1c22;
  --modal-bg-end: #141418;
  --modal-border: rgba(196, 163, 90, 0.22);
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-border: rgba(255, 255, 255, 0.1);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(196, 163, 90, 0.55);
  --drop-target-ring: rgba(196, 163, 90, 0.65);
  --add-btn-border: rgba(196, 163, 90, 0.4);
  --add-btn-bg: rgba(196, 163, 90, 0.06);
  --add-btn-bg-hover: rgba(196, 163, 90, 0.12);
  --drag-handle-bg: rgba(196, 163, 90, 0.12);
  --move-btn-bg: rgba(196, 163, 90, 0.16);
  --move-btn-bg-hover: rgba(196, 163, 90, 0.28);
  --move-btn-border: rgba(10, 10, 13, 0.92);
  --apply-disabled-bg: rgba(196, 163, 90, 0.25);
  --apply-disabled-text: rgba(26, 24, 20, 0.65);
  --pill-border: rgba(255, 255, 255, 0.07);
  --action-border: rgba(255, 255, 255, 0.05);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #dfc588;
}

/* ── Ivory Prestige (warm ivory + wine accent) ── */
:is(body[data-user-theme="ivory-prestige"], #card-shell[data-design="ivory-prestige"], .theme-preview-shell[data-design="ivory-prestige"]) {
  --bg-primary: #faf7f2;
  --bg-secondary: #f0ebe3;
  --bg-gradient-mid: #f5f1ea;
  --card-bg: #fffcf7;
  --surface: rgba(255, 252, 247, 0.98);
  --surface-glass: rgba(255, 252, 247, 0.98);
  --button-bg: #ebe4d9;
  --button-hover: #ddd4c6;
  --text-primary: #2a2420;
  --text-secondary: #5c534a;
  --text-tertiary: #8a7f73;
  --accent: #8b3a4a;
  --accent-light: rgba(139, 58, 74, 0.22);
  --accent-subtle: rgba(139, 58, 74, 0.1);
  --accent-border: rgba(139, 58, 74, 0.35);
  --accent-contrast: #fffcf7;
  --border: rgba(42, 36, 32, 0.1);
  --divider: rgba(42, 36, 32, 0.08);
  --icon-bg: #f0e6dc;
  --icon-color: #8b3a4a;
  --contact-icon-bg-start: #9e4555;
  --contact-icon-bg-end: #7a3342;
  --contact-icon-color: #fce8ec;
  --avatar-ring-start: #c4956a;
  --avatar-ring-end: #8b3a4a;
  --avatar-ring-glow: rgba(139, 58, 74, 0.25);
  --avatar-border: #ebe4d9;
  --avatar-placeholder-start: #ebe4d9;
  --avatar-placeholder-end: #faf7f2;
  --avatar-placeholder-text: #8b3a4a;
  --status-online: #2d6a4f;
  --status-online-glow: rgba(45, 106, 79, 0.45);
  --page-bg: #f0ebe3;
  --overlay: rgba(42, 36, 32, 0.42);
  --overlay-strong: rgba(42, 36, 32, 0.52);
  --shadow-card: 0 10px 30px rgba(42, 36, 32, 0.07), 0 0 0 1px rgba(42, 36, 32, 0.06);
  --shadow-modal: 0 24px 64px rgba(42, 36, 32, 0.1);
  --shadow-float: 0 12px 40px rgba(42, 36, 32, 0.08);
  --shadow-button: 0 6px 20px rgba(139, 58, 74, 0.12);
  --menu-bg: #fffcf7;
  --menu-border: rgba(42, 36, 32, 0.1);
  --menu-hover: rgba(139, 58, 74, 0.06);
  --modal-bg-start: #fffcf7;
  --modal-bg-end: #faf7f2;
  --modal-border: rgba(42, 36, 32, 0.1);
  --input-bg: #f5f1ea;
  --input-border: #ddd4c6;
  --input-border-soft: #ebe4d9;
  --cancel-bg: #f0ebe3;
  --edit-outline: rgba(139, 58, 74, 0.42);
  --drop-target-ring: rgba(139, 58, 74, 0.5);
  --add-btn-border: rgba(139, 58, 74, 0.32);
  --add-btn-bg: rgba(139, 58, 74, 0.05);
  --add-btn-bg-hover: rgba(139, 58, 74, 0.1);
  --drag-handle-bg: rgba(139, 58, 74, 0.08);
  --move-btn-bg: rgba(139, 58, 74, 0.1);
  --move-btn-bg-hover: rgba(139, 58, 74, 0.18);
  --move-btn-border: rgba(255, 252, 247, 0.95);
  --apply-disabled-bg: rgba(139, 58, 74, 0.18);
  --apply-disabled-text: rgba(42, 36, 32, 0.45);
  --qr-image-bg: #fffcf7;
  --pill-border: rgba(42, 36, 32, 0.08);
  --header-auth-border: rgba(42, 36, 32, 0.22);
  --header-auth-border-hover: rgba(42, 36, 32, 0.36);
  --action-border: rgba(42, 36, 32, 0.08);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c4956a;
}

/* ── Royal Ivory (elegant — champagne gold on warm ivory) ── */
:is(body[data-user-theme="royal-ivory"], #card-shell[data-design="royal-ivory"], .theme-preview-shell[data-design="royal-ivory"]) {
  --bg-primary: #faf8f4;
  --bg-secondary: #f2ece2;
  --bg-gradient-mid: #f7f3eb;
  --card-bg: #fffdf9;
  --surface: rgba(255, 253, 249, 0.98);
  --surface-glass: rgba(255, 253, 249, 0.98);
  --button-bg: #ebe3d0;
  --button-hover: #dfd2b8;
  --action-btn-bg: #ebe3d0;
  --action-btn-text: #1f1c18;
  --action-btn-hover-bg: #dfd2b8;
  --action-btn-hover-text: #1a1714;
  --action-btn-border: rgba(154, 123, 60, 0.32);
  --action-btn-icon-color: #7a5c24;
  --text-primary: #1f1c18;
  --text-secondary: #4a453d;
  --text-tertiary: #6f675c;
  --accent: #9a7b3c;
  --accent-light: rgba(201, 169, 98, 0.38);
  --accent-subtle: rgba(154, 123, 60, 0.14);
  --accent-border: rgba(154, 123, 60, 0.42);
  --accent-contrast: #fffdf9;
  --border: rgba(31, 28, 24, 0.1);
  --divider: rgba(31, 28, 24, 0.07);
  --icon-bg: #f0e8d8;
  --icon-color: #7a5c24;
  --contact-icon-bg-start: #c9a962;
  --contact-icon-bg-end: #9a7b3c;
  --contact-icon-color: #fffdf9;
  --avatar-ring-start: #e8d4a8;
  --avatar-ring-end: #9a7b3c;
  --avatar-ring-glow: rgba(154, 123, 60, 0.28);
  --avatar-border: #f2ece2;
  --avatar-placeholder-start: #f0e8d8;
  --avatar-placeholder-end: #faf8f4;
  --avatar-placeholder-text: #7a5c24;
  --status-online: #2d6a4f;
  --status-online-glow: rgba(45, 106, 79, 0.42);
  --page-bg: #f2ece2;
  --overlay: rgba(31, 28, 24, 0.4);
  --overlay-strong: rgba(31, 28, 24, 0.5);
  --shadow-card: 0 12px 36px rgba(58, 48, 36, 0.08), 0 0 0 1px rgba(154, 123, 60, 0.1);
  --shadow-modal: 0 24px 64px rgba(58, 48, 36, 0.12);
  --shadow-float: 0 14px 44px rgba(58, 48, 36, 0.1);
  --shadow-button: 0 6px 22px rgba(154, 123, 60, 0.18);
  --menu-bg: #fffdf9;
  --menu-border: rgba(154, 123, 60, 0.18);
  --menu-hover: rgba(201, 169, 98, 0.12);
  --modal-bg-start: #fffdf9;
  --modal-bg-end: #faf8f4;
  --modal-border: rgba(154, 123, 60, 0.16);
  --input-bg: #f7f3eb;
  --input-border: #dfd2b8;
  --input-border-soft: #ebe3d0;
  --cancel-bg: #f2ece2;
  --edit-outline: rgba(154, 123, 60, 0.48);
  --drop-target-ring: rgba(154, 123, 60, 0.55);
  --add-btn-border: rgba(154, 123, 60, 0.34);
  --add-btn-bg: rgba(201, 169, 98, 0.1);
  --add-btn-bg-hover: rgba(201, 169, 98, 0.18);
  --drag-handle-bg: rgba(154, 123, 60, 0.1);
  --move-btn-bg: rgba(154, 123, 60, 0.14);
  --move-btn-bg-hover: rgba(154, 123, 60, 0.22);
  --move-btn-border: rgba(255, 253, 249, 0.95);
  --apply-disabled-bg: rgba(201, 169, 98, 0.22);
  --apply-disabled-text: rgba(31, 28, 24, 0.45);
  --qr-image-bg: #fffdf9;
  --pill-border: rgba(31, 28, 24, 0.08);
  --header-auth-border: rgba(154, 123, 60, 0.28);
  --header-auth-border-hover: rgba(122, 92, 36, 0.42);
  --action-border: rgba(154, 123, 60, 0.14);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #c9a962;
}

/* ── Borahae Luxe (BTS — cosmic violet, Weverse-grade soft luxury) ── */
:is(body[data-user-theme="borahae-luxe"], #card-shell[data-design="borahae-luxe"], .theme-preview-shell[data-design="borahae-luxe"]) {
  --bg-primary: #14101f;
  --bg-secondary: #0a0812;
  --bg-gradient-mid: #1e1832;
  --card-bg: #1a1528;
  --surface: rgba(30, 24, 48, 0.88);
  --surface-glass: rgba(36, 28, 56, 0.82);
  --button-bg: #2a2342;
  --button-hover: #352d52;
  --action-btn-bg: #2a2342;
  --action-btn-text: #f8f6ff;
  --action-btn-hover-bg: #352d52;
  --action-btn-hover-text: #ffffff;
  --action-btn-border: rgba(183, 164, 255, 0.38);
  --action-btn-icon-color: #d4c4ff;
  --text-primary: #f8f6ff;
  --text-secondary: #c9c0e0;
  --text-tertiary: #9489b3;
  --accent: #9b7dff;
  --accent-light: rgba(155, 125, 255, 0.34);
  --accent-subtle: rgba(155, 125, 255, 0.14);
  --accent-border: rgba(183, 164, 255, 0.42);
  --accent-contrast: #140f1f;
  --border: rgba(183, 164, 255, 0.14);
  --divider: rgba(255, 255, 255, 0.08);
  --icon-bg: rgba(155, 125, 255, 0.14);
  --icon-color: #d4c4ff;
  --contact-icon-bg-start: #a78bfa;
  --contact-icon-bg-end: #7c5cbf;
  --contact-icon-color: #f8f6ff;
  --avatar-ring-start: #d4c4ff;
  --avatar-ring-end: #9b7dff;
  --avatar-ring-glow: rgba(155, 125, 255, 0.42);
  --avatar-border: #14101f;
  --avatar-placeholder-start: rgba(42, 34, 64, 0.96);
  --avatar-placeholder-end: rgba(20, 16, 31, 0.98);
  --avatar-placeholder-text: rgba(248, 246, 255, 0.9);
  --status-online: #6ee7b7;
  --status-online-glow: rgba(110, 231, 183, 0.5);
  --page-bg: #0a0812;
  --overlay: rgba(10, 8, 18, 0.74);
  --overlay-strong: rgba(10, 8, 18, 0.84);
  --shadow-card: 0 28px 72px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(155, 125, 255, 0.14);
  --shadow-modal: 0 32px 80px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 16px 48px rgba(20, 10, 40, 0.45);
  --shadow-button: 0 8px 28px rgba(155, 125, 255, 0.22);
  --menu-bg: rgba(20, 16, 31, 0.97);
  --menu-border: rgba(183, 164, 255, 0.22);
  --menu-hover: rgba(155, 125, 255, 0.14);
  --modal-bg-start: #221c34;
  --modal-bg-end: #14101f;
  --modal-border: rgba(183, 164, 255, 0.2);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(183, 164, 255, 0.24);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.07);
  --edit-outline: rgba(183, 164, 255, 0.58);
  --drop-target-ring: rgba(183, 164, 255, 0.68);
  --add-btn-border: rgba(155, 125, 255, 0.4);
  --add-btn-bg: rgba(155, 125, 255, 0.1);
  --add-btn-bg-hover: rgba(155, 125, 255, 0.18);
  --drag-handle-bg: rgba(155, 125, 255, 0.14);
  --move-btn-bg: rgba(155, 125, 255, 0.18);
  --move-btn-bg-hover: rgba(155, 125, 255, 0.28);
  --move-btn-border: rgba(20, 16, 31, 0.94);
  --apply-disabled-bg: rgba(155, 125, 255, 0.22);
  --apply-disabled-text: rgba(248, 246, 255, 0.48);
  --qr-image-bg: #f8f6ff;
  --pill-border: rgba(183, 164, 255, 0.12);
  --action-border: rgba(183, 164, 255, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 10px;
  --guest-btn-primary-border: #c4b0ff;
  --font-theme-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Quantum Grid (modern tech — deep navy + electric indigo/cyan) ── */
:is(body[data-user-theme="quantum-grid"], #card-shell[data-design="quantum-grid"], .theme-preview-shell[data-design="quantum-grid"]) {
  --bg-primary: #0b0f1a;
  --bg-secondary: #05070e;
  --bg-gradient-mid: #10182b;
  --card-bg: #131c2e;
  --surface: rgba(19, 28, 46, 0.9);
  --surface-glass: rgba(22, 32, 52, 0.88);
  --button-bg: #1c2842;
  --button-hover: #243352;
  --action-btn-bg: #1c2842;
  --action-btn-text: #eef2ff;
  --action-btn-hover-bg: #263a5c;
  --action-btn-hover-text: #f8fafc;
  --action-btn-border: rgba(99, 130, 255, 0.35);
  --action-btn-icon-color: #93b4ff;
  --text-primary: #eef2ff;
  --text-secondary: #a8b4d4;
  --text-tertiary: #6b7a9e;
  --accent: #6382ff;
  --accent-light: rgba(99, 130, 255, 0.32);
  --accent-subtle: rgba(99, 130, 255, 0.14);
  --accent-border: rgba(129, 156, 255, 0.45);
  --accent-contrast: #0b0f1a;
  --border: rgba(129, 156, 255, 0.14);
  --divider: rgba(255, 255, 255, 0.07);
  --icon-bg: rgba(99, 130, 255, 0.12);
  --icon-color: #93b4ff;
  --contact-icon-bg-start: #4f6ef7;
  --contact-icon-bg-end: #3b52c4;
  --contact-icon-color: #eef2ff;
  --avatar-ring-start: #93b4ff;
  --avatar-ring-end: #6382ff;
  --avatar-ring-glow: rgba(99, 130, 255, 0.38);
  --avatar-border: #0b0f1a;
  --avatar-placeholder-start: rgba(28, 40, 66, 0.96);
  --avatar-placeholder-end: rgba(11, 15, 26, 0.98);
  --avatar-placeholder-text: rgba(238, 242, 255, 0.88);
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.55);
  --page-bg: #05070e;
  --overlay: rgba(5, 7, 14, 0.72);
  --overlay-strong: rgba(5, 7, 14, 0.82);
  --shadow-card: 0 24px 64px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(99, 130, 255, 0.12);
  --shadow-modal: 0 28px 72px rgba(0, 0, 0, 0.58);
  --shadow-float: 0 14px 44px rgba(0, 0, 0, 0.48);
  --shadow-button: 0 6px 24px rgba(99, 130, 255, 0.2);
  --menu-bg: rgba(11, 15, 26, 0.98);
  --menu-border: rgba(99, 130, 255, 0.28);
  --menu-hover: rgba(99, 130, 255, 0.12);
  --modal-bg-start: #161f33;
  --modal-bg-end: #0b0f1a;
  --modal-border: rgba(99, 130, 255, 0.24);
  --input-bg: rgba(0, 0, 0, 0.32);
  --input-border: rgba(129, 156, 255, 0.22);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(129, 156, 255, 0.62);
  --drop-target-ring: rgba(129, 156, 255, 0.72);
  --add-btn-border: rgba(99, 130, 255, 0.42);
  --add-btn-bg: rgba(99, 130, 255, 0.08);
  --add-btn-bg-hover: rgba(99, 130, 255, 0.16);
  --drag-handle-bg: rgba(99, 130, 255, 0.14);
  --move-btn-bg: rgba(99, 130, 255, 0.18);
  --move-btn-bg-hover: rgba(99, 130, 255, 0.3);
  --move-btn-border: rgba(5, 7, 14, 0.94);
  --apply-disabled-bg: rgba(99, 130, 255, 0.24);
  --apply-disabled-text: rgba(238, 242, 255, 0.5);
  --qr-image-bg: #eef2ff;
  --pill-border: rgba(129, 156, 255, 0.12);
  --action-border: rgba(129, 156, 255, 0.1);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #93b4ff;
}

/* ── Meridian Slate (cool graphite + cyan accent) ── */
:is(body[data-user-theme="meridian-slate"], #card-shell[data-design="meridian-slate"], .theme-preview-shell[data-design="meridian-slate"]) {
  --bg-primary: #0f1419;
  --bg-secondary: #090c10;
  --bg-gradient-mid: #0c1016;
  --card-bg: #1a2129;
  --surface: rgba(26, 33, 41, 0.88);
  --surface-glass: rgba(26, 33, 41, 0.88);
  --button-bg: #243040;
  --button-hover: #2d3a4d;
  --text-primary: #e8edf2;
  --text-secondary: #8b9aab;
  --text-tertiary: #5c6b7a;
  --accent: #22d3ee;
  --accent-light: rgba(34, 211, 238, 0.28);
  --accent-subtle: rgba(34, 211, 238, 0.12);
  --accent-border: rgba(34, 211, 238, 0.4);
  --accent-contrast: #061018;
  --border: rgba(255, 255, 255, 0.07);
  --divider: rgba(255, 255, 255, 0.06);
  --icon-bg: rgba(34, 211, 238, 0.1);
  --icon-color: #22d3ee;
  --contact-icon-bg-start: #0891b2;
  --contact-icon-bg-end: #0e7490;
  --contact-icon-color: #cffafe;
  --avatar-ring-start: #67e8f9;
  --avatar-ring-end: #0891b2;
  --avatar-ring-glow: rgba(34, 211, 238, 0.35);
  --avatar-border: #0f1419;
  --avatar-placeholder-start: rgba(36, 48, 64, 0.95);
  --avatar-placeholder-end: rgba(15, 20, 25, 0.98);
  --avatar-placeholder-text: rgba(232, 237, 242, 0.85);
  --status-online: #34d399;
  --status-online-glow: rgba(52, 211, 153, 0.55);
  --page-bg: #090c10;
  --overlay: rgba(0, 0, 0, 0.68);
  --overlay-strong: rgba(0, 0, 0, 0.76);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-button: 0 6px 20px rgba(34, 211, 238, 0.12);
  --menu-bg: rgba(15, 20, 25, 0.98);
  --menu-border: rgba(34, 211, 238, 0.28);
  --menu-hover: rgba(34, 211, 238, 0.1);
  --modal-bg-start: #1a2129;
  --modal-bg-end: #0f1419;
  --modal-border: rgba(34, 211, 238, 0.22);
  --input-bg: rgba(0, 0, 0, 0.28);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-soft: rgba(255, 255, 255, 0.08);
  --cancel-bg: rgba(255, 255, 255, 0.06);
  --edit-outline: rgba(34, 211, 238, 0.55);
  --drop-target-ring: rgba(34, 211, 238, 0.65);
  --add-btn-border: rgba(34, 211, 238, 0.38);
  --add-btn-bg: rgba(34, 211, 238, 0.06);
  --add-btn-bg-hover: rgba(34, 211, 238, 0.12);
  --drag-handle-bg: rgba(34, 211, 238, 0.12);
  --move-btn-bg: rgba(34, 211, 238, 0.16);
  --move-btn-bg-hover: rgba(34, 211, 238, 0.28);
  --move-btn-border: rgba(9, 12, 16, 0.92);
  --apply-disabled-bg: rgba(34, 211, 238, 0.22);
  --apply-disabled-text: rgba(232, 237, 242, 0.55);
  --qr-image-bg: #e8edf2;
  --pill-border: rgba(255, 255, 255, 0.07);
  --action-border: rgba(255, 255, 255, 0.05);
  --icon-size: 32px;
  --icon-bg-radius: 8px;
  --guest-btn-primary-border: #67e8f9;
}

/* Legacy aliases — after all theme blocks so --button-bg resolves correctly */
:root,
#card-shell,
.theme-preview-shell,
body[data-user-theme] {
  --bg-top: var(--bg-primary);
  --bg-bottom: var(--bg-secondary);
  --surface-solid: var(--card-bg);
  --surface-btn: var(--button-bg);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-dim: var(--text-tertiary);
  --accent-soft: var(--accent-light);
  --online: var(--status-online);

  /* Scrollbar — derived from active theme tokens */
  --scrollbar-track: var(--bg-secondary);
  --scrollbar-thumb: color-mix(in srgb, var(--accent) 58%, var(--bg-primary));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent) 78%, var(--bg-primary));
  --scrollbar-thumb-active: var(--accent);
}

/* Shell gradient overrides for marketplace themes — theme-tokens-catalog.css */