/* ============================================================
   VidWords complete theme presets — full token swaps.
   Scoped under html[data-vw-palette="…"]. Each preset replaces
   the ink-&-amber token family everywhere: accents, CTA grads,
   Watch register, tints, auras, and neutral temperature.
   ============================================================ */

/* ---------- shared cool-neutral base for blue/violet/ruby ---------- */
html[data-vw-palette="ocean"], html[data-vw-palette="royal"], html[data-vw-palette="ruby"] {
  --bg: #f9fafc;
  --surface-2: #f6f7fa;
  --text: #15141a;
  --muted: #63626e;
  --border: #e7e7ee;
  --border-strong: #d7d7e2;
  --code-bg: #f0f0f6;
}
html[data-vw-palette="forest"] {
  --bg: #f8faf7;
  --surface-2: #f5f8f4;
  --text: #131711;
  --muted: #5f685c;
  --border: #e3e9e0;
  --border-strong: #d0dacc;
  --code-bg: #eef3ec;
}
html[data-theme="dark"][data-vw-palette="ocean"], html[data-theme="dark"][data-vw-palette="royal"], html[data-theme="dark"][data-vw-palette="ruby"] {
  --bg: #08090d;
  --surface: #101117;
  --surface-2: #14151c;
  --text: #eeeff4;
  --muted: #9a99a8;
  --border: #22232e;
  --border-strong: #333446;
  --code-bg: #191a24;
}
html[data-theme="dark"][data-vw-palette="forest"] {
  --bg: #080a08;
  --surface: #101410;
  --surface-2: #141914;
  --text: #edf2ec;
  --muted: #98a496;
  --border: #212821;
  --border-strong: #313d31;
  --code-bg: #171e17;
}

