/* =========================================================================
   CodedMD — BRAND PERSONALITIES
   Each data-theme is a totally different identity: colour, type, shape, shadow,
   texture, mood. Default (no attribute / "retro") uses :root in styles.css.
   Theme selectors are prefixed html[data-theme=…] so they win over page <style>.
   ========================================================================= */

/* ===========================================================
   1 · RETRO PAPER  (default / :root) — warm, playful, sticker shadows
   =========================================================== */
html[data-theme="retro"]{ /* explicit so switching back is clean */
  --paper:#FBF6EC; --paper-deep:#F2E9D9; --paper-card:#FFFFFF;
  --ink:#211E1A; --ink-soft:#6A6258; --ink-faint:#9b9489;
  --coral:#F4502A; --coral-deep:#D63E1C; --teal:#15876A; --gold:#F4B82B; --sky:#4C74E8; --lilac:#8E7BE8;
  --line:rgba(33,30,26,.14);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --title-weight:640; --title-tracking:-.02em;
  --r:18px; --r-lg:30px; --r-pill:999px;
}

/* ===========================================================
   2 · CLINICAL  — crisp, precise, medical-trust. Soft shadows, hairlines.
   =========================================================== */
html[data-theme="clinical"]{
  --paper:#F2F6F8; --paper-deep:#E6EEF2; --paper-card:#FFFFFF;
  --ink:#13242D; --ink-soft:#54666F; --ink-faint:#90A1AA;
  --coral:#0E8C7F; --coral-deep:#0B6E63; --teal:#0E8C7F; --gold:#CF9426; --sky:#2C68D8; --lilac:#6E79DF;
  --line:rgba(19,36,45,.12);
  --display:'Schibsted Grotesk',system-ui,sans-serif;
  --body:'Schibsted Grotesk',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --title-weight:600; --title-tracking:-.02em;
  --r:12px; --r-lg:18px; --r-pill:999px;
}
html[data-theme="clinical"] body::before{display:none}
html[data-theme="clinical"] .serif{font-style:italic;font-weight:480}
html[data-theme="clinical"] .nav.scrolled{background:rgba(242,246,248,.86)}
html[data-theme="clinical"] .btn{border-width:1.5px;box-shadow:0 10px 22px -12px rgba(19,36,45,.45)}
html[data-theme="clinical"] .btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(19,36,45,.45)}
html[data-theme="clinical"] .btn:active{transform:translateY(0);box-shadow:0 6px 14px -10px rgba(19,36,45,.4)}
html[data-theme="clinical"] .btn-coral{box-shadow:0 12px 26px -12px rgba(14,140,127,.55)}
html[data-theme="clinical"] .btn-coral:hover{box-shadow:0 18px 34px -12px rgba(14,140,127,.6)}
html[data-theme="clinical"] .btn-ghost{box-shadow:none;border-color:var(--line)}
html[data-theme="clinical"] .btn-ghost:hover{background:var(--paper-card);box-shadow:0 10px 22px -14px rgba(19,36,45,.4)}
html[data-theme="clinical"] .btn-sm{box-shadow:0 8px 18px -12px rgba(19,36,45,.45)}
html[data-theme="clinical"] .card.sticker,
html[data-theme="clinical"] .stk,
html[data-theme="clinical"] .visual,
html[data-theme="clinical"] .mock,
html[data-theme="clinical"] .book,
html[data-theme="clinical"] .float-chip{border-color:var(--line);border-width:1px;box-shadow:0 18px 40px -24px rgba(19,36,45,.4)}
html[data-theme="clinical"] .card.sticker.hover-pop:hover,
html[data-theme="clinical"] .card.hover-pop:hover{box-shadow:0 26px 50px -26px rgba(19,36,45,.45);transform:translateY(-6px)}

/* ===========================================================
   3 · BOLD  — brutalist. Electric blue + black, sharp, thick borders, loud.
   =========================================================== */
