/* Accent themes. Activate with ?theme=<name> (see the picker on localhost).
   Every theme only redefines the accent ramp + what sits on top of it.
   Default (no data-theme) = the original gold, defined in styles.css. */

/* ---- BORDEAUX: deep wine. Classic luxury, reads as "serious" ---- */
html[data-theme="bordeaux"]{
  --gold:#5F1626; --gold2:#8E2437; --gold3:#B04B5C;
  --acc-rgb:142,36,55;
  --on-acc:#fff2f3;
  --acc-text:#CE7484; --acc-text-dim:#B05A6B;            /* wine is too dark to read on #0b0b0c */
  --title-grad:linear-gradient(180deg,#C4576A 0%,#98283C 52%,#6B1B2C 100%);
}

/* ---- IVORY + BORDEAUX: neutral title, colour only in the CTA. Most "brand" ---- */
html[data-theme="ivory-bordeaux"]{
  --gold:#6E1B2E; --gold2:#A62F44; --gold3:#C9606F;
  --acc-rgb:166,47,68;
  --on-acc:#fff2f3;
  --acc-text:#D08192; --acc-text-dim:#B2606F;
  --btn-grad:linear-gradient(180deg,#A62F44,#6E1B2E);
  --title-grad:linear-gradient(180deg,#FFFDF7 0%,#EFEAE0 42%,#D6D0C4 100%);
}

/* ---- IVORY + COPPER: same idea, warm metal CTA ---- */
html[data-theme="ivory-copper"]{
  --gold:#8F5A2E; --gold2:#C08148; --gold3:#E0A56D;
  --acc-rgb:192,129,72;
  --on-acc:#1a1005;
  --title-grad:linear-gradient(180deg,#FFFDF7 0%,#EFEAE0 42%,#D6D0C4 100%);
}

/* ---- BURGUNDY MODERN: wine to warm rose, diagonal gradient ---- */
html[data-theme="burgundy-modern"]{
  --gold:#7A1F3D; --gold2:#B33A5B; --gold3:#E08A7A;
  --acc-rgb:179,58,91;
  --on-acc:#fff6f4;
  --btn-grad:linear-gradient(135deg,#E08A7A 0%,#B33A5B 55%,#7A1F3D 100%);
  --title-grad:linear-gradient(120deg,#E9A18E 0%,#C94E6C 48%,#8A2545 100%);
}

/* ---- COPPER: burnished bronze. Same family as gold but deeper, no yellow ---- */
html[data-theme="copper"]{
  --gold:#8F5A2E; --gold2:#C08148; --gold3:#E0A56D;
  --acc-rgb:192,129,72;
  --on-acc:#1a1005;
}

/* ============================================================
   COPPER FAMILY. `copper` above is the approved base; these build on it.
   ============================================================ */

/* ---- COPPER DEEP: darker, more oxidised bronze. Heavier, less bright ---- */
html[data-theme="copper-deep"]{
  --gold:#6F3F1D; --gold2:#9C6231; --gold3:#C08A4C;
  --acc-rgb:156,98,49;
  --on-acc:#170c02;
  --acc-text:#CF9457; --acc-text-dim:#B57C42;
  --title-grad:linear-gradient(180deg,#C08A4C 0%,#9C6231 50%,#6F3F1D 100%);
}

/* ---- COPPER GOLD: true yellow-gold falling into copper ---- */
html[data-theme="copper-gold"]{
  --gold:#8F5A2E; --gold2:#D3A24F; --gold3:#F7DE9B;
  --acc-rgb:211,162,79;
  --on-acc:#1a1005;
  --acc-text:#E2B468; --acc-text-dim:#C89440;
  --btn-grad:linear-gradient(180deg,#F0CE7E 0%,#D3A24F 45%,#A26A31 100%);
  --title-grad:linear-gradient(180deg,#FBE7AC 0%,#E4BC6B 30%,#C68F42 65%,#8F5A2E 100%);
}

/* ---- COPPER SHIMMER: base copper + polished metal bevel on the CTAs ---- */
html[data-theme="copper-shimmer"]{
  --gold:#8F5A2E; --gold2:#C08148; --gold3:#E0A56D;
  --acc-rgb:192,129,72;
  --on-acc:#1a1005;
  --acc-text:#DDA46A; --acc-text-dim:#C08148;
  /* horizontal sheen across the word, like light raking over metal */
  --title-grad:linear-gradient(100deg,#8F5A2E 0%,#C08148 24%,#F6E3B8 47%,#C08148 70%,#8F5A2E 100%);
}

/* ---- COPPER GOLD SHIMMER: the yellow-to-copper ramp, plus the bevel ---- */
html[data-theme="copper-gold-shimmer"]{
  --gold:#8F5A2E; --gold2:#D3A24F; --gold3:#F7DE9B;
  --acc-rgb:211,162,79;
  --on-acc:#1a1005;
  --acc-text:#E2B468; --acc-text-dim:#C89440;
  --title-grad:linear-gradient(100deg,#8F5A2E 0%,#C69042 22%,#FBEDC4 48%,#C69042 72%,#8F5A2E 100%);
}

/* ---- COPPER LUX: copper-deep's text/title + copper-base CTAs, but with a
   stronger dark->light gradient and a polished bevel. Albert's pick. ---- */
html[data-theme="copper-lux"]{
  --gold:#8F5A2E; --gold2:#C08148; --gold3:#E0A56D;   /* buttons = copper base */
  --acc-rgb:192,129,72;
  --on-acc:#170c02;
  --acc-text:#CF9457; --acc-text-dim:#B57C42;          /* text = copper deep */
  --title-grad:linear-gradient(180deg,#C08A4C 0%,#9C6231 50%,#6F3F1D 100%);
}

/* same, but the CTA gradient runs dark at the top into light at the bottom */
html[data-theme="copper-lux-inv"]{
  --gold:#8F5A2E; --gold2:#C08148; --gold3:#E0A56D;
  --acc-rgb:192,129,72;
  --on-acc:#170c02;
  --acc-text:#CF9457; --acc-text-dim:#B57C42;
  --title-grad:linear-gradient(180deg,#C08A4C 0%,#9C6231 50%,#6F3F1D 100%);
}

/* Deep bronze CTA: dark, heavy fill with a bright specular top edge and ivory
   lettering. Three darkness steps; the ramp direction is the same in all three. */
html[data-theme="copper-lux"]{ --on-acc:#F7E7CE; }
html[data-theme="copper-lux-deeper"]{
  --gold:#8F5A2E; --gold2:#C08148; --gold3:#E0A56D;
  --acc-rgb:192,129,72;
  --on-acc:#F7E7CE;
  --acc-text:#CF9457; --acc-text-dim:#B57C42;
  --title-grad:linear-gradient(180deg,#C08A4C 0%,#9C6231 50%,#6F3F1D 100%);
}
html[data-theme="copper-lux-noir"]{
  --gold:#8F5A2E; --gold2:#C08148; --gold3:#E0A56D;
  --acc-rgb:192,129,72;
  --on-acc:#F3DFC2;
  --acc-text:#CF9457; --acc-text-dim:#B57C42;
  --title-grad:linear-gradient(180deg,#C08A4C 0%,#9C6231 50%,#6F3F1D 100%);
}

html[data-theme="copper-lux"] .btn-gold{
  background:linear-gradient(180deg,#96662F 0%,#7B4F26 46%,#5A3618 100%) padding-box,
             linear-gradient(180deg,rgba(255,231,196,.34) 0%,rgba(255,231,196,.10) 40%,rgba(0,0,0,.30) 100%) border-box;
}
html[data-theme="copper-lux-deeper"] .btn-gold{
  background:linear-gradient(180deg,#7E5527 0%,#603C1B 48%,#402611 100%) padding-box,
             linear-gradient(180deg,rgba(255,226,186,.30) 0%,rgba(255,226,186,.08) 40%,rgba(0,0,0,.34) 100%) border-box;
}
html[data-theme="copper-lux-noir"] .btn-gold{
  background:linear-gradient(180deg,#5E3E1D 0%,#432913 50%,#2C1A0B 100%) padding-box,
             linear-gradient(180deg,rgba(255,222,180,.28) 0%,rgba(255,222,180,.07) 40%,rgba(0,0,0,.38) 100%) border-box;
}
/* wide-range copper, lit from below. Own border+shadow so the shared bevel
   rule below (which highlights the TOP edge) does not fight it. */
html[data-theme="copper-lux-inv"] .btn-gold{
  border:1px solid transparent;
  background:linear-gradient(180deg,#77441C 0%,#A96C36 34%,#D2925A 72%,#F0C089 100%) padding-box,
             linear-gradient(180deg,#4E2E12 0%,#C08148 55%,#FFE7C4 100%) border-box;
  box-shadow:0 10px 34px rgba(var(--acc-rgb),.30),
             inset 0 -1px 0 rgba(255,246,226,.55),
             inset 0 1px 0 rgba(0,0,0,.32);
  color:#2a1708;
}

/* Polished-metal CTA: gradient hairline border + top highlight + bottom shade.
   The two-layer background (padding-box / border-box) makes the border a gradient. */
html[data-theme="copper-shimmer"] .btn-gold,
html[data-theme="copper-gold-shimmer"] .btn-gold{
  border:1px solid transparent;
  box-shadow:0 10px 34px rgba(var(--acc-rgb),.30),
             inset 0 1px 0 rgba(255,246,226,.62),
             inset 0 -1px 0 rgba(0,0,0,.30);
}
/* deep bronze: NO gloss. Just a whisper of a top hairline and a soft shadow.
   A strong specular bevel reads as a 2010 web button, not as luxury. */
html[data-theme="copper-lux"] .btn-gold,
html[data-theme="copper-lux-deeper"] .btn-gold,
html[data-theme="copper-lux-noir"] .btn-gold{
  border:1px solid transparent;
  box-shadow:0 12px 34px rgba(0,0,0,.42),
             inset 0 1px 0 rgba(255,240,214,.14);
}
html[data-theme="copper-shimmer"] .btn-gold{
  background:linear-gradient(180deg,#E4A76C 0%,#C08148 46%,#94602F 100%) padding-box,
             linear-gradient(180deg,#FBE6C4 0%,#B98A55 45%,#5E3A18 100%) border-box;
}
html[data-theme="copper-gold-shimmer"] .btn-gold{
  background:linear-gradient(180deg,#F2D183 0%,#D3A24F 45%,#A26A31 100%) padding-box,
             linear-gradient(180deg,#FFF3CF 0%,#C79B58 45%,#61401B 100%) border-box;
}

/* The outline "Watch a free lesson" button must stay translucent, so the
   padding-box/border-box trick can't be used (the border layer would tint the
   whole pill). A masked 1px ring gives a gradient border that follows the radius. */
html[data-theme="copper-lux"] .btn-watch,
html[data-theme="copper-lux-deeper"] .btn-watch,
html[data-theme="copper-lux-noir"] .btn-watch,
html[data-theme="copper-lux-inv"] .btn-watch,
html[data-theme="copper-shimmer"] .btn-watch,
html[data-theme="copper-gold-shimmer"] .btn-watch{
  position:relative;border-color:transparent;
  background:rgba(var(--acc-rgb),.10);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.14);
}
html[data-theme="copper-lux"] .btn-watch::before,
html[data-theme="copper-lux-deeper"] .btn-watch::before,
html[data-theme="copper-lux-noir"] .btn-watch::before,
html[data-theme="copper-lux-inv"] .btn-watch::before,
html[data-theme="copper-shimmer"] .btn-watch::before,
html[data-theme="copper-gold-shimmer"] .btn-watch::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,232,190,.42) 0%,rgba(var(--acc-rgb),.34) 48%,rgba(94,58,24,.40) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
html[data-theme="copper-lux"] .btn-watch:hover,
html[data-theme="copper-lux-deeper"] .btn-watch:hover,
html[data-theme="copper-lux-noir"] .btn-watch:hover,
html[data-theme="copper-lux-inv"] .btn-watch:hover,
html[data-theme="copper-shimmer"] .btn-watch:hover,
html[data-theme="copper-gold-shimmer"] .btn-watch:hover{background:rgba(var(--acc-rgb),.20)}

/* ---- CHAMPAGNE: desaturated platinum. Quiet, expensive, no shout ---- */
html[data-theme="champagne"]{
  --gold:#9C907B; --gold2:#C8BCA5; --gold3:#E7DFD0;
  --acc-rgb:200,188,165;
  --on-acc:#17140f;
}

/* ---- IVORY: monochrome. No accent colour at all, maximum modern ---- */
html[data-theme="ivory"]{
  --gold:#C9C4B8; --gold2:#E8E3D8; --gold3:#FFFDF7;
  --acc-rgb:232,227,216;
  --on-acc:#0b0b0c;
  --btn-grad:linear-gradient(180deg,#FFFDF7,#DDD8CC);
}

/* ---- EMERALD: deep green. Landscape-adjacent, unusual for a course ---- */
html[data-theme="emerald"]{
  --gold:#1F6B4F; --gold2:#2F9A72; --gold3:#64C79E;
  --acc-rgb:47,154,114;
  --on-acc:#04150f;
}

/* ---- STEEL: blue hour. Cool, editorial, matches the cityscape shots ---- */
html[data-theme="steel"]{
  --gold:#3F5F80; --gold2:#7098C2; --gold3:#A9C8E6;
  --acc-rgb:112,152,194;
  --on-acc:#06121d;
}

/* ---- theme picker, localhost only (injected by the script in index.html) ---- */
#themepick{position:fixed;right:14px;bottom:14px;z-index:9999;display:flex;flex-direction:column;gap:6px;
  background:rgba(10,10,12,.92);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:10px;font:12px/1.3 system-ui,sans-serif;max-height:70vh;overflow:auto}
#themepick strong{color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
#themepick a{display:flex;align-items:center;gap:8px;color:#e8e8ea;padding:5px 8px;border-radius:7px;white-space:nowrap}
#themepick a:hover{background:rgba(255,255,255,.08)}
#themepick a[aria-current="true"]{background:rgba(255,255,255,.14);font-weight:600}
#themepick i{width:22px;height:12px;border-radius:3px;display:block;flex:0 0 auto}

/* ============================================================
   BUTTON COLOUR / GRADIENT EXPLORATION (?btn=<name>).
   Shape and typography stay exactly as-is; only the fill changes.
   ============================================================ */

/* C1 diagonal: light falls in from the top-left, runs to dark chocolate */
html[data-btn="diagonal"] .btn-gold{
  background:linear-gradient(135deg,#A9743A 0%,#7A4F23 45%,#4A2C12 100%) padding-box,
             linear-gradient(135deg,rgba(255,226,186,.35) 0%,rgba(255,226,186,.08) 45%,rgba(0,0,0,.35) 100%) border-box;
}

/* C2 glow: near-black bronze fill, the colour lives in a soft copper halo */
html[data-btn="glow"] .btn-gold{
  background:linear-gradient(180deg,#3E2510 0%,#2A1809 100%) padding-box,
             linear-gradient(180deg,rgba(224,165,109,.5) 0%,rgba(143,90,46,.25) 50%,rgba(0,0,0,.4) 100%) border-box;
  color:#EFCB9C;
  box-shadow:0 0 44px rgba(192,129,72,.28),0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,240,214,.10);
}

/* C3 lit: radial light source top-centre, like a lamp above the button */
html[data-btn="lit"] .btn-gold{
  background:radial-gradient(130% 160% at 50% -20%,#A9743A 0%,#6B4520 52%,#3A230F 100%) padding-box,
             linear-gradient(180deg,rgba(255,226,186,.32) 0%,rgba(255,226,186,.08) 45%,rgba(0,0,0,.36) 100%) border-box;
}

/* C4 molten: the current ramp, but wider - richer copper up top, deeper base */
html[data-btn="molten"] .btn-gold{
  background:linear-gradient(180deg,#A9743A 0%,#7E5527 30%,#4E3014 78%,#331E0C 100%) padding-box,
             linear-gradient(180deg,rgba(255,226,186,.34) 0%,rgba(255,226,186,.08) 42%,rgba(0,0,0,.36) 100%) border-box;
}