/* ================= OCEAN — deep blue ================= */
html[data-vw-palette="ocean"] {
  --bg-tint: #d9eafb;
  --accent: #1263b8;
  --accent-2: #3b96e8;
  --accent-dark: #0f549c;
  --accent-soft: #e7f1fc;
  --accent-soft-border: #c6def5;
  --on-accent: #06213c;
  --accent-grad: linear-gradient(135deg, #56a5ec 0%, #2478d2 100%);
  --cta-grad: linear-gradient(135deg, #58a8ee 0%, #1f74d0 100%);
  --cta-glow: 0 4px 20px -4px rgba(48, 130, 216, .5);
  --watch-ink: #174e8c;
  --watch-ink-hover: #123f74;
  --on-watch-ink: #eaf4ff;
  --ring: 0 0 0 3px rgba(59, 150, 232, .25);
  --aura-1: color-mix(in srgb, #3b96e8 12%, transparent);
  --aura-2: color-mix(in srgb, #38c2d8 9%, transparent);
}
html[data-theme="dark"][data-vw-palette="ocean"] {
  --bg-tint: #0a1c30;
  --accent: #5fabf2;
  --accent-2: #82c0f8;
  --accent-dark: #8ec6f8;
  --accent-soft: #0d1e33;
  --accent-soft-border: #1c3a5e;
  --on-accent: #061c33;
  --accent-grad: linear-gradient(135deg, #7cbdf6 0%, #3f8ede 100%);
  --cta-grad: linear-gradient(135deg, #7cbdf6 0%, #3a89da 100%);
  --cta-glow: 0 4px 28px -4px rgba(95, 171, 242, .5);
  --watch-ink: #3d84cc; --watch-ink-hover: #4d94dc; --on-watch-ink: #06162e;
  --ring: 0 0 0 3px rgba(95, 171, 242, .3);
  --aura-1: color-mix(in srgb, #3b96e8 16%, transparent);
  --aura-2: color-mix(in srgb, #38c2d8 11%, transparent);
}

/* ================= ROYAL — violet ================= */
html[data-vw-palette="royal"] {
  --bg-tint: #eadcfa;
  --accent: #6d3cc0;
  --accent-2: #9a6ce6;
  --accent-dark: #5c34a4;
  --accent-soft: #f1eafb;
  --accent-soft-border: #ddccf5;
  --on-accent: #1e0a3c;
  --accent-grad: linear-gradient(135deg, #a97ef0 0%, #7c4ad2 100%);
  --cta-grad: linear-gradient(135deg, #ab80f2 0%, #7743d0 100%);
  --cta-glow: 0 4px 20px -4px rgba(138, 92, 220, .5);
  --watch-ink: #5b3f9e;
  --watch-ink-hover: #4c3288;
  --on-watch-ink: #f4edff;
  --ring: 0 0 0 3px rgba(154, 108, 230, .25);
  --aura-1: color-mix(in srgb, #9a6ce6 12%, transparent);
  --aura-2: color-mix(in srgb, #e05aa8 8%, transparent);
}
html[data-theme="dark"][data-vw-palette="royal"] {
  --bg-tint: #1c1130;
  --accent: #b490f2;
  --accent-2: #c9adf7;
  --accent-dark: #cdb2f8;
  --accent-soft: #1d1233;
  --accent-soft-border: #38255e;
  --on-accent: #190a33;
  --accent-grad: linear-gradient(135deg, #c3a2f6 0%, #8f5ce0 100%);
  --cta-grad: linear-gradient(135deg, #c3a2f6 0%, #8a56dc 100%);
  --cta-glow: 0 4px 28px -4px rgba(180, 144, 242, .5);
  --watch-ink: #8a62d4; --watch-ink-hover: #9a74e0; --on-watch-ink: #170833;
  --ring: 0 0 0 3px rgba(180, 144, 242, .3);
  --aura-1: color-mix(in srgb, #9a6ce6 17%, transparent);
  --aura-2: color-mix(in srgb, #e05aa8 11%, transparent);
}

/* ================= FOREST — green ================= */
html[data-vw-palette="forest"] {
  --bg-tint: #d9f0de;
  --accent: #1a7a3c;
  --accent-2: #3fae63;
  --accent-dark: #156331;
  --accent-soft: #e5f6ea;
  --accent-soft-border: #c2e8cd;
  --on-accent: #06230f;
  --accent-grad: linear-gradient(135deg, #52bd74 0%, #23904a 100%);
  --cta-grad: linear-gradient(135deg, #54c076 0%, #1f8c46 100%);
  --cta-glow: 0 4px 20px -4px rgba(48, 158, 88, .5);
  --watch-ink: #1c6b44;
  --watch-ink-hover: #155636;
  --on-watch-ink: #eafff2;
  --green: #0e7a5e;
  --ring: 0 0 0 3px rgba(63, 174, 99, .25);
  --aura-1: color-mix(in srgb, #3fae63 12%, transparent);
  --aura-2: color-mix(in srgb, #b3cf3a 9%, transparent);
}
html[data-theme="dark"][data-vw-palette="forest"] {
  --bg-tint: #0b2213;
  --accent: #5ecb85;
  --accent-2: #85dba3;
  --accent-dark: #8fdfab;
  --accent-soft: #0e2416;
  --accent-soft-border: #1e4a2c;
  --on-accent: #052311;
  --accent-grad: linear-gradient(135deg, #7cd89c 0%, #38a862 100%);
  --cta-grad: linear-gradient(135deg, #7cd89c 0%, #34a25e 100%);
  --cta-glow: 0 4px 28px -4px rgba(94, 203, 133, .5);
  --watch-ink: #2f9662; --watch-ink-hover: #3aa870; --on-watch-ink: #04170c;
  --green: #34d399;
  --ring: 0 0 0 3px rgba(94, 203, 133, .3);
  --aura-1: color-mix(in srgb, #3fae63 16%, transparent);
  --aura-2: color-mix(in srgb, #b3cf3a 10%, transparent);
}

/* ================= RUBY — rose red ================= */
html[data-vw-palette="ruby"] {
  --bg-tint: #fadde4;
  --accent: #bc2a4c;
  --accent-2: #e85575;
  --accent-dark: #a02341;
  --accent-soft: #fdeaee;
  --accent-soft-border: #f6c8d2;
  --on-accent: #3a0512;
  --accent-grad: linear-gradient(135deg, #f0728d 0%, #d43a5e 100%);
  --cta-grad: linear-gradient(135deg, #f2758f 0%, #d0355a 100%);
  --cta-glow: 0 4px 20px -4px rgba(220, 70, 105, .45);
  --watch-ink: #99284a;
  --watch-ink-hover: #821f3d;
  --on-watch-ink: #ffedf1;
  --ring: 0 0 0 3px rgba(232, 85, 117, .22);
  --aura-1: color-mix(in srgb, #e85575 11%, transparent);
  --aura-2: color-mix(in srgb, #ef8a48 8%, transparent);
}
html[data-theme="dark"][data-vw-palette="ruby"] {
  --bg-tint: #2a0e16;
  --accent: #f2748e;
  --accent-2: #f797ab;
  --accent-dark: #f89cb0;
  --accent-soft: #2a1018;
  --accent-soft-border: #57202f;
  --on-accent: #310310;
  --accent-grad: linear-gradient(135deg, #f68ba1 0%, #e04a6c 100%);
  --cta-grad: linear-gradient(135deg, #f68ba1 0%, #dc4668 100%);
  --cta-glow: 0 4px 28px -4px rgba(242, 116, 142, .5);
  --watch-ink: #cf4568; --watch-ink-hover: #da5678; --on-watch-ink: #2c0410;
  --ring: 0 0 0 3px rgba(242, 116, 142, .3);
  --aura-1: color-mix(in srgb, #e85575 15%, transparent);
  --aura-2: color-mix(in srgb, #ef8a48 10%, transparent);
}

/* Recolor the logo mark to follow the active palette (play triangle + bubble) */
html[data-vw-palette] .logo svg path[fill^="url"]:first-of-type { fill: var(--accent-2); }
html[data-vw-palette] .logo svg path[stroke="#e6c179"] { fill: var(--accent-soft); stroke: var(--accent-soft-border); }
html[data-vw-palette] .logo svg path[stroke="#2a1e08"] { stroke: var(--on-accent); }
html[data-vw-palette] .logo svg path[stroke="#c0800f"] { stroke: var(--accent); }
html[data-theme="dark"][data-vw-palette] .logo svg path[stroke="#2a1e08"] { stroke: var(--on-accent); }

/* Hero marker + CTA band inherit automatically via --accent-2 / --cta-grad */