/* Themes. Each theme sets the same base colours for light and dark; game.css derives the rest.
   The page sets data-theme and data-mode on <html>. Adding a theme means adding its two blocks
   here, its id to THEMES in js/app.js and a "theme.<id>" name in every locale file. */

:root {
  --d1:#FF6B5B; --d2:#FF9F1C; --d3:#FFC93C; --d4:#8BD448; --d5:#2EC4A6; --d6:#3BA7F0; --d7:#6C63FF; --d8:#B05CE6; --d9:#F25C9A;
  --pattern:none; color-scheme:light;
}
[data-mode="dark"] { color-scheme:dark; }

/* Nineling: deep plum and gold, the brand colours. */
[data-theme="nineling"] {
  --bg1:#F7F4FB; --bg2:#EEE7F8; --card:#FFFFFF; --cell:#FFFFFF; --ink:#2B1846; --muted:#6B5B85; --line:#E4DCEF;
  --grid:#E4DCEF; --grid-strong:#2B1846; --given:#2B1846; --typed:#5B3FD0; --accent:#6C4FD8; --accent-ink:#5236BE; --on-accent:#FFFFFF;
  --gold:#FFB82E; --bad:#B8322A; --good:#1C6E5C; --info:#1F66A6; --strong:#2B1846; --on-strong:#FFFFFF;
}
[data-theme="nineling"][data-mode="dark"] {
  --bg1:#150D22; --bg2:#1C122C; --card:#20152F; --cell:#20152F; --ink:#F2ECFA; --muted:#B3A6C7; --line:#33264A;
  --grid:#33264A; --grid-strong:#8C7BC4; --given:#F2ECFA; --typed:#BDB2FF; --accent:#A99BFF; --accent-ink:#C6BDFF; --on-accent:#150D22;
  --gold:#FFC24D; --bad:#FF8A7D; --good:#5BD6BA; --info:#7DBDFF; --strong:#FFC24D; --on-strong:#150D22;
}

/* Warm paper: cream and terracotta, the original look. */
[data-theme="paper"] {
  --bg1:#F8F2E7; --bg2:#EFE3D1; --card:#FFFAF3; --cell:#FFFDF9; --ink:#2B241C; --muted:#6B5E4F; --line:#E4D7C4;
  --grid:#EFE4D4; --grid-strong:#6E5B47; --given:#2F281F; --typed:#7A4A2C; --accent:#A8522F; --accent-ink:#97482A; --on-accent:#FFFFFF;
  --gold:#E8B45A; --bad:#A8332B; --good:#4E5A36; --info:#245F9E; --strong:#2B241C; --on-strong:#FFFAF3;
}
[data-theme="paper"][data-mode="dark"] {
  --bg1:#1D1812; --bg2:#241D15; --card:#2A2219; --cell:#2C241B; --ink:#F3EADB; --muted:#C2B4A0; --line:#3E3326;
  --grid:#3A3024; --grid-strong:#C9A27E; --given:#F3EADB; --typed:#F2BC99; --accent:#E8936B; --accent-ink:#F2AE8B; --on-accent:#1D1812;
  --gold:#E8B45A; --bad:#FF907F; --good:#BCD08F; --info:#8CBDF2; --strong:#E8B45A; --on-strong:#1D1812;
}