html[data-theme="bold"]{
  --paper:#F1F0EA; --paper-deep:#E3E1D7; --paper-card:#FFFFFF;
  --ink:#0B0B0B; --ink-soft:#363636; --ink-faint:#707070;
  --coral:#2B44FF; --coral-deep:#0A22CC; --teal:#0BA37F; --gold:#FFD400; --sky:#2B44FF; --lilac:#B026FF;
  --line:rgba(11,11,11,.9);
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;
  --serif:'Space Grotesk',system-ui,sans-serif;
  --title-weight:700; --title-tracking:-.04em;
  --r:0px; --r-lg:0px; --r-pill:3px;
}
html[data-theme="bold"] body::before{display:none}
html[data-theme="bold"] .serif{font-style:normal;font-weight:700}
html[data-theme="bold"] h1,html[data-theme="bold"] .h2,html[data-theme="bold"] .display{text-transform:uppercase;letter-spacing:-.025em}
html[data-theme="bold"] .kicker{font-family:'Space Mono',monospace;font-weight:700;letter-spacing:.08em}
html[data-theme="bold"] .work-num,
html[data-theme="bold"] .tno,
html[data-theme="bold"] .cat,
html[data-theme="bold"] .read{font-family:'Space Mono',monospace}
html[data-theme="bold"] .nav.scrolled{background:rgba(241,240,234,.9);border-bottom-width:2px;border-color:var(--ink)}
html[data-theme="bold"] .mark::before{border-radius:0;transform:none;height:.4em;bottom:.05em}
html[data-theme="bold"] .btn{border-width:2.5px;border-radius:3px;box-shadow:5px 5px 0 var(--ink)}
html[data-theme="bold"] .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
html[data-theme="bold"] .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
html[data-theme="bold"] .btn-coral{border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
html[data-theme="bold"] .btn-coral:hover{box-shadow:7px 7px 0 var(--ink)}
html[data-theme="bold"] .btn-coral:active{box-shadow:0 0 0 var(--ink)}
html[data-theme="bold"] .btn-ghost{box-shadow:5px 5px 0 var(--ink)}
html[data-theme="bold"] .btn-sm{box-shadow:4px 4px 0 var(--ink)}
html[data-theme="bold"] .btn-sm:hover{box-shadow:6px 6px 0 var(--ink)}
html[data-theme="bold"] .card,
html[data-theme="bold"] .news,
html[data-theme="bold"] .statement,
html[data-theme="bold"] .community,
html[data-theme="bold"] .why,
html[data-theme="bold"] section[style*="border-radius"]{border-radius:0 !important}
html[data-theme="bold"] .card.sticker,
html[data-theme="bold"] .stk,
html[data-theme="bold"] .visual,
html[data-theme="bold"] .mock,
html[data-theme="bold"] .book,
html[data-theme="bold"] .float-chip{border-color:var(--ink);border-width:2.5px;border-radius:0;box-shadow:7px 8px 0 var(--ink)}
html[data-theme="bold"] .card.sticker.hover-pop:hover,
html[data-theme="bold"] .card.hover-pop:hover{box-shadow:10px 12px 0 var(--ink);transform:translate(-3px,-4px)}
html[data-theme="bold"] .chip{border-width:2px;border-color:var(--ink);border-radius:3px;font-weight:700}
html[data-theme="bold"] .mini-book,
html[data-theme="bold"] .book{border-radius:0}

/* ===========================================================
   4 · CALM  — soft editorial. Clay + sage, Fraunces serif, airy, borderless.
   =========================================================== */
html[data-theme="calm"]{
  --paper:#F4F1EA; --paper-deep:#EAE5DA; --paper-card:#FFFFFF;
  --ink:#332F2A; --ink-soft:#6F685E; --ink-faint:#A9A39A;
  --coral:#B0735A; --coral-deep:#925B45; --teal:#7E9B79; --gold:#C7A24C; --sky:#8B97B8; --lilac:#9D8FB6;
  --line:rgba(51,47,42,.1);
  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --title-weight:430; --title-tracking:-.005em;
  --r:22px; --r-lg:32px; --r-pill:999px;
}
html[data-theme="calm"] body::before{opacity:.28}
html[data-theme="calm"] .serif{font-style:italic;font-weight:430}
html[data-theme="calm"] .nav.scrolled{background:rgba(244,241,234,.84)}
html[data-theme="calm"] .btn{border-width:1.5px;box-shadow:0 14px 30px -16px rgba(51,47,42,.4)}
html[data-theme="calm"] .btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(51,47,42,.42)}
html[data-theme="calm"] .btn:active{transform:translateY(0)}
html[data-theme="calm"] .btn-coral{box-shadow:0 14px 30px -16px rgba(176,115,90,.5)}
html[data-theme="calm"] .btn-coral:hover{box-shadow:0 20px 38px -16px rgba(176,115,90,.55)}
html[data-theme="calm"] .btn-ghost{box-shadow:none;border-color:var(--line)}
html[data-theme="calm"] .btn-ghost:hover{background:var(--paper-card);box-shadow:0 12px 26px -16px rgba(51,47,42,.4)}
html[data-theme="calm"] .btn-sm{box-shadow:0 10px 22px -14px rgba(51,47,42,.4)}
html[data-theme="calm"] .card.sticker,
html[data-theme="calm"] .stk,
html[data-theme="calm"] .visual,
html[data-theme="calm"] .mock,
html[data-theme="calm"] .book,
html[data-theme="calm"] .float-chip{border-color:var(--line);border-width:1px;box-shadow:0 24px 54px -30px rgba(51,47,42,.38)}
html[data-theme="calm"] .card.sticker.hover-pop:hover,
html[data-theme="calm"] .card.hover-pop:hover{box-shadow:0 32px 60px -30px rgba(51,47,42,.42);transform:translateY(-6px)}

