/* =====================================================================
   The three themes from Louise's mockup (My Drive\Website\site\index.html, "Brand colours").
   Brand colours (from the Rhyder Clash logo): grey #4A4A4A · flame orange #F2821F · water blue #1499DC
   The layout sets <body class="site" data-theme="light|dark|bold"> from the settings (Docs/04-design-and-themes.md).
   site.css only ever uses these tokens, so a theme is changed here and nowhere else.
   ===================================================================== */

/* ---------- A · Brand light (the default) ---------- */
.site[data-theme="light"]{
  --bg:#FFFFFF; --alt:#F4F8FB; --card:#FFFFFF; --ink:#2E3033; --muted:#55585C; --soft:#E7F3FB;
  --brand:#3F4042; --flame:#F2821F; --water:#1499DC;
  --accent:#F2821F; --on-accent:#1E1F21; --link:#0A6FA8;
  --band:#3F4042; --on-band:#FFFFFF; --band-muted:#D3D5D8; --foot:#2E3033;
  --line:#E1E6EA; --ph1:#E3ECF2; --ph2:#EFF4F8;
  --hero-bg:#EEF7FC; --hero-ink:#3F4042; --hero-muted:#45484C; --eyebrow:#0A6FA8; --hero-ph1:#D6E8F3; --hero-ph2:#E6F1F8;
  --cta-bg:#1499DC; --cta-ink:#08263A;
  --font-head:'Archivo',sans-serif; --head-stretch:112%; --font-body:'Public Sans',system-ui,sans-serif;
  --head-weight:800; --head-case:none; --head-track:-0.01em;
  --radius:8px; --radius-lg:14px; --btn-radius:6px; --pill:999px;
}

/* ---------- B · Brand dark ---------- */
.site[data-theme="dark"]{
  --bg:#1A1C1E; --alt:#212427; --card:#26292D; --ink:#ECEDEE; --muted:#B4B9BE; --soft:#2F3337;
  --brand:#FFFFFF; --flame:#F2821F; --water:#1499DC;
  --accent:#F2821F; --on-accent:#141516; --link:#6CC6F2;
  --band:#26292D; --on-band:#FFFFFF; --band-muted:#B4B9BE; --foot:#111213;
  --line:#33373C; --ph1:#25292D; --ph2:#1E2124;
  --hero-bg:#1A1C1E; --hero-ink:#FFFFFF; --hero-muted:#B4B9BE; --eyebrow:#F59A4A; --hero-ph1:#25292D; --hero-ph2:#1E2124;
  --cta-bg:#F2821F; --cta-ink:#141516;
  --font-head:'Space Grotesk',sans-serif; --head-stretch:100%; --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --head-weight:600; --head-case:none; --head-track:-0.03em;
  --radius:3px; --radius-lg:4px; --btn-radius:3px; --pill:3px;
}

/* ---------- C · Bold blue ---------- */
.site[data-theme="bold"]{
  --bg:#FFFFFF; --alt:#EEF6FB; --card:#FFFFFF; --ink:#26282B; --muted:#4F5357; --soft:#E2F1FA;
  --brand:#0B5E8E; --flame:#F2821F; --water:#1499DC;
  --accent:#F2821F; --on-accent:#1E1F21; --link:#0B5E8E;
  --band:#F2821F; --on-band:#1E1F21; --band-muted:#3B2408; --foot:#0B3F5F;
  --line:#D6E6F0; --ph1:#DCEBF5; --ph2:#EAF3F9;
  --hero-bg:#0B5E8E; --hero-ink:#FFFFFF; --hero-muted:#DCEFFA; --eyebrow:#FFB877; --hero-ph1:rgba(255,255,255,.14); --hero-ph2:rgba(255,255,255,.06);
  --cta-bg:#0B5E8E; --cta-ink:#FFFFFF;
  --font-head:'Archivo',sans-serif; --head-stretch:125%; --font-body:'Figtree',system-ui,sans-serif;
  --head-weight:900; --head-case:uppercase; --head-track:0;
  --radius:18px; --radius-lg:28px; --btn-radius:999px; --pill:999px;
}

/* ---------- Air conditioning (the sub-brand's colours, in every theme) ---------- */
.site{--ac-bg:#E9F6FD;--ac-ink:#0B4F78;--ac-line:#C7E5F6}
.site[data-theme="dark"]{--ac-bg:#14232C;--ac-ink:#9FD8F5;--ac-line:#22394A}

/* ---------- Things a theme changes beyond its tokens (from the mockup) ---------- */
.site[data-theme="bold"] h1{font-size:50px}
.site[data-theme="bold"] h2{font-size:34px}
.site[data-theme="bold"] h3{font-size:19px;letter-spacing:0.01em}
.site[data-theme="dark"] .logo .lg-light{display:none}
.site[data-theme="dark"] .logo .lg-dark{display:block}
.site[data-theme="dark"] .topstrip{background:#111213}
.site[data-theme="bold"] .topstrip{background:#0B3F5F;color:#CFE6F4}
.site[data-theme="bold"] .curl{display:block;position:absolute;right:-120px;top:-80px;width:620px;height:620px;opacity:.9;pointer-events:none}
.site[data-theme="dark"] .curl{display:block;position:absolute;right:-160px;top:-40px;width:520px;height:520px;opacity:.18;pointer-events:none}
.site[data-theme="bold"] .cred::before{background:#1E1F21}
.site[data-theme="dark"] .card::after{height:2px}
.site[data-theme="dark"] .logos{background:#F1F2F3;border-color:#F1F2F3}
.site[data-theme="bold"] .cta .btn{background:var(--flame);border-color:var(--flame);color:#1E1F21}
.site[data-theme="bold"] .callcard{background:var(--brand);color:#fff}
.site[data-theme="bold"] .field input,.site[data-theme="bold"] .field select,.site[data-theme="bold"] .field textarea{border-radius:12px}

@media (max-width:640px){
  .site[data-theme="bold"] h1{font-size:36px}
  .site[data-theme="bold"] h2{font-size:28px}
  .site[data-theme="bold"] .curl,.site[data-theme="dark"] .curl{display:none}
}