/* Mashrabiya: teal and brass over a faint eight-point star lattice. */
[data-theme="mashrabiya"] {
  --bg1:#F3EEE2; --bg2:#E9E1CF; --card:#FFFCF5; --cell:#FFFDF8; --ink:#10302C; --muted:#4A5F5B; --line:#DCD3BF;
  --grid:#E6DECB; --grid-strong:#0F4F48; --given:#10302C; --typed:#0D6359; --accent:#0F6B62; --accent-ink:#0B564F; --on-accent:#FFFFFF;
  --gold:#D9A441; --bad:#A83529; --good:#3B6327; --info:#215C9A; --strong:#10302C; --on-strong:#F7F1E3;
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%230F6B62' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M28 6l6 16 16 6-16 6-6 16-6-16-16-6 16-6z'/%3E%3Cpath d='M12 12h32v32H12z' transform='rotate(45 28 28)'/%3E%3Cpath d='M12 12h32v32H12z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="mashrabiya"][data-mode="dark"] {
  --bg1:#0C1A19; --bg2:#102423; --card:#132A28; --cell:#142C2A; --ink:#EFE7D3; --muted:#A9BDB8; --line:#24423F;
  --grid:#21403D; --grid-strong:#D9A441; --given:#EFE7D3; --typed:#86DCCE; --accent:#4FC1B0; --accent-ink:#86DCCE; --on-accent:#0C1A19;
  --gold:#E2B65A; --bad:#FF8F80; --good:#A3D683; --info:#86BEFF; --strong:#E2B65A; --on-strong:#0C1A19;
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23D9A441' stroke-opacity='.08' stroke-width='1.2'%3E%3Cpath d='M28 6l6 16 16 6-16 6-6 16-6-16-16-6 16-6z'/%3E%3Cpath d='M12 12h32v32H12z' transform='rotate(45 28 28)'/%3E%3Cpath d='M12 12h32v32H12z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Simple: neutral greys with one blue accent. */
[data-theme="simple"] {
  --bg1:#FAFAFA; --bg2:#F2F2F2; --card:#FFFFFF; --cell:#FFFFFF; --ink:#1A1A1A; --muted:#575757; --line:#E2E2E2;
  --grid:#E3E3E3; --grid-strong:#333333; --given:#1A1A1A; --typed:#1D4ED8; --accent:#2563EB; --accent-ink:#1D4ED8; --on-accent:#FFFFFF;
  --gold:#FACC15; --bad:#B91C1C; --good:#166534; --info:#0B5F8F; --strong:#1A1A1A; --on-strong:#FFFFFF;
}
[data-theme="simple"][data-mode="dark"] {
  --bg1:#121212; --bg2:#181818; --card:#1E1E1E; --cell:#1E1E1E; --ink:#EDEDED; --muted:#A8A8A8; --line:#2E2E2E;
  --grid:#2C2C2C; --grid-strong:#BDBDBD; --given:#EDEDED; --typed:#93BBFF; --accent:#8AB4FF; --accent-ink:#A8C7FF; --on-accent:#121212;
  --gold:#FACC15; --bad:#FF8F8F; --good:#86EFAC; --info:#7DD3FC; --strong:#EDEDED; --on-strong:#121212;
}

/* High contrast: black and white, with blue (light) or yellow (dark) for what you typed. */
[data-theme="contrast"] {
  --bg1:#FFFFFF; --bg2:#FFFFFF; --card:#FFFFFF; --cell:#FFFFFF; --ink:#000000; --muted:#1F1F1F; --line:#000000;
  --grid:#6B6B6B; --grid-strong:#000000; --given:#000000; --typed:#0030BF; --accent:#0030BF; --accent-ink:#0030BF; --on-accent:#FFFFFF;
  --gold:#FFD400; --bad:#A80000; --good:#004F00; --info:#0030BF; --strong:#000000; --on-strong:#FFFFFF;
}
[data-theme="contrast"][data-mode="dark"] {
  --bg1:#000000; --bg2:#000000; --card:#000000; --cell:#000000; --ink:#FFFFFF; --muted:#E6E6E6; --line:#FFFFFF;
  --grid:#9A9A9A; --grid-strong:#FFFFFF; --given:#FFFFFF; --typed:#FFE14D; --accent:#FFE14D; --accent-ink:#FFE14D; --on-accent:#000000;
  --gold:#FFE14D; --bad:#FF7A7A; --good:#7CFF7C; --info:#7CC8FF; --strong:#FFE14D; --on-strong:#000000;
}