/* ===========================================================
   5 · MIDNIGHT  — dark lab/tech. Emerald glow, Space Grotesk, hairline borders.
   =========================================================== */
html[data-theme="midnight"]{
  --paper:#0F1318; --paper-deep:#161C24; --paper-card:#191F28;
  --ink:#E7ECF3; --ink-soft:#9AA6B2; --ink-faint:#5C6772;
  --coral:#10B981; --coral-deep:#0C9268; --teal:#10B981; --gold:#F5C451; --sky:#5AA2FF; --lilac:#A98BFA;
  --line:rgba(255,255,255,.12);
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --title-weight:560; --title-tracking:-.03em;
  --r:14px; --r-lg:22px; --r-pill:999px;
}
html[data-theme="midnight"] body::before{display:none}
html[data-theme="midnight"] .nav.scrolled{background:rgba(15,19,24,.82);border-color:var(--line)}
html[data-theme="midnight"] .btn{border-color:var(--line);box-shadow:0 14px 30px -16px rgba(0,0,0,.7)}
html[data-theme="midnight"] .btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(0,0,0,.75)}
html[data-theme="midnight"] .btn:active{transform:translateY(0)}
html[data-theme="midnight"] .btn-coral{border-color:transparent;box-shadow:0 14px 32px -12px rgba(16,185,129,.5)}
html[data-theme="midnight"] .btn-coral:hover{box-shadow:0 20px 40px -12px rgba(16,185,129,.6)}
html[data-theme="midnight"] .btn-ghost{color:var(--ink);border-color:var(--line);box-shadow:none}
html[data-theme="midnight"] .btn-ghost:hover{background:var(--paper-card)}
html[data-theme="midnight"] .btn-sm{box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}
html[data-theme="midnight"] .card.sticker,
html[data-theme="midnight"] .visual,
html[data-theme="midnight"] .mock,
html[data-theme="midnight"] .book{border-color:var(--line);border-width:1px;box-shadow:0 24px 50px -28px rgba(0,0,0,.85)}
html[data-theme="midnight"] .card.sticker.hover-pop:hover,
html[data-theme="midnight"] .card.hover-pop:hover{box-shadow:0 32px 60px -28px rgba(0,0,0,.9);transform:translateY(-6px)}
/* keep the floating "screenshot" mockups bright on the dark page → force dark text */
html[data-theme="midnight"] .stk,
html[data-theme="midnight"] .float-chip{color:#16202A;border-color:rgba(0,0,0,.12)}
html[data-theme="midnight"] .stk .muted,
html[data-theme="midnight"] .stk .faint{color:#5a6b78}
html[data-theme="midnight"] .stk{box-shadow:0 24px 50px -26px rgba(0,0,0,.9)}
/* dark surfaces for the big inverted blocks (inner copy is already light) */
html[data-theme="midnight"] .statement,
html[data-theme="midnight"] .why,
html[data-theme="midnight"] .community{background:#161C24}
html[data-theme="midnight"] .foot{background:#0A0D12;color:var(--ink)}
html[data-theme="midnight"] .foot a{color:var(--ink)}
html[data-theme="midnight"] .foot-bottom{border-color:var(--line)}
html[data-theme="midnight"] .giant-word{color:rgba(255,255,255,.05)}
html[data-theme="midnight"] ::selection{background:var(--coral);color:#04140d}

/* =========================================================================
   FONT COMBINATIONS  (independent of brand — swaps the TYPEFACES only)
   data-fontset overrides the brand's families but keeps its weight/tracking.
   Placed after the brand blocks so it wins the cascade. "auto" = brand default.
   ========================================================================= */
html[data-fontset="grotesque"]{
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}
html[data-fontset="geometric"]{
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}
html[data-fontset="humanist"]{
  --display:'Schibsted Grotesk',system-ui,sans-serif;
  --body:'Schibsted Grotesk',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
}
html[data-fontset="editorial"]{
  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
}
html[data-fontset="slab"]{
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Schibsted Grotesk',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}
/* serif accent stays italic regardless of which family is mapped to --serif */
html[data-fontset="humanist"] .serif,
html[data-fontset="editorial"] .serif{font-style:italic;font-weight:440}