/* Wemoda + product pages — shared dark / light theme tokens */
html[data-theme="dark"],
html:not([data-theme]) {
  color-scheme: dark;
  color-scheme: only dark;

  --bg: #060c1b;
  --bg-soft: #0b1225;
  --bg-card: rgba(16, 24, 45, 0.82);
  --bg-card-solid: #10192f;
  --bg-alt: #0d1730;
  --surface: rgba(20, 31, 58, 0.9);
  --surface-2: rgba(10, 18, 36, 0.95);
  --text: #f5f7ff;
  --text-soft: #c4cce6;
  --text-muted: #91a0c9;
  --border: rgba(123, 145, 255, 0.16);
  --border-strong: rgba(123, 145, 255, 0.28);
  --border-solid: #1e2940;

  --brand-cyan: #36c1ff;
  --brand-blue: #4e78ff;
  --brand-violet: #825cff;
  --brand-violet-light: #b8aeff;
  --brand-violet-dark: #6b4de6;
  --brand-pink: #ea5cff;
  --brand-orange: #ff8c4d;
  --brand-green: #50d6a0;
  --brand-warning: #fdc96e;
  --brand-danger: #ff6b6b;

  --brand-violet-a06: rgba(130, 92, 255, 0.06);
  --brand-violet-a08: rgba(130, 92, 255, 0.08);
  --brand-violet-a10: rgba(130, 92, 255, 0.1);
  --brand-violet-a12: rgba(130, 92, 255, 0.12);
  --brand-violet-a15: rgba(130, 92, 255, 0.15);
  --brand-violet-a18: rgba(130, 92, 255, 0.18);
  --brand-violet-a20: rgba(130, 92, 255, 0.2);
  --brand-violet-a25: rgba(130, 92, 255, 0.25);
  --brand-violet-a30: rgba(130, 92, 255, 0.3);
  --brand-violet-a35: rgba(130, 92, 255, 0.35);
  --brand-cyan-a08: rgba(54, 193, 255, 0.08);
  --brand-cyan-a16: rgba(54, 193, 255, 0.16);
  --brand-green-a08: rgba(80, 214, 160, 0.08);
  --brand-green-a18: rgba(80, 214, 160, 0.18);

  --gradient-brand: linear-gradient(135deg, var(--brand-cyan), var(--brand-violet) 48%, var(--brand-orange));
  --gradient-soft: linear-gradient(180deg, rgba(10, 18, 36, 0.72), rgba(10, 18, 36, 0.96));
  --gradient-panel: linear-gradient(135deg, rgba(54, 193, 255, 0.18), rgba(130, 92, 255, 0.18) 55%, rgba(255, 140, 77, 0.12));
  --body-bg:
    radial-gradient(circle at top left, rgba(54, 193, 255, 0.16), transparent 30%),
    radial-gradient(circle at 80% 0%, rgba(130, 92, 255, 0.2), transparent 32%),
    radial-gradient(circle at bottom right, rgba(255, 140, 77, 0.12), transparent 28%),
    linear-gradient(180deg, #050913 0%, #091122 32%, #060c1b 100%);
  --header-bg: rgba(5, 10, 22, 0.72);
  --header-bg-scrolled: rgba(6, 12, 27, 0.92);
  --header-border: transparent;
  --header-border-scrolled: var(--border);
  --noise-opacity: 0.04;
  --shadow-xl: 0 30px 90px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.2);
  --card-shadow: none;
  --focus-ring: rgba(130, 92, 255, 0.15);
  --on-primary: #ffffff;
  --skip-link-fg: #050913;

  /* Conceptra / admin aliases */
  --card: var(--bg-card-solid);
  --primary: var(--brand-violet);
  --primary-light: var(--brand-violet-light);
  --primary-dark: var(--brand-violet-dark);
  --secondary: var(--brand-cyan);
  --accent: var(--brand-pink);
  --warning: var(--brand-warning);
  --success: var(--brand-green);
  --danger: var(--brand-danger);
  --text-sec: var(--text-soft);
  --muted: var(--text-muted);
  --accent-text: var(--brand-violet-light);
  --hero-from: var(--text);
  --hero-to: var(--brand-violet-light);
  --topbar-bg: var(--header-bg);
  --topbar-border: var(--border-solid);
  --chip-on-bg: var(--brand-violet-a18);
  --step-bg: var(--brand-violet-a20);
  --tag-bg: var(--brand-violet-a15);
  --tag-dry-bg: rgba(253, 201, 110, 0.15);
  --code-bg: var(--brand-violet-a12);
  --ok: var(--success);
  --warn: #e17055;
  --glow-opacity: 0.15;
  --mini-surface: rgba(255, 255, 255, 0.03);
  --price-divider: rgba(30, 41, 64, 0.5);

  --glass-1: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.08);
  --glass-3: rgba(255, 255, 255, 0.04);
  --glass-4: rgba(255, 255, 255, 0.03);
  --glass-5: rgba(255, 255, 255, 0.06);
  --glass-6: rgba(255, 255, 255, 0.02);
  --glass-7: rgba(255, 255, 255, 0.1);
  --glass-8: rgba(255, 255, 255, 0.18);
  --glass-9: rgba(255, 255, 255, 0.14);
  --glass-10: rgba(255, 255, 255, 0.12);
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.1);
  --placeholder: #7f8db7;
  --hero-accent-gradient: linear-gradient(135deg, #ffffff, #9ddcff 20%, #d3b0ff 52%, #ffb06d 92%);
  --grid-line: rgba(255, 255, 255, 0.04);
  --grid-mask: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.95) 22%, rgba(0, 0, 0, 0.95) 100%);
  --panel-surface: rgba(16, 24, 45, 0.86);
  --panel-deep: rgba(8, 14, 28, 0.95);
  --panel-window: rgba(11, 17, 34, 0.9);
  --panel-shell: rgba(0, 0, 0, 0.92);
  --panel-note: rgba(8, 14, 28, 0.72);
  --panel-overlay: rgba(7, 12, 26, 0.48);
  --section-services: linear-gradient(180deg, rgba(9, 17, 34, 0.25), rgba(12, 22, 46, 0.6));
  --section-tech: linear-gradient(180deg, rgba(12, 22, 46, 0.3), rgba(10, 18, 36, 0.16));
  --pricing-featured: linear-gradient(180deg, rgba(18, 30, 60, 0.95), rgba(12, 20, 38, 0.95));
  --careers-head: linear-gradient(135deg, rgba(54, 193, 255, 0.12), rgba(130, 92, 255, 0.14), rgba(255, 140, 77, 0.12));
  --case-ph-base: linear-gradient(180deg, rgba(16, 27, 55, 0.92), rgba(8, 14, 28, 0.98));
  --case-ph-1: linear-gradient(135deg, rgba(54, 193, 255, 0.22), rgba(130, 92, 255, 0.14), rgba(8, 14, 28, 0.98));
  --case-ph-2: linear-gradient(135deg, rgba(130, 92, 255, 0.26), rgba(255, 140, 77, 0.12), rgba(8, 14, 28, 0.98));
  --case-ph-3: linear-gradient(135deg, rgba(80, 214, 160, 0.18), rgba(54, 193, 255, 0.12), rgba(8, 14, 28, 0.98));
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 18px 34px rgba(130, 92, 255, 0.25);
  --btn-ghost-border: rgba(255, 255, 255, 0.12);
  --btn-ghost-bg: rgba(255, 255, 255, 0.03);
  --nav-dropdown-bg: rgba(8, 14, 28, 0.98);
  --nav-cta-bg: rgba(255, 255, 255, 0.06);
  --nav-cta-border: rgba(255, 255, 255, 0.08);
  --nav-hover-bg: rgba(255, 255, 255, 0.04);
  --footer-bg: linear-gradient(180deg, transparent, rgba(8, 14, 28, 0.95));
  --phone-shell: linear-gradient(180deg, rgba(38, 54, 100, 0.85), rgba(17, 27, 55, 0.92));
  --phone-screen: linear-gradient(180deg, rgba(18, 30, 62, 0.98), rgba(9, 15, 30, 0.94));
  --browser-panel: linear-gradient(180deg, rgba(17, 28, 58, 0.96), rgba(8, 14, 28, 0.96));
  --theme-toggle-bg: rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] {
  color-scheme: light;
  color-scheme: only light;

  --bg: #f4f6fc;
  --bg-soft: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-solid: #ffffff;
  --bg-alt: #eef2fb;
  --surface: rgba(255, 255, 255, 0.95);
  --surface-2: #f0f4fc;
  --text: #0f1729;
  --text-soft: #3d4a66;
  --text-muted: #6b7a9a;
  --border: rgba(78, 120, 255, 0.18);
  --border-strong: rgba(78, 120, 255, 0.32);
  --border-solid: #d4dbe8;

  --brand-cyan: #0b8fd4;
  --brand-blue: #3d63e8;
  --brand-violet: #6b4de6;
  --brand-violet-light: #5b4cdb;
  --brand-violet-dark: #5a3fd4;
  --brand-pink: #d93aaf;
  --brand-orange: #e8742e;
  --brand-green: #1fa67a;
  --brand-warning: #c99212;
  --brand-danger: #e25555;

  --brand-violet-a06: rgba(107, 77, 230, 0.06);
  --brand-violet-a08: rgba(107, 77, 230, 0.08);
  --brand-violet-a10: rgba(107, 77, 230, 0.1);
  --brand-violet-a12: rgba(107, 77, 230, 0.12);
  --brand-violet-a15: rgba(107, 77, 230, 0.15);
  --brand-violet-a18: rgba(107, 77, 230, 0.18);
  --brand-violet-a20: rgba(107, 77, 230, 0.2);
  --brand-violet-a25: rgba(107, 77, 230, 0.25);
  --brand-violet-a30: rgba(107, 77, 230, 0.3);
  --brand-violet-a35: rgba(107, 77, 230, 0.35);
  --brand-cyan-a08: rgba(11, 143, 212, 0.08);
  --brand-cyan-a16: rgba(11, 143, 212, 0.16);
  --brand-green-a08: rgba(31, 166, 122, 0.08);
  --brand-green-a18: rgba(31, 166, 122, 0.18);

  --gradient-brand: linear-gradient(135deg, var(--brand-cyan), var(--brand-violet) 48%, var(--brand-orange));
  --gradient-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 246, 252, 0.98));
  --gradient-panel: linear-gradient(135deg, rgba(11, 143, 212, 0.1), rgba(107, 77, 230, 0.1) 55%, rgba(232, 116, 46, 0.08));
  --body-bg:
    radial-gradient(circle at top left, rgba(54, 193, 255, 0.12), transparent 30%),
    radial-gradient(circle at 80% 0%, rgba(130, 92, 255, 0.1), transparent 32%),
    radial-gradient(circle at bottom right, rgba(255, 140, 77, 0.08), transparent 28%),
    linear-gradient(180deg, #eef2fb 0%, #f8faff 32%, #f4f6fc 100%);
  --header-bg: rgba(255, 255, 255, 0.88);
  --header-bg-scrolled: rgba(255, 255, 255, 0.96);
  --header-border: rgba(212, 219, 232, 0.8);
  --header-border-scrolled: var(--border);
  --noise-opacity: 0.03;
  --shadow-xl: 0 30px 90px rgba(15, 23, 41, 0.12);
  --shadow-lg: 0 20px 60px rgba(15, 23, 41, 0.08);
  --shadow-md: 0 12px 34px rgba(15, 23, 41, 0.06);
  --card-shadow: 0 4px 24px rgba(20, 26, 40, 0.06);
  --focus-ring: rgba(107, 77, 230, 0.2);
  --on-primary: #ffffff;
  --skip-link-fg: #f4f6fc;

  --card: var(--bg-card-solid);
  --primary: var(--brand-violet);
  --primary-light: var(--brand-violet-light);
  --primary-dark: var(--brand-violet-dark);
  --secondary: var(--brand-cyan);
  --accent: var(--brand-pink);
  --warning: var(--brand-warning);
  --success: var(--brand-green);
  --danger: var(--brand-danger);
  --text-sec: var(--text-soft);
  --muted: var(--text-muted);
  --accent-text: var(--brand-violet-light);
  --hero-from: var(--text);
  --hero-to: var(--brand-violet);
  --topbar-bg: var(--header-bg);
  --topbar-border: var(--border-solid);
  --chip-on-bg: var(--brand-violet-a12);
  --step-bg: var(--brand-violet-a10);
  --tag-bg: var(--brand-violet-a10);
  --tag-dry-bg: rgba(253, 201, 110, 0.25);
  --code-bg: var(--brand-violet-a08);
  --ok: var(--success);
  --warn: #d68910;
  --glow-opacity: 0.1;
  --mini-surface: rgba(15, 23, 41, 0.04);
  --price-divider: rgba(212, 219, 232, 0.9);

  --glass-1: rgba(15, 23, 41, 0.05);
  --glass-2: rgba(78, 120, 255, 0.14);
  --glass-3: rgba(15, 23, 41, 0.04);
  --glass-4: rgba(15, 23, 41, 0.03);
  --glass-5: rgba(15, 23, 41, 0.06);
  --glass-6: rgba(15, 23, 41, 0.02);
  --glass-7: rgba(78, 120, 255, 0.1);
  --glass-8: rgba(78, 120, 255, 0.2);
  --glass-9: rgba(78, 120, 255, 0.16);
  --glass-10: rgba(78, 120, 255, 0.12);
  --input-bg: #ffffff;
  --input-border: var(--border-solid);
  --placeholder: #8a96b0;
  --hero-accent-gradient: linear-gradient(135deg, #0f1729 0%, #0b8fd4 22%, #6b4de6 52%, #e8742e 100%);
  --grid-line: rgba(78, 120, 255, 0.1);
  --grid-mask: linear-gradient(180deg, transparent 0, rgba(244, 246, 252, 0.92) 22%, rgba(244, 246, 252, 0.98) 100%);
  --panel-surface: #ffffff;
  --panel-deep: #ffffff;
  --panel-window: #ffffff;
  --panel-shell: #ffffff;
  --panel-note: #f0f4fc;
  --panel-overlay: rgba(255, 255, 255, 0.88);
  --section-services: linear-gradient(180deg, rgba(238, 242, 251, 0.6), rgba(244, 246, 252, 0.95));
  --section-tech: linear-gradient(180deg, rgba(238, 242, 251, 0.5), rgba(244, 246, 252, 0.85));
  --pricing-featured: linear-gradient(180deg, #ffffff, #f0f4fc);
  --careers-head: linear-gradient(135deg, rgba(11, 143, 212, 0.08), rgba(107, 77, 230, 0.1), rgba(232, 116, 46, 0.08));
  --case-ph-base: linear-gradient(180deg, #eef2fb, #f8faff);
  --case-ph-1: linear-gradient(135deg, rgba(11, 143, 212, 0.14), rgba(107, 77, 230, 0.1), #f4f6fc);
  --case-ph-2: linear-gradient(135deg, rgba(107, 77, 230, 0.14), rgba(232, 116, 46, 0.1), #f4f6fc);
  --case-ph-3: linear-gradient(135deg, rgba(31, 166, 122, 0.12), rgba(11, 143, 212, 0.1), #f4f6fc);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 14px 32px rgba(107, 77, 230, 0.22);
  --btn-ghost-border: var(--border);
  --btn-ghost-bg: rgba(15, 23, 41, 0.03);
  --nav-dropdown-bg: #ffffff;
  --nav-cta-bg: rgba(15, 23, 41, 0.04);
  --nav-cta-border: var(--border);
  --nav-hover-bg: rgba(15, 23, 41, 0.04);
  --footer-bg: linear-gradient(180deg, transparent, #eef2fb);
  --phone-shell: linear-gradient(180deg, #e8edf8, #f4f6fc);
  --phone-screen: linear-gradient(180deg, #ffffff, #f0f4fc);
  --browser-panel: linear-gradient(180deg, #ffffff, #f4f6fc);
  --theme-toggle-bg: rgba(15, 23, 41, 0.04);
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--theme-toggle-bg);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
html[data-theme="dark"] .theme-toggle .icon-light,
html:not([data-theme]) .theme-toggle .icon-light { display: inline; }
html[data-theme="dark"] .theme-toggle .icon-dark,
html:not([data-theme]) .theme-toggle .icon-dark { display: none; }
html[data-theme="light"] .theme-toggle .icon-light { display: none; }
html[data-theme="light"] .theme-toggle .icon-dark { display: inline; }