/* ---------- edition themes ----------
   Every colour on the page comes from these tokens. The theme sits on <html data-theme>:
   landing (before a source is chosen), x, ss (Substack), yt (YouTube), li (LinkedIn), all.
   Tokens are registered so a theme change cross-fades instead of snapping. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #f8f9fd; }
@property --bg-deep { syntax: '<color>'; inherits: true; initial-value: #e3eaf4; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.75); }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #0c1b2e; }
@property --mid { syntax: '<color>'; inherits: true; initial-value: #536379; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(12,27,46,.14); }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #da423f; }
@property --btn { syntax: '<color>'; inherits: true; initial-value: #da423f; }
@property --btn-ink { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --btn-hover { syntax: '<color>'; inherits: true; initial-value: #0c1b2e; }
@property --panel-a { syntax: '<color>'; inherits: true; initial-value: #4e94d0; }
@property --panel-b { syntax: '<color>'; inherits: true; initial-value: #a8cdec; }
@property --sign { syntax: '<color>'; inherits: true; initial-value: #da423f; }
@property --hint { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.92); }
@property --cv-bg { syntax: '<color>'; inherits: true; initial-value: #fbe9dc; }
@property --cv-title { syntax: '<color>'; inherits: true; initial-value: #3b3a14; }
@property --cv-accent { syntax: '<color>'; inherits: true; initial-value: #ff2fa8; }
@property --cv-ink { syntax: '<color>'; inherits: true; initial-value: #1b1511; }
@property --cv-mid { syntax: '<color>'; inherits: true; initial-value: #5d5045; }
@property --rim { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0); }

:root {
  /* the X Marks The Spot cover, used on the landing preview and the X edition */
  --cv-bg: #fbe9dc; --cv-title: #3b3a14; --cv-accent: #ff2fa8; --cv-ink: #1b1511; --cv-mid: #5d5045;
  transition: --bg .8s, --bg-deep .8s, --surface .8s, --ink .8s, --mid .8s, --line .8s, --accent .8s, --btn .8s,
    --btn-ink .8s, --btn-hover .8s, --panel-a .8s, --panel-b .8s, --sign .8s, --hint .8s,
    --cv-bg .8s, --cv-title .8s, --cv-accent .8s, --cv-ink .8s, --cv-mid .8s, --rim .8s;
  transition-timing-function: cubic-bezier(.65, .05, .25, 1);
}
/* Landing: sky blue, cloud white, scarlet red */
:root, :root[data-theme="landing"] {
  --bg: #f8f9fd; --bg-deep: #e3eaf4; --surface: rgba(255,255,255,.8); --ink: #0c1b2e; --mid: #536379; --line: rgba(12,27,46,.14);
  --accent: #da423f; --btn: #da423f; --btn-ink: #ffffff; --btn-hover: #0c1b2e;
  --panel-a: #3f86c9; --panel-b: #a8cdec; --sign: #da423f; --hint: rgba(255,255,255,.94); --rim: rgba(255,255,255,0);
}
/* X Marks The Spot: mocha, sand, khaki, signature pink */
:root[data-theme="x"] {
  --bg: #f2ece0; --bg-deep: #e7dfcf; --surface: rgba(255,255,255,.55); --ink: #1b1511; --mid: #5d5045; --line: rgba(27,21,17,.14);
  --accent: #3b3a14; --btn: #3b3a14; --btn-ink: #f2ece0; --btn-hover: #1b1511;
  --panel-a: #3e3a28; --panel-b: #312e1f; --sign: #ff2fa8; --hint: rgba(242,236,224,.72); --rim: rgba(255,47,168,0);
}
/* FullStack (Substack): galaxy black, steel grey, sunrise orange */
:root[data-theme="ss"] {
  --bg: #d5d6da; --bg-deep: #c2c3c8; --surface: rgba(255,255,255,.5); --ink: #0b0a0d; --mid: #4a4b53; --line: rgba(11,10,13,.16);
  --accent: #e85a24; --btn: #e85a24; --btn-ink: #ffffff; --btn-hover: #0b0a0d;
  --panel-a: #1b181d; --panel-b: #050407; --sign: #e85a24; --hint: rgba(205,206,211,.78); --rim: #ff6a2e;
  --cv-bg: #cdced3; --cv-title: #0b0a0d; --cv-accent: #e85a24; --cv-ink: #0b0a0d; --cv-mid: #4a4b53;
}
/* You Read (YouTube): raven black, powder blue, poppy red */
:root[data-theme="yt"] {
  --bg: #d4e7f5; --bg-deep: #bdd6e9; --surface: rgba(255,255,255,.55); --ink: #0f0f10; --mid: #43505b; --line: rgba(15,15,16,.15);
  --accent: #d32f2f; --btn: #d32f2f; --btn-ink: #ffffff; --btn-hover: #0f0f10;
  --panel-a: #1d1c1c; --panel-b: #060606; --sign: #d32f2f; --hint: rgba(190,222,243,.82); --rim: #ff3b3b;
  --cv-bg: #cfe5f5; --cv-title: #0f0f10; --cv-accent: #d32f2f; --cv-ink: #0f0f10; --cv-mid: #43505b;
}
/* Dialled In (LinkedIn): ocean blue, midnight blue, acid yellow */
:root[data-theme="li"] {
  --bg: #e4eef9; --bg-deep: #cfdff1; --surface: rgba(255,255,255,.7); --ink: #030279; --mid: #45558a; --line: rgba(3,2,121,.14);
  --accent: #387bc1; --btn: #e3f35d; --btn-ink: #030279; --btn-hover: #d2e43f;
  --panel-a: #3a7fd0; --panel-b: #04037a; --sign: #e3f35d; --hint: rgba(255,255,255,.86); --rim: #e3f35d;
  --cv-bg: #cfe0f3; --cv-title: #030279; --cv-accent: #387bc1;
}
/* On a Mission (all sources): flamingo pink, plum pink, electric blue */
:root[data-theme="all"] {
  --bg: #f8eaf1; --bg-deep: #efd2e1; --surface: rgba(255,255,255,.6); --ink: #2b0f21; --mid: #6c4560; --line: rgba(43,15,33,.13);
  --accent: #1d49f4; --btn: #1d49f4; --btn-ink: #ffffff; --btn-hover: #2b0f21;
  --panel-a: #f3d2e3; --panel-b: #d08fb4; --sign: #1d49f4; --hint: rgba(255,255,255,.95); --rim: #2f5bff;
  --cv-bg: #e4bdd2; --cv-title: #8e3f70; --cv-accent: #1d49f4;
}