/* Brand Theme Presets (20 × 3 variants) — tpl_car_house */

/*
  How it works:
  - body has classes: theme-preset-<preset> theme-variant-<variant> and either theme-light/theme-dark (auto handled by JS)
  - Variables are applied by preset + tone.
*/

:root{
  /* Reasonable defaults (will be overridden by preset rules) */
  --bg:#F4F6F9;
  --surface:#FFFFFF;
  --line: rgba(15,23,42,.10);
  --text:#0F172A;
  --muted:#64748B;
  --accent:#2563EB;
  --accent2:#0EA5E9;
  --radius:14px;
  --shadow: 0 16px 40px rgba(2,6,23,.12);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  --font-headings: var(--font-body);
  --base-font-size: 16px;
}

/* Helpers */
body.site.theme-variant-color{ --ui-color-mode: color; }
body.site.theme-variant-light{ --ui-color-mode: light; }
body.site.theme-variant-dark{ --ui-color-mode: dark; }
body.site.theme-variant-auto{ --ui-color-mode: auto; }

/* ===== Bootstrap 5 + Global UI mapping (makes themes feel radically different) ===== */
body.site{
  /* Map our design tokens into Bootstrap variables */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: color-mix(in srgb, var(--accent) 82%, #000 18%);

  --bs-primary: var(--accent);
  --bs-secondary: var(--accent2);

  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--base-font-size);

  /* Shape + depth */
  --bs-border-radius: var(--radius);
  --bs-border-radius-lg: calc(var(--radius) + 6px);
  --bs-border-radius-sm: max(2px, calc(var(--radius) - 6px));
  --bs-box-shadow: var(--shadow);

  /* Button geometry (used by our overrides below) */
  --ch-btn-radius: var(--btn-radius, var(--radius));
  --ch-btn-weight: var(--btn-weight, 600);
  --ch-btn-letter-spacing: var(--btn-letter-spacing, normal);
}

