/* MWT Picks site colours. Every colour on the site comes from these variables.
   Pick a direction with data-theme on <html>: "pitch" (default), "midnight" or "navy".
   Preview any page with ?theme=midnight (see theme.js). */
:root,
:root[data-theme="pitch"] {
  --bg: #102A19;              /* page background */
  --bg-grad-a: #173A23;       /* hero gradient start */
  --bg-grad-b: #2E6B3F;       /* hero gradient end */
  --surface: #1B4029;         /* panels, FAQ, form */
  --surface-2: #224D32;       /* raised rows */
  --border: rgba(241, 239, 232, 0.14);
  --border-strong: rgba(241, 239, 232, 0.28);
  --text: #F1EFE8;
  --text-2: #D3DACF;
  --text-muted: #A9B8A6;
  --accent: #97C459;          /* main button and wins only */
  --accent-hover: #A9D36C;
  --on-accent: #141413;
  --link: #E4F0D2;
  --focus: #F1EFE8;
  --danger: #F4A7A0;
  --success: #97C459;
  /* the match screen and card inside the demo */
  --screen: #0E2215;
  --screen-pitch-a: #2A6038;
  --screen-pitch-b: #23552F;
  --screen-line: rgba(241, 239, 232, 0.35);
  --card-bg: #141413;
  --card-border: #3A3A37;
  --card-border-strong: #55544F;
  --card-text: #F1EFE8;
  --card-text-2: #B4B2A9;
  --card-muted: #888780;
  --card-link: #CFE7AE;
  --card-picked: rgba(151, 196, 89, 0.16);
  --live-bg: #3D1717;
  --live-text: #F09595;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

:root[data-theme="midnight"] {
  --bg: #0B0E14;
  --bg-grad-a: #0B0E14;
  --bg-grad-b: #141922;
  --surface: #141922;
  --surface-2: #1A2030;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #FFFFFF;
  --text-2: #B7C0CE;
  --text-muted: #8B95A5;
  --accent: #B6F23A;
  --accent-hover: #C6F865;
  --on-accent: #0B0E14;
  --link: #D4F78F;
  --focus: #B6F23A;
  --danger: #FF8A80;
  --success: #B6F23A;
  --screen: #07090D;
  --screen-pitch-a: #1A3A26;
  --screen-pitch-b: #15301F;
  --screen-line: rgba(255, 255, 255, 0.28);
  --card-bg: #141922;
  --card-border: #2A3242;
  --card-border-strong: #3A4458;
  --card-text: #FFFFFF;
  --card-text-2: #B7C0CE;
  --card-muted: #8B95A5;
  --card-link: #D4F78F;
  --card-picked: rgba(182, 242, 58, 0.14);
  --live-bg: #3A1218;
  --live-text: #FF8A80;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* Neutral (the founder's choice): near-black and grey with a white main button; green only for wins.
   The only brand colour is the app icon. */
:root[data-theme="mono"] {
  --bg: #0E0E10;
  --bg-grad-a: #0E0E10;
  --bg-grad-b: #18181B;
  --surface: #18181B;
  --surface-2: #202024;
  --border: rgba(244, 244, 245, 0.09);
  --border-strong: rgba(244, 244, 245, 0.2);
  --text: #F4F4F5;
  --text-2: #D4D4D8;
  --text-muted: #A1A1AA;
  --accent: #F4F4F5;
  --accent-hover: #FFFFFF;
  --on-accent: #0E0E10;
  --link: #F4F4F5;
  --focus: #F4F4F5;
  --danger: #FCA5A5;
  --success: #4ADE80;
  --screen: #09090B;
  --screen-pitch-a: #1A3A26;
  --screen-pitch-b: #15301F;
  --screen-line: rgba(255, 255, 255, 0.28);
  --card-bg: #18181B;
  --card-border: #2C2C30;
  --card-border-strong: #3F3F46;
  --card-text: #F4F4F5;
  --card-text-2: #D4D4D8;
  --card-muted: #A1A1AA;
  --card-link: #F4F4F5;
  --card-picked: rgba(244, 244, 245, 0.1);
  --live-bg: #3B1A1A;
  --live-text: #FCA5A5;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

:root[data-theme="navy"] {
  --bg: #0A1A33;
  --bg-grad-a: #0A1A33;
  --bg-grad-b: #10264A;
  --surface: #10264A;
  --surface-2: #163159;
  --border: rgba(226, 236, 255, 0.12);
  --border-strong: rgba(226, 236, 255, 0.24);
  --text: #F3F6FB;
  --text-2: #C3CFE2;
  --text-muted: #9AAAC3;
  --accent: #2DD4BF;
  --accent-hover: #5EEAD4;
  --on-accent: #06202A;
  --link: #99F6E4;
  --focus: #5EEAD4;
  --danger: #FCA5A5;
  --success: #2DD4BF;
  --screen: #071328;
  --screen-pitch-a: #1D4A35;
  --screen-pitch-b: #183F2D;
  --screen-line: rgba(243, 246, 251, 0.3);
  --card-bg: #0D1F3D;
  --card-border: #26406A;
  --card-border-strong: #34548A;
  --card-text: #F3F6FB;
  --card-text-2: #C3CFE2;
  --card-muted: #93A3BD;
  --card-link: #99F6E4;
  --card-picked: rgba(45, 212, 191, 0.14);
  --live-bg: #3A1520;
  --live-text: #FCA5A5;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

html { color-scheme: dark; }