/* Buttons — override key Bootstrap button variables so UI changes are obvious */
body.site .btn{
  border-radius: var(--ch-btn-radius) !important;
  font-weight: var(--ch-btn-weight);
  letter-spacing: var(--ch-btn-letter-spacing);
  box-shadow: var(--btn-shadow, none);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
body.site .btn:hover{ transform: translateY(var(--btn-hover-lift, -1px)); box-shadow: var(--btn-hover-shadow, var(--btn-shadow, none)); }

body.site .btn-primary{
  --bs-btn-bg: var(--btn-primary-bg, var(--accent));
  --bs-btn-border-color: var(--btn-primary-border, var(--btn-primary-bg, var(--accent)));
  --bs-btn-hover-bg: color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 86%, #000 14%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 86%, #000 14%);
  --bs-btn-active-bg: color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 78%, #000 22%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 78%, #000 22%);
}
body.site .btn-outline-primary{
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
}

/* Inputs + selects — inherit theme feel */
body.site .form-control,
body.site .form-select,
body.site input[type="text"],
body.site input[type="search"]{
  border-radius: var(--input-radius, calc(var(--radius) - 4px));
  border-color: color-mix(in srgb, var(--line) 75%, transparent);
  background-color: var(--input-bg, color-mix(in srgb, var(--surface) 92%, transparent));
  color: var(--text);
}
body.site .form-control:focus,
body.site .form-select:focus,
body.site input[type="text"]:focus,
body.site input[type="search"]:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Cards / tiles */
body.site .card,
body.site .ch-card,
body.site .finderItem{
  border-radius: var(--card-radius, var(--radius));
  box-shadow: var(--card-shadow, var(--shadow));
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}


/* ========= 1) Microsoft Fluent ========= */
body.site.theme-preset-microsoft.theme-light,
body.site.theme-preset-microsoft.theme-variant-light{
  --bg:#F6F8FB;
  --surface:#FFFFFF;
  --line: rgba(2,6,23,.10);
  --text:#0B1220;
  --muted:#475569;
  --accent:#0067C0;
  --accent2:#2DD4BF;
  --radius:12px;
  --shadow: 0 10px 30px rgba(2,6,23,.10);
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Ubuntu, Arial, sans-serif;
}
body.site.theme-preset-microsoft.theme-dark,
body.site.theme-preset-microsoft.theme-variant-dark{
  --bg:#0B0F17;
  --surface:#111827;
  --line: rgba(255,255,255,.10);
  --text:#F3F4F6;
  --muted: rgba(243,244,246,.68);
  --accent:#33A1FF;
  --accent2:#2DD4BF;
  --radius:12px;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Ubuntu, Arial, sans-serif;
}
body.site.theme-preset-microsoft.theme-variant-color{
  --bg:#0B1020;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#0078D4;
  --accent2:#00B7C3;
  --radius:14px;
  --shadow: 0 18px 70px rgba(0,0,0,.60);
  background:
    radial-gradient(900px 540px at 15% 0%, rgba(0,120,212,.18), transparent 60%),
    radial-gradient(900px 540px at 85% 20%, rgba(0,183,195,.14), transparent 60%),
    linear-gradient(180deg, #070A12 0%, var(--bg) 55%, #05070E 100%);
}

/* ========= 2) Apple Human Interface ========= */
body.site.theme-preset-apple.theme-light,
body.site.theme-preset-apple.theme-variant-light{
  --bg:#F2F2F7;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.10);
  --text:#111827;
  --muted:#6B7280;
  --accent:#0A84FF;
  --accent2:#34C759;
  --radius:16px;
  --shadow: 0 14px 40px rgba(0,0,0,.10);
  --font-body: -apple-system, system-ui, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
}
body.site.theme-preset-apple.theme-dark,
body.site.theme-preset-apple.theme-variant-dark{
  --bg:#0D0D0F;
  --surface:#1C1C1E;
  --line: rgba(255,255,255,.10);
  --text:#FFFFFF;
  --muted: rgba(255,255,255,.68);
  --accent:#0A84FF;
  --accent2:#30D158;
  --radius:16px;
  --shadow: 0 18px 70px rgba(0,0,0,.65);
  --font-body: -apple-system, system-ui, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
}
body.site.theme-preset-apple.theme-variant-color{
  --bg:#0D0D10;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.12);
  --text:#FFFFFF;
  --muted: rgba(255,255,255,.72);
  --accent:#0A84FF;
  --accent2:#FF9F0A;
  --radius:18px;
  --shadow: 0 20px 80px rgba(0,0,0,.68);
  background:
    radial-gradient(900px 560px at 22% -10%, rgba(10,132,255,.20), transparent 55%),
    radial-gradient(900px 560px at 88% 10%, rgba(255,159,10,.16), transparent 55%),
    linear-gradient(180deg, #070708 0%, var(--bg) 60%, #050506 100%);
}

/* ========= 3) Google Material You ========= */
body.site.theme-preset-google.theme-light,
body.site.theme-preset-google.theme-variant-light{
  --bg:#F8FAFF;
  --surface:#FFFFFF;
  --line: rgba(2,6,23,.10);
  --text:#0B1220;
  --muted:#556070;
  --accent:#1A73E8;
  --accent2:#EA4335;
  --radius:20px;
  --shadow: 0 12px 36px rgba(2,6,23,.12);
}
body.site.theme-preset-google.theme-dark,
body.site.theme-preset-google.theme-variant-dark{
  --bg:#0B1220;
  --surface:#111827;
  --line: rgba(255,255,255,.10);
  --text:#F3F4F6;
  --muted: rgba(243,244,246,.70);
  --accent:#8AB4F8;
  --accent2:#F28B82;
  --radius:20px;
  --shadow: 0 20px 80px rgba(0,0,0,.62);
}
body.site.theme-preset-google.theme-variant-color{
  --bg:#0B1220;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#1A73E8;
  --accent2:#FBBC05;
  --radius:22px;
  --shadow: 0 22px 90px rgba(0,0,0,.65);
  background:
    radial-gradient(900px 560px at 18% 0%, rgba(26,115,232,.18), transparent 60%),
    radial-gradient(900px 560px at 88% 18%, rgba(251,188,5,.14), transparent 60%),
    linear-gradient(180deg, #070B14 0%, var(--bg) 60%, #060A12 100%);
}

/* ========= 4) Xiaomi MIUI ========= */
body.site.theme-preset-xiaomi.theme-light,
body.site.theme-preset-xiaomi.theme-variant-light{
  --bg:#FFF7F3;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.10);
  --text:#111827;
  --muted:#6B7280;
  --accent:#FF6900;
  --accent2:#FF2D55;
  --radius:18px;
  --shadow: 0 12px 34px rgba(0,0,0,.10);
}
body.site.theme-preset-xiaomi.theme-dark,
body.site.theme-preset-xiaomi.theme-variant-dark{
  --bg:#0C0B0A;
  --surface:#14110F;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.70);
  --accent:#FF7A1A;
  --accent2:#FF2D55;
  --radius:18px;
  --shadow: 0 18px 70px rgba(0,0,0,.62);
}
body.site.theme-preset-xiaomi.theme-variant-color{
  --bg:#120C08;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#FFF7ED;
  --muted: rgba(255,247,237,.72);
  --accent:#FF6900;
  --accent2:#FF3D81;
  --radius:20px;
  --shadow: 0 20px 80px rgba(0,0,0,.65);
  background:
    radial-gradient(900px 560px at 18% 0%, rgba(255,105,0,.22), transparent 60%),
    radial-gradient(900px 560px at 88% 18%, rgba(255,61,129,.16), transparent 60%),
    linear-gradient(180deg, #070403 0%, var(--bg) 60%, #050302 100%);
}

/* ========= 5) Samsung One UI ========= */
body.site.theme-preset-samsung.theme-light,
body.site.theme-preset-samsung.theme-variant-light{
  --bg:#F5F7FF;
  --surface:#FFFFFF;
  --line: rgba(2,6,23,.10);
  --text:#0B1220;
  --muted:#556070;
  --accent:#1F6FEB;
  --accent2:#00C2FF;
  --radius:22px;
  --shadow: 0 14px 42px rgba(2,6,23,.12);
}
body.site.theme-preset-samsung.theme-dark,
body.site.theme-preset-samsung.theme-variant-dark{
  --bg:#070A12;
  --surface:#0F172A;
  --line: rgba(255,255,255,.10);
  --text:#F3F4F6;
  --muted: rgba(243,244,246,.70);
  --accent:#4EA1FF;
  --accent2:#00C2FF;
  --radius:22px;
  --shadow: 0 22px 90px rgba(0,0,0,.65);
}
body.site.theme-preset-samsung.theme-variant-color{
  --bg:#060812;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#3B82F6;
  --accent2:#22D3EE;
  --radius:24px;
  --shadow: 0 24px 96px rgba(0,0,0,.68);
  background:
    radial-gradient(1000px 600px at 20% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(1000px 600px at 88% 18%, rgba(34,211,238,.14), transparent 60%),
    linear-gradient(180deg, #040512 0%, var(--bg) 60%, #03040A 100%);
}

/* ========= 6) Tesla Minimal ========= */
body.site.theme-preset-tesla.theme-light,
body.site.theme-preset-tesla.theme-variant-light{
  --bg:#FAFAFA;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.12);
  --text:#0B0F16;
  --muted:#4B5563;
  --accent:#E10618;
  --accent2:#0B0F16;
  --radius:10px;
  --shadow: 0 10px 26px rgba(0,0,0,.10);
  --font-headings: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body.site.theme-preset-tesla.theme-dark,
body.site.theme-preset-tesla.theme-variant-dark{
  --bg:#0A0C10;
  --surface:#111318;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.70);
  --accent:#FF1B2D;
  --accent2:#FFFFFF;
  --radius:10px;
  --shadow: 0 18px 70px rgba(0,0,0,.62);
}
body.site.theme-preset-tesla.theme-variant-color{
  --bg:#07090D;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#E10618;
  --accent2:#00B3FF;
  --radius:12px;
  --shadow: 0 20px 80px rgba(0,0,0,.66);
  background:
    radial-gradient(900px 520px at 16% 0%, rgba(225,6,24,.16), transparent 60%),
    radial-gradient(900px 520px at 88% 18%, rgba(0,179,255,.12), transparent 60%),
    linear-gradient(180deg, #05060A 0%, var(--bg) 60%, #04050A 100%);
}

/* ========= 7) Ford Industrial ========= */
body.site.theme-preset-ford.theme-light,
body.site.theme-preset-ford.theme-variant-light{
  --bg:#F3F6FA;
  --surface:#FFFFFF;
  --line: rgba(2,6,23,.12);
  --text:#0B1220;
  --muted:#475569;
  --accent:#003478;
  --accent2:#0EA5E9;
  --radius:8px;
  --shadow: 0 10px 28px rgba(2,6,23,.10);
}
body.site.theme-preset-ford.theme-dark,
body.site.theme-preset-ford.theme-variant-dark{
  --bg:#0B1020;
  --surface:#111827;
  --line: rgba(255,255,255,.10);
  --text:#F3F4F6;
  --muted: rgba(243,244,246,.70);
  --accent:#2E6BFF;
  --accent2:#38BDF8;
  --radius:8px;
  --shadow: 0 18px 70px rgba(0,0,0,.62);
}
body.site.theme-preset-ford.theme-variant-color{
  --bg:#08122B;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#003478;
  --accent2:#FFFFFF;
  --radius:10px;
  --shadow: 0 20px 80px rgba(0,0,0,.66);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(0,52,120,.22), transparent 60%),
    radial-gradient(900px 560px at 85% 20%, rgba(56,189,248,.12), transparent 60%),
    linear-gradient(180deg, #050A14 0%, var(--bg) 60%, #040812 100%);
}

/* ========= 8) BMW Precision ========= */
body.site.theme-preset-bmw.theme-light,
body.site.theme-preset-bmw.theme-variant-light{
  --bg:#F7FAFC;
  --surface:#FFFFFF;
  --line: rgba(2,6,23,.10);
  --text:#0B1220;
  --muted:#556070;
  --accent:#1D4ED8;
  --accent2:#00B3FF;
  --radius:12px;
  --shadow: 0 12px 34px rgba(2,6,23,.12);
}
body.site.theme-preset-bmw.theme-dark,
body.site.theme-preset-bmw.theme-variant-dark{
  --bg:#06070B;
  --surface:#0F172A;
  --line: rgba(255,255,255,.10);
  --text:#F3F4F6;
  --muted: rgba(243,244,246,.70);
  --accent:#2E6BFF;
  --accent2:#00B3FF;
  --radius:12px;
  --shadow: 0 22px 90px rgba(0,0,0,.65);
}
body.site.theme-preset-bmw.theme-variant-color{
  --bg:#070A10;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#1D4ED8;
  --accent2:#00B3FF;
  --radius:14px;
  --shadow: 0 24px 96px rgba(0,0,0,.68);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(29,78,216,.16), transparent 60%),
    radial-gradient(900px 560px at 88% 20%, rgba(0,179,255,.14), transparent 60%),
    linear-gradient(180deg, #04050A 0%, var(--bg) 60%, #03040A 100%);
}

/* ========= 9) Mercedes Luxury ========= */
body.site.theme-preset-mercedes.theme-light,
body.site.theme-preset-mercedes.theme-variant-light{
  --bg:#F7F7FA;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.10);
  --text:#0B1220;
  --muted:#4B5563;
  --accent:#111827;
  --accent2:#9CA3AF;
  --radius:18px;
  --shadow: 0 18px 50px rgba(0,0,0,.10);
}
body.site.theme-preset-mercedes.theme-dark,
body.site.theme-preset-mercedes.theme-variant-dark{
  --bg:#07080C;
  --surface:#111318;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.70);
  --accent:#E5E7EB;
  --accent2:#9CA3AF;
  --radius:18px;
  --shadow: 0 22px 90px rgba(0,0,0,.66);
}
body.site.theme-preset-mercedes.theme-variant-color{
  --bg:#07080C;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#E5E7EB;
  --accent2:#00B3FF;
  --radius:20px;
  --shadow: 0 24px 100px rgba(0,0,0,.70);
  background:
    radial-gradient(900px 560px at 22% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 560px at 88% 18%, rgba(0,179,255,.10), transparent 60%),
    linear-gradient(180deg, #05060A 0%, var(--bg) 60%, #04050A 100%);
}

/* ========= 10) Audi Tech ========= */
body.site.theme-preset-audi.theme-light,
body.site.theme-preset-audi.theme-variant-light{
  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.10);
  --text:#0B1220;
  --muted:#475569;
  --accent:#E10618;
  --accent2:#111827;
  --radius:10px;
  --shadow: 0 14px 40px rgba(0,0,0,.10);
}
body.site.theme-preset-audi.theme-dark,
body.site.theme-preset-audi.theme-variant-dark{
  --bg:#07080C;
  --surface:#0B0F16;
  --line: rgba(255,255,255,.10);
  --text:#F3F4F6;
  --muted: rgba(243,244,246,.70);
  --accent:#FF1B2D;
  --accent2:#F3F4F6;
  --radius:10px;
  --shadow: 0 22px 90px rgba(0,0,0,.66);
}
body.site.theme-preset-audi.theme-variant-color{
  --bg:#06070B;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#E10618;
  --accent2:#FFFFFF;
  --radius:12px;
  --shadow: 0 24px 100px rgba(0,0,0,.70);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(225,6,24,.16), transparent 60%),
    radial-gradient(900px 560px at 88% 18%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #04050A 0%, var(--bg) 60%, #03040A 100%);
}

/* ========= 11) Meta Soft UI ========= */
body.site.theme-preset-meta.theme-light,
body.site.theme-preset-meta.theme-variant-light{
  --bg:#F5F8FF;
  --surface:#FFFFFF;
  --line: rgba(2,6,23,.10);
  --text:#0B1220;
  --muted:#556070;
  --accent:#1877F2;
  --accent2:#22C55E;
  --radius:18px;
  --shadow: 0 16px 44px rgba(2,6,23,.12);
}
body.site.theme-preset-meta.theme-dark,
body.site.theme-preset-meta.theme-variant-dark{
  --bg:#0B1220;
  --surface:#111827;
  --line: rgba(255,255,255,.10);
  --text:#F3F4F6;
  --muted: rgba(243,244,246,.70);
  --accent:#60A5FA;
  --accent2:#22C55E;
  --radius:18px;
  --shadow: 0 22px 90px rgba(0,0,0,.65);
}
body.site.theme-preset-meta.theme-variant-color{
  --bg:#081028;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#1877F2;
  --accent2:#22C55E;
  --radius:20px;
  --shadow: 0 24px 100px rgba(0,0,0,.68);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(24,119,242,.18), transparent 60%),
    radial-gradient(900px 560px at 86% 22%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, #040812 0%, var(--bg) 60%, #03060E 100%);
}

/* ========= 12) Amazon Commerce ========= */
body.site.theme-preset-amazon.theme-light,
body.site.theme-preset-amazon.theme-variant-light{
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.10);
  --text:#111827;
  --muted:#4B5563;
  --accent:#FF9900;
  --accent2:#232F3E;
  --radius:10px;
  --shadow: 0 12px 34px rgba(0,0,0,.10);
}
body.site.theme-preset-amazon.theme-dark,
body.site.theme-preset-amazon.theme-variant-dark{
  --bg:#0B0F16;
  --surface:#111827;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.70);
  --accent:#FFB74D;
  --accent2:#94A3B8;
  --radius:10px;
  --shadow: 0 20px 80px rgba(0,0,0,.62);
}
body.site.theme-preset-amazon.theme-variant-color{
  --bg:#0B0F16;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#FF9900;
  --accent2:#232F3E;
  --radius:12px;
  --shadow: 0 24px 100px rgba(0,0,0,.68);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(255,153,0,.16), transparent 60%),
    radial-gradient(900px 560px at 86% 18%, rgba(35,47,62,.18), transparent 60%),
    linear-gradient(180deg, #060812 0%, var(--bg) 60%, #05070E 100%);
}

/* ========= 13) Netflix Dark Media ========= */
body.site.theme-preset-netflix.theme-light,
body.site.theme-preset-netflix.theme-variant-light{
  --bg:#FFFFFF;
  --surface:#F5F5F5;
  --line: rgba(0,0,0,.12);
  --text:#111827;
  --muted:#4B5563;
  --accent:#E50914;
  --accent2:#111827;
  --radius:14px;
  --shadow: 0 14px 44px rgba(0,0,0,.10);
}
body.site.theme-preset-netflix.theme-dark,
body.site.theme-preset-netflix.theme-variant-dark{
  --bg:#0B0B0B;
  --surface:#141414;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.70);
  --accent:#E50914;
  --accent2:#FFFFFF;
  --radius:14px;
  --shadow: 0 26px 110px rgba(0,0,0,.75);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(229,9,20,.10), transparent 60%),
    linear-gradient(180deg, #070707 0%, var(--bg) 60%, #050505 100%);
}
body.site.theme-preset-netflix.theme-variant-color{
  --bg:#0B0B0B;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#E50914;
  --accent2:#FFFFFF;
  --radius:14px;
  --shadow: 0 28px 120px rgba(0,0,0,.78);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(229,9,20,.16), transparent 60%),
    radial-gradient(900px 520px at 88% 18%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #060606 0%, var(--bg) 60%, #040404 100%);
}

/* ========= 14) Spotify Vibrant ========= */
body.site.theme-preset-spotify.theme-light,
body.site.theme-preset-spotify.theme-variant-light{
  --bg:#F5FFF8;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.10);
  --text:#0B1220;
  --muted:#4B5563;
  --accent:#1DB954;
  --accent2:#111827;
  --radius:16px;
  --shadow: 0 14px 44px rgba(0,0,0,.10);
}
body.site.theme-preset-spotify.theme-dark,
body.site.theme-preset-spotify.theme-variant-dark{
  --bg:#0B0F16;
  --surface:#111827;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.70);
  --accent:#1DB954;
  --accent2:#22D3EE;
  --radius:16px;
  --shadow: 0 22px 90px rgba(0,0,0,.65);
}
body.site.theme-preset-spotify.theme-variant-color{
  --bg:#06110A;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#1DB954;
  --accent2:#22D3EE;
  --radius:18px;
  --shadow: 0 24px 100px rgba(0,0,0,.68);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(29,185,84,.18), transparent 60%),
    radial-gradient(900px 560px at 88% 18%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(180deg, #040A06 0%, var(--bg) 60%, #030704 100%);
}

/* ========= 15) Adobe Pro ========= */
body.site.theme-preset-adobe.theme-light,
body.site.theme-preset-adobe.theme-variant-light{
  --bg:#FFFFFF;
  --surface:#F6F7FB;
  --line: rgba(0,0,0,.10);
  --text:#111827;
  --muted:#4B5563;
  --accent:#FF0000;
  --accent2:#111827;
  --radius:12px;
  --shadow: 0 14px 44px rgba(0,0,0,.10);
}
body.site.theme-preset-adobe.theme-dark,
body.site.theme-preset-adobe.theme-variant-dark{
  --bg:#0B0F16;
  --surface:#111827;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.70);
  --accent:#FF3B30;
  --accent2:#22D3EE;
  --radius:12px;
  --shadow: 0 22px 90px rgba(0,0,0,.65);
}
body.site.theme-preset-adobe.theme-variant-color{
  --bg:#0B0F16;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#FF0000;
  --accent2:#FFD400;
  --radius:14px;
  --shadow: 0 24px 100px rgba(0,0,0,.68);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(255,0,0,.14), transparent 60%),
    radial-gradient(900px 560px at 88% 18%, rgba(255,212,0,.12), transparent 60%),
    linear-gradient(180deg, #060812 0%, var(--bg) 60%, #05070E 100%);
}

/* ========= 16) GitHub Clean ========= */
body.site.theme-preset-github.theme-light,
body.site.theme-preset-github.theme-variant-light{
  --bg:#F6F8FA;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.10);
  --text:#24292F;
  --muted:#57606A;
  --accent:#0969DA;
  --accent2:#2DA44E;
  --radius:10px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
body.site.theme-preset-github.theme-dark,
body.site.theme-preset-github.theme-variant-dark{
  --bg:#0D1117;
  --surface:#161B22;
  --line: rgba(255,255,255,.10);
  --text:#C9D1D9;
  --muted: rgba(201,209,217,.70);
  --accent:#2F81F7;
  --accent2:#3FB950;
  --radius:10px;
  --shadow: 0 18px 70px rgba(0,0,0,.62);
}
body.site.theme-preset-github.theme-variant-color{
  --bg:#0D1117;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#C9D1D9;
  --muted: rgba(201,209,217,.72);
  --accent:#2F81F7;
  --accent2:#3FB950;
  --radius:12px;
  --shadow: 0 22px 90px rgba(0,0,0,.66);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(47,129,247,.14), transparent 60%),
    radial-gradient(900px 560px at 88% 18%, rgba(63,185,80,.10), transparent 60%),
    linear-gradient(180deg, #070A10 0%, var(--bg) 60%, #05070E 100%);
}

/* ========= 17) Stripe Fintech ========= */
body.site.theme-preset-stripe.theme-light,
body.site.theme-preset-stripe.theme-variant-light{
  --bg:#F7F8FF;
  --surface:#FFFFFF;
  --line: rgba(2,6,23,.10);
  --text:#0B1220;
  --muted:#556070;
  --accent:#635BFF;
  --accent2:#00D4FF;
  --radius:16px;
  --shadow: 0 16px 48px rgba(2,6,23,.12);
}
body.site.theme-preset-stripe.theme-dark,
body.site.theme-preset-stripe.theme-variant-dark{
  --bg:#080A16;
  --surface:#111827;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.70);
  --accent:#A5B4FC;
  --accent2:#22D3EE;
  --radius:16px;
  --shadow: 0 24px 100px rgba(0,0,0,.66);
}
body.site.theme-preset-stripe.theme-variant-color{
  --bg:#070A16;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#635BFF;
  --accent2:#00D4FF;
  --radius:18px;
  --shadow: 0 26px 110px rgba(0,0,0,.68);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(99,91,255,.18), transparent 60%),
    radial-gradient(900px 560px at 88% 18%, rgba(0,212,255,.12), transparent 60%),
    linear-gradient(180deg, #040512 0%, var(--bg) 60%, #03040A 100%);
}

/* ========= 18) Shopify Commerce ========= */
body.site.theme-preset-shopify.theme-light,
body.site.theme-preset-shopify.theme-variant-light{
  --bg:#F4FFF7;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.10);
  --text:#0B1220;
  --muted:#4B5563;
  --accent:#008060;
  --accent2:#00C2FF;
  --radius:14px;
  --shadow: 0 14px 44px rgba(0,0,0,.10);
}
body.site.theme-preset-shopify.theme-dark,
body.site.theme-preset-shopify.theme-variant-dark{
  --bg:#07140F;
  --surface:#0F1F17;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.70);
  --accent:#00A47A;
  --accent2:#22D3EE;
  --radius:14px;
  --shadow: 0 22px 90px rgba(0,0,0,.65);
}
body.site.theme-preset-shopify.theme-variant-color{
  --bg:#06120E;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#008060;
  --accent2:#00C2FF;
  --radius:16px;
  --shadow: 0 24px 100px rgba(0,0,0,.68);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(0,128,96,.18), transparent 60%),
    radial-gradient(900px 560px at 88% 18%, rgba(0,194,255,.10), transparent 60%),
    linear-gradient(180deg, #030705 0%, var(--bg) 60%, #020504 100%);
}

/* ========= 19) Notion Editorial ========= */
body.site.theme-preset-notion.theme-light,
body.site.theme-preset-notion.theme-variant-light{
  --bg:#FAFAF9;
  --surface:#FFFFFF;
  --line: rgba(0,0,0,.10);
  --text:#111827;
  --muted:#52525B;
  --accent:#111827;
  --accent2:#6B7280;
  --radius:12px;
  --shadow: 0 12px 34px rgba(0,0,0,.08);
  --font-body: ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-headings: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body.site.theme-preset-notion.theme-dark,
body.site.theme-preset-notion.theme-variant-dark{
  --bg:#0F0F0E;
  --surface:#191918;
  --line: rgba(255,255,255,.10);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.68);
  --accent:#F8FAFC;
  --accent2:#A1A1AA;
  --radius:12px;
  --shadow: 0 20px 80px rgba(0,0,0,.66);
}
body.site.theme-preset-notion.theme-variant-color{
  --bg:#0F0F0E;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.14);
  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);
  --accent:#F8FAC0;
  --accent2:#F8FAFC;
  --radius:14px;
  --shadow: 0 22px 90px rgba(0,0,0,.70);
  background:
    radial-gradient(900px 560px at 20% 0%, rgba(248,250,192,.12), transparent 60%),
    linear-gradient(180deg, #070707 0%, var(--bg) 60%, #050505 100%);
}

/* ========= 20) Auto Dealer (universal) ========= */
body.site.theme-preset-autodealer.theme-light,
body.site.theme-preset-autodealer.theme-variant-light{
  --bg:#F4F6F9;
  --surface:#FFFFFF;
  --line: rgba(15,23,42,.10);
  --text:#0F172A;
  --muted:#64748B;
  --accent:#E10600;
  --accent2:#00B3FF;
  --radius:14px;
  --shadow: 0 16px 40px rgba(2,6,23,.12);
}
body.site.theme-preset-autodealer.theme-dark,
body.site.theme-preset-autodealer.theme-variant-dark{
  --bg:#0b0d10;
  --surface: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.12);
  --text:#f5f7fb;
  --muted: rgba(245,247,251,.70);
  --accent:#e10618;
  --accent2:#00b3ff;
  --radius:14px;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 600px at 90% 90%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #080a0d 0%, var(--bg) 55%, #07080b 100%);
}
body.site.theme-preset-autodealer.theme-variant-color{
  --bg:#07080c;
  --surface: rgba(255,255,255,.05);
  --line: rgba(255,255,255,.12);
  --text:#f5f8ff;
  --muted: rgba(245,248,255,.70);
  --accent:#ff1b2d;
  --accent2:#00b3ff;
  --radius:16px;
  --shadow: 0 18px 70px rgba(0,0,0,.60);
  background:
    radial-gradient(700px 500px at 18% 18%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(700px 500px at 88% 82%, rgba(255,27,45,.08), transparent 55%),
    linear-gradient(180deg, #05060a 0%, var(--bg) 60%, #04050a 100%);
}

/* Ensure body background uses variables for presets unless a preset provides its own explicit background */
body.site{
  color: var(--text);
  background:
    radial-gradient(1000px 600px at 85% -10%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 60%),
    radial-gradient(900px 520px at 15% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 55%, color-mix(in srgb, var(--bg) 85%, #FFFFFF) 100%);
}
body.site.theme-dark{
  background:
    radial-gradient(1000px 600px at 85% -10%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 60%),
    radial-gradient(900px 520px at 15% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, #000) 0%, var(--bg) 60%, color-mix(in srgb, var(--bg) 85%, #000) 100%);
}


/* =========================================================
   Brand UI Skins — make presets look radically different
   (buttons, typography, surfaces, background, density)
   ========================================================= */

/* Shared component mapping */
body.site{
  --card-radius: var(--ui-radius-lg);
  --card-shadow: var(--shadow-sm);
}

/* Apple: airy, pill buttons, soft glass */
body.site.theme-preset-apple{
  --page-bg: radial-gradient(1200px 700px at 80% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
            radial-gradient(900px 520px at 10% 0%, rgba(255,255,255,.10), transparent 60%),
            linear-gradient(180deg, color-mix(in srgb, var(--bg) 80%, #fff 20%) 0%, var(--bg) 60%, color-mix(in srgb, var(--bg) 80%, #000 20%) 100%);
  --btn-radius: 999px;
  --btn-weight: 600;
  --btn-shadow: none;
  --input-radius: 14px;
  --heading-weight: 650;
  --heading-letter-spacing: -0.03em;
}

/* Microsoft Fluent: crisp, slightly rounded, clear elevation */
body.site.theme-preset-microsoft{
  --page-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, #fff 30%) 0%, var(--bg) 55%, color-mix(in srgb, var(--bg) 70%, #000 30%) 100%);
  --btn-radius: 12px;
  --btn-weight: 700;
  --btn-shadow: 0 10px 24px rgba(2,6,23,.16);
  --input-radius: 12px;
  --heading-weight: 750;
  --heading-letter-spacing: -0.02em;
}

/* Google Material You: big radius, tonal surfaces, soft shadows */
body.site.theme-preset-google{
  --page-bg: radial-gradient(900px 600px at 20% 0%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 60%),
            linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #fff 12%) 0%, var(--bg) 70%, color-mix(in srgb, var(--bg) 92%, #000 8%) 100%);
  --ui-radius-md: 18px;
  --ui-radius-lg: 24px;
  --btn-radius: 18px;
  --btn-weight: 700;
  --btn-shadow: 0 14px 34px rgba(0,0,0,.12);
  --input-radius: 18px;
  --heading-weight: 800;
}

/* Xiaomi MIUI: glossy gradients, bouncy buttons */
body.site.theme-preset-xiaomi{
  --page-bg: radial-gradient(1000px 700px at 80% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
            radial-gradient(900px 600px at 15% 10%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 60%),
            linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, #000 30%) 100%);
  --btn-radius: 16px;
  --btn-shadow: 0 18px 40px rgba(0,0,0,.18);
  --btn-primary-bg: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  --input-radius: 16px;
  --heading-weight: 850;
}

/* Samsung One UI: roomy spacing, heavy headers, subtle borders */
body.site.theme-preset-samsung{
  --ui-radius-md: 20px;
  --btn-radius: 999px;
  --btn-weight: 700;
  --btn-shadow: 0 10px 24px rgba(0,0,0,.14);
  --input-radius: 20px;
  --heading-weight: 900;
  --body-letter-spacing: .1px;
}

/* Tesla Minimal: ultra minimal, sharp, thin borders */
body.site.theme-preset-tesla{
  --page-bg: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 90%, #000 10%) 100%);
  --ui-radius-md: 10px;
  --ui-radius-lg: 12px;
  --btn-radius: 10px;
  --btn-weight: 600;
  --btn-shadow: none;
  --btn-primary-border: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  --btn-primary-bg: transparent;
  --btn-primary-fg: var(--text);
  --input-radius: 10px;
  --input-bg: transparent;
  --input-border: color-mix(in srgb, var(--text) 14%, transparent);
  --heading-weight: 600;
  --heading-letter-spacing: -0.02em;
}

/* Ford Industrial: squared, strong contrast, solid buttons */
body.site.theme-preset-ford{
  --ui-radius-md: 8px;
  --ui-radius-lg: 10px;
  --btn-radius: 8px;
  --btn-weight: 800;
  --btn-shadow: 0 12px 0 rgba(0,0,0,.18);
  --btn-transform: uppercase;
  --btn-letter-spacing: .06em;
  --input-radius: 8px;
  --heading-weight: 900;
  --heading-letter-spacing: -0.01em;
}

/* Luxury / Auto styles */
body.site.theme-preset-bmw{
  --btn-radius: 14px;
  --btn-shadow: 0 18px 46px rgba(0,0,0,.20);
  --heading-weight: 850;
}
body.site.theme-preset-mercedes{
  --btn-radius: 999px;
  --btn-weight: 650;
  --btn-shadow: 0 16px 44px rgba(0,0,0,.22);
  --heading-letter-spacing: -0.03em;
}
body.site.theme-preset-audi{
  --ui-radius-md: 12px;
  --btn-radius: 12px;
  --btn-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff 20%) 0%, var(--accent) 100%);
  --btn-shadow: 0 14px 30px rgba(0,0,0,.18);
}

/* Tech / Product styles */
body.site.theme-preset-meta{
  --ui-radius-md: 16px;
  --btn-radius: 16px;
  --btn-shadow: 0 16px 34px rgba(0,0,0,.14);
}
body.site.theme-preset-amazon{
  --btn-radius: 12px;
  --btn-weight: 800;
  --btn-primary-bg: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  --btn-primary-fg: #111827;
  --btn-shadow: 0 14px 26px rgba(0,0,0,.16);
}
body.site.theme-preset-netflix{
  --page-bg: radial-gradient(1200px 700px at 70% -10%, rgba(229,9,20,.25), transparent 60%),
            linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, #000 15%) 100%);
  --btn-radius: 10px;
  --btn-primary-bg: linear-gradient(180deg, #e50914 0%, #b20710 100%);
  --btn-shadow: 0 18px 44px rgba(0,0,0,.30);
  --heading-weight: 900;
}
body.site.theme-preset-spotify{
  --btn-radius: 999px;
  --btn-primary-bg: linear-gradient(135deg, #1DB954 0%, #11e389 100%);
  --btn-primary-fg: #07130a;
  --btn-shadow: 0 16px 36px rgba(0,0,0,.18);
}
body.site.theme-preset-adobe{
  --ui-radius-md: 14px;
  --btn-radius: 14px;
  --btn-primary-bg: linear-gradient(135deg, #ff0033 0%, #ff7a18 100%);
  --btn-shadow: 0 18px 44px rgba(0,0,0,.20);
}
body.site.theme-preset-github{
  --page-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #fff 8%) 0%, var(--bg) 100%);
  --btn-radius: 10px;
  --btn-primary-bg: #111827;
  --btn-primary-fg: #f9fafb;
  --btn-shadow: 0 12px 26px rgba(0,0,0,.16);
  --input-bg: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
}
body.site.theme-preset-stripe{
  --btn-radius: 14px;
  --btn-primary-bg: linear-gradient(135deg, #635bff 0%, #00d4ff 100%);
  --btn-shadow: 0 20px 54px rgba(0,0,0,.18);
}
body.site.theme-preset-shopify{
  --btn-radius: 12px;
  --btn-primary-bg: linear-gradient(180deg, #2f855a 0%, #276749 100%);
  --btn-shadow: 0 16px 38px rgba(0,0,0,.18);
}
body.site.theme-preset-notion{
  --page-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #fff 8%) 0%, color-mix(in srgb, var(--bg) 92%, #000 8%) 100%);
  --btn-radius: 10px;
  --btn-primary-bg: transparent;
  --btn-primary-fg: var(--text);
  --btn-primary-border: color-mix(in srgb, var(--text) 18%, transparent);
  --btn-shadow: none;
  --input-bg: transparent;
  --input-border: color-mix(in srgb, var(--text) 14%, transparent);
  --heading-weight: 700;
  --heading-letter-spacing: -0.015em;
}

/* Universal Auto Dealer */
body.site.theme-preset-dealer{
  --btn-radius: 12px;
  --btn-weight: 850;
  --btn-shadow: 0 14px 34px rgba(0,0,0,.18);
  --heading-weight: 900;
}

/* Make tiles/cards follow theme strongly */
body.site .badge-car,
body.site .navbar-car,
body.site .header{
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-color: var(--line);
}



/* ===== Preset personalities (extra radical UI differences) ===== */

/* Microsoft Fluent: crisp, slightly squared, clear borders */
body.site.theme-preset-microsoft{
  --radius: 10px;
  --btn-radius: 10px;
  --btn-weight: 600;
  --btn-letter-spacing: .01em;
  --btn-shadow: 0 8px 22px rgba(2,6,23,.10);
  --btn-hover-shadow: 0 14px 34px rgba(2,6,23,.14);
  --input-radius: 10px;
  --card-radius: 14px;
  --card-shadow: 0 12px 28px rgba(2,6,23,.10);
  --page-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, #fff 10%) 0%, var(--bg) 60%, color-mix(in srgb, var(--bg) 85%, #000 15%) 100%);
}

/* Apple: airy, rounded, subtle, pills */
body.site.theme-preset-apple{
  --radius: 16px;
  --btn-radius: 999px;
  --btn-weight: 600;
  --btn-letter-spacing: -.01em;
  --btn-shadow: 0 10px 28px rgba(2,6,23,.14);
  --btn-hover-lift: -2px;
  --input-radius: 999px;
  --card-radius: 20px;
  --card-shadow: 0 18px 50px rgba(2,6,23,.14);
  --page-bg: radial-gradient(900px 600px at 20% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
             linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, #fff 14%) 60%, color-mix(in srgb, var(--bg) 84%, #000 16%) 100%);
}

/* Google Material You: soft, big radius, colorful focus */
body.site.theme-preset-google{
  --radius: 22px;
  --btn-radius: 999px;
  --btn-weight: 650;
  --btn-shadow: 0 14px 30px rgba(2,6,23,.10);
  --btn-hover-lift: -2px;
  --input-radius: 999px;
  --card-radius: 26px;
  --card-shadow: 0 20px 60px rgba(2,6,23,.10);
}

/* Xiaomi MIUI: glossy gradients */
body.site.theme-preset-xiaomi{
  --radius: 18px;
  --btn-radius: 16px;
  --btn-weight: 700;
  --btn-letter-spacing: .01em;
  --btn-primary-bg: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent2) 85%, #fff 15%));
  --btn-shadow: 0 16px 40px rgba(2,6,23,.18);
  --btn-hover-shadow: 0 22px 60px rgba(2,6,23,.22);
  --page-bg: radial-gradient(900px 600px at 10% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
             radial-gradient(900px 600px at 90% 90%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 60%),
             linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, #000 15%) 100%);
}
/* Make gradient button actually render */
body.site.theme-preset-xiaomi .btn-primary{
  background-image: var(--btn-primary-bg);
  border-color: transparent;
}

/* Ford Industrial: compact, bold, squared, uppercase */
body.site.theme-preset-ford{
  --radius: 6px;
  --btn-radius: 6px;
  --btn-weight: 800;
  --btn-letter-spacing: .08em;
  --btn-shadow: none;
  --btn-hover-lift: 0px;
  --input-radius: 6px;
  --card-radius: 10px;
  --card-shadow: 0 10px 24px rgba(0,0,0,.18);
}
body.site.theme-preset-ford .btn{ text-transform: uppercase; }

/* Tesla Minimal: ultra clean, thin borders, no shadow */
body.site.theme-preset-tesla{
  --radius: 12px;
  --btn-radius: 999px;
  --btn-weight: 600;
  --btn-letter-spacing: .02em;
  --btn-shadow: none;
  --card-shadow: none;
  --input-bg: transparent;
}
body.site.theme-preset-tesla .card,
body.site.theme-preset-tesla .finderItem{ box-shadow:none; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
body.site.theme-preset-tesla .btn-primary{ background: transparent; color: var(--accent); }
body.site.theme-preset-tesla .btn-primary:hover{ background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Notion Editorial: calm, paper-ish, subtle */
body.site.theme-preset-notion{
  --radius: 10px;
  --btn-radius: 10px;
  --btn-weight: 650;
  --btn-shadow: none;
  --page-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #fff 8%) 0%, var(--bg) 100%);
}


/* ============================================================
   FORCE APPLY PRESET TOKENS (override inline element tokens)
   Reason: many elements set --btn-bg/--hp-color inline, which
   makes different presets look identical. These rules map UI
   elements to theme tokens, so preset switching is visible.
   ============================================================ */
body.site[class*="theme-preset-"] .btn-car{
  --btn-bg: var(--accent) !important;
  --btn-fg: var(--on-accent) !important;
}
body.site[class*="theme-preset-"] .btn-car.btn-car--metal{
  --btn-bg: var(--accent2) !important;
  --btn-fg: var(--on-accent) !important;
}
body.site[class*="theme-preset-"] .brandPhone.brandPhone--theme{
  --hp-color: var(--accent) !important;
  --hp-fg: var(--on-accent) !important;
}
body.site[class*="theme-preset-"] .brandPhone.brandPhone--theme.brandPhone--theme-outline{
  --hp-color: color-mix(in srgb, var(--accent) 55%, var(--surface)) !important;
  --hp-fg: var(--text) !important;
}

/* Header / navbar / panels follow tokens */
body.site[class*="theme-preset-"] .header,
body.site[class*="theme-preset-"] .navbar-car,
body.site[class*="theme-preset-"] .panel,
body.site[class*="theme-preset-"] .footer{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--line) 75%, transparent) !important;
}
body.site[class*="theme-preset-"] .navbar-car{
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  backdrop-filter: blur(10px);
}

/* Links & accents */
body.site[class*="theme-preset-"] a{ color: var(--accent); }
body.site[class*="theme-preset-"] a:hover{ color: var(--accent2); }

/* Keep manual header phone colours independent from theme link colours */
body.site[class*="theme-preset-"] a.brandPhone:not(.brandPhone--theme),
body.site[class*="theme-preset-"] a.brandPhone:not(.brandPhone--theme):hover{
  color: var(--hp-color) !important;
}

/* Forms */
body.site[class*="theme-preset-"] input,
body.site[class*="theme-preset-"] select,
body.site[class*="theme-preset-"] textarea{
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Utility: make headings pop per preset */
body.site[class*="theme-preset-"] h1,
body.site[class*="theme-preset-"] h2,
body.site[class*="theme-preset-"] h3{
  color: var(--text) !important;
}

/* =====================================================================
   RADICAL APPLY (visual): make EVERY preset clearly different

   If only accents change, presets can feel identical. This layer adds a
   preset-dependent ambient background (using the preset's own accents)
   and slightly tints the base surfaces so the whole UI shifts.
   ===================================================================== */

/* Always keep the page wrapper transparent so body background is visible */
body.site[class*="theme-preset-"] .ch-page{ background: transparent; }

/* Light variants */
body.site[class*="theme-preset-"][class*="theme-variant-light"]{
  --bg:      color-mix(in srgb, var(--ch-bg) 90%, var(--ch-accent) 10%);
  --surface: color-mix(in srgb, var(--ch-surface) 92%, var(--ch-accent2) 8%);
  background:
    radial-gradient(1000px 700px at 18% 12%, color-mix(in srgb, var(--ch-accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 620px at 86% 84%, color-mix(in srgb, var(--ch-accent2) 18%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--ch-bg) 88%, #ffffff), var(--ch-bg));
  background-attachment: fixed;
}

/* Dark + Color variants */
body.site[class*="theme-preset-"][class*="theme-variant-dark"],
body.site[class*="theme-preset-"][class*="theme-variant-color"]{
  --bg:      color-mix(in srgb, var(--ch-bg) 88%, #000 12%);
  --surface: color-mix(in srgb, var(--ch-surface) 90%, #000 10%);
  background:
    radial-gradient(900px 620px at 20% 10%, color-mix(in srgb, var(--ch-accent) 20%, transparent), transparent 62%),
    radial-gradient(820px 560px at 86% 88%, color-mix(in srgb, var(--ch-accent2) 16%, transparent), transparent 60%),
    radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.82)),
    linear-gradient(180deg, var(--ch-bg), var(--ch-bg));
  background-attachment: fixed;
}


/* Header phones: theme-driven mode */
body.site[class*="theme-preset-"] .brandPhone--theme{
  --hp-theme-color: var(--accent) !important;
  --hp-theme-fg: var(--on-accent) !important;
}
body.site.theme-preset-bmw .brandPhone--theme-auto,
body.site.theme-preset-mercedes .brandPhone--theme-auto,
body.site.theme-preset-audi .brandPhone--theme-auto,
body.site.theme-preset-apple .brandPhone--theme-auto,
body.site.theme-preset-notion .brandPhone--theme-auto,
body.site.theme-preset-github .brandPhone--theme-auto,
body.site.theme-preset-uber .brandPhone--theme-auto,
body.site.theme-preset-ibm .brandPhone--theme-auto,
body.site.theme-preset-linkedin .brandPhone--theme-auto{
  background: transparent !important;
  border-color: color-mix(in srgb, var(--accent) 58%, transparent) !important;
}
body.site.theme-preset-tesla .brandPhone--theme-auto,
body.site.theme-preset-netflix .brandPhone--theme-auto,
body.site.theme-preset-youtube .brandPhone--theme-auto,
body.site.theme-preset-tiktok .brandPhone--theme-auto,
body.site.theme-preset-coca .brandPhone--theme-auto,
body.site.theme-preset-mcd .brandPhone--theme-auto,
body.site.theme-preset-disney .brandPhone--theme-auto{
  color: var(--on-accent) !important;
  background: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 72%, transparent) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
body.site.theme-preset-spacex .brandPhone--theme-auto,
body.site.theme-preset-spotify .brandPhone--theme-auto,
body.site.theme-preset-stripe .brandPhone--theme-auto,
body.site.theme-preset-paypal .brandPhone--theme-auto,
body.site.theme-preset-salesforce .brandPhone--theme-auto,
body.site.theme-preset-shopify .brandPhone--theme-auto,
body.site.theme-preset-xiaomi .brandPhone--theme-auto,
body.site.theme-preset-google .brandPhone--theme-auto,
body.site.theme-preset-microsoft .brandPhone--theme-auto,
body.site.theme-preset-samsung .brandPhone--theme-auto,
body.site.theme-preset-sony .brandPhone--theme-auto,
body.site.theme-preset-starbucks .brandPhone--theme-auto,
body.site.theme-preset-airbnb .brandPhone--theme-auto,
body.site.theme-preset-adobe .brandPhone--theme-auto,
body.site.theme-preset-amazon .brandPhone--theme-auto,
body.site.theme-preset-ford .brandPhone--theme-auto,
body.site.theme-preset-dealer .brandPhone--theme-auto,
body.site.theme-preset-ikea .brandPhone--theme-auto,
body.site.theme-preset-twitch .brandPhone--theme-auto{
  background: color-mix(in srgb, var(--surface) 52%, transparent) !important;
  border-color: color-mix(in srgb, var(--line) 72%, transparent) !important;
  backdrop-filter: blur(10px);
}


/* ========= Additional 10 Premium Theme Presets ========= */
/* Hutsul: warm craft, ornamental */
body.site.theme-preset-hutsul{--radius:18px;--btn-radius:14px;--btn-weight:800;--btn-letter-spacing:.04em;--btn-shadow:0 14px 34px rgba(118,65,26,.22);--btn-hover-shadow:0 20px 52px rgba(118,65,26,.28);--card-radius:22px;--card-shadow:0 22px 60px rgba(118,65,26,.16);--page-bg:radial-gradient(700px 380px at 0% 0%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 55%), linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, #8b5e34 12%) 100%);} 
body.site.theme-preset-hutsul .btn{border-width:2px;} 
body.site.theme-preset-hutsul .card,body.site.theme-preset-hutsul .finderItem{border-style:solid;} 
/* Dnipro: strict blue-yellow civic */
body.site.theme-preset-dnipro{--radius:8px;--btn-radius:8px;--btn-weight:800;--btn-letter-spacing:.06em;--btn-shadow:none;--btn-hover-lift:0px;--input-radius:8px;--card-radius:12px;--card-shadow:0 12px 26px rgba(0,91,187,.12);} 
body.site.theme-preset-dnipro .btn{text-transform:uppercase;} 
body.site.theme-preset-dnipro .header,body.site.theme-preset-dnipro .navbar-car{border-bottom:3px solid color-mix(in srgb, var(--accent2) 70%, transparent) !important;} 
/* Kyiv Modern: glassmorphism */
body.site.theme-preset-kyivmodern{--radius:24px;--btn-radius:999px;--btn-weight:650;--btn-shadow:0 18px 40px rgba(0,0,0,.14);--btn-hover-shadow:0 24px 60px rgba(0,0,0,.18);--input-radius:18px;--card-radius:28px;--card-shadow:0 24px 72px rgba(15,23,42,.16);} 
body.site.theme-preset-kyivmodern .header,body.site.theme-preset-kyivmodern .navbar-car,body.site.theme-preset-kyivmodern .card,body.site.theme-preset-kyivmodern .finderItem,body.site.theme-preset-kyivmodern .panel{background:color-mix(in srgb, var(--surface) 78%, transparent) !important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);} 
/* Cossack: rough, bold, framed */
body.site.theme-preset-cossack{--radius:8px;--btn-radius:6px;--btn-weight:800;--btn-letter-spacing:.08em;--btn-shadow:0 10px 24px rgba(0,0,0,.18);--card-radius:10px;--card-shadow:0 14px 34px rgba(43,26,18,.22);} 
body.site.theme-preset-cossack .btn,body.site.theme-preset-cossack .btn-car{text-transform:uppercase;} 
body.site.theme-preset-cossack .card,body.site.theme-preset-cossack .finderItem{outline:1px solid color-mix(in srgb, var(--accent2) 35%, var(--line));outline-offset:-1px;} 
/* Black Sea: luminous marine */
body.site.theme-preset-blacksea{--radius:20px;--btn-radius:999px;--btn-weight:700;--btn-shadow:0 18px 42px rgba(11,188,214,.22);--btn-hover-shadow:0 24px 58px rgba(11,188,214,.28);--card-radius:24px;--card-shadow:0 22px 66px rgba(3,105,161,.18);--page-bg:radial-gradient(900px 540px at 10% -10%, rgba(34,211,238,.16), transparent 55%), radial-gradient(900px 540px at 90% 0%, rgba(14,165,233,.12), transparent 55%), linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, #001018 15%) 100%);} 
/* Cyber Kyiv: neon techno */
body.site.theme-preset-cyberkyiv{--radius:14px;--btn-radius:12px;--btn-weight:800;--btn-letter-spacing:.06em;--btn-primary-bg:linear-gradient(135deg, var(--accent), var(--accent2));--btn-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 28%, transparent);--btn-hover-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 34%, transparent);--card-radius:18px;--card-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 24px 72px rgba(0,0,0,.42);} 
body.site.theme-preset-cyberkyiv .btn-primary{background-image:var(--btn-primary-bg);border-color:transparent;} 
body.site.theme-preset-cyberkyiv .card,body.site.theme-preset-cyberkyiv .finderItem{box-shadow:var(--card-shadow);} 
/* Minimal White: editorial ultra-clean */
body.site.theme-preset-minimalwhite{--radius:6px;--btn-radius:6px;--btn-weight:600;--btn-shadow:none;--btn-hover-lift:0px;--input-radius:6px;--card-radius:6px;--card-shadow:none;} 
body.site.theme-preset-minimalwhite .card,body.site.theme-preset-minimalwhite .finderItem,body.site.theme-preset-minimalwhite .panel,body.site.theme-preset-minimalwhite .header,body.site.theme-preset-minimalwhite .navbar-car{box-shadow:none !important;border-width:1px !important;} 
body.site.theme-preset-minimalwhite .btn-primary{background:#111 !important;border-color:#111 !important;color:#fff !important;} 
/* Steel: metal, industrial */
body.site.theme-preset-steel{--radius:12px;--btn-radius:10px;--btn-weight:800;--btn-letter-spacing:.05em;--btn-primary-bg:linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff 15%), color-mix(in srgb, var(--accent2) 70%, #000 30%));--btn-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 16px 34px rgba(73,84,99,.24);--card-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 20px 54px rgba(73,84,99,.18);} 
body.site.theme-preset-steel .btn-primary{background-image:var(--btn-primary-bg);border-color:color-mix(in srgb, var(--accent2) 72%, transparent);} 
/* Sunflower: bright cheerful rounded */
body.site.theme-preset-sunflower{--radius:22px;--btn-radius:999px;--btn-weight:800;--btn-shadow:0 16px 40px rgba(255,213,0,.24);--btn-hover-shadow:0 22px 54px rgba(255,138,0,.24);--input-radius:16px;--card-radius:26px;--card-shadow:0 22px 62px rgba(255,213,0,.14);} 
body.site.theme-preset-sunflower .btn-primary{color:#3a2b00;} 
/* Forest: organic, soft depth */
body.site.theme-preset-forest{--radius:18px;--btn-radius:14px;--btn-weight:700;--btn-shadow:0 16px 40px rgba(47,143,78,.20);--btn-hover-shadow:0 22px 54px rgba(47,143,78,.26);--input-radius:14px;--card-radius:22px;--card-shadow:0 24px 68px rgba(34,84,61,.16);--page-bg:radial-gradient(840px 480px at 0% 0%, rgba(163,230,53,.10), transparent 55%), radial-gradient(840px 480px at 100% 0%, rgba(57,168,95,.12), transparent 55%), linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, #0b1b12 12%) 100%);} 
body.site.theme-preset-forest .card,body.site.theme-preset-forest .finderItem{border-color:color-mix(in srgb, var(--accent) 18%, var(--line));}