/*
 * Color schemes, named after the macOS Terminal profiles, plus SpeedStacks.
 * The active scheme is set on <html data-theme="...">; any element with a
 * data-theme attribute (e.g. the previews in the scheme chooser) also gets it.
 *
 * Chart series s1-s3 come from the documented data-viz palette (light or dark
 * column per scheme) and were validated against each scheme's card surface:
 * color-blind separation, normal-vision separation and >= 3:1 contrast.
 * Text, timer and LED colors were contrast-checked against their backgrounds.
 */

/* Basic */
:root,
[data-theme="basic"] {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f1f0ec;
  --surface-3: #e8e7e2;
  --stage: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px rgba(11, 11, 11, 0.06);
  --accent: #2a78d6;
  --primary: #0b0b0b;
  --on-primary: #fcfcfb;
  --danger: #c62f2f;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #4a3aa7;
  --single: #a3a19a;
  --timer-ink: #0b0b0b;
  --timer-dim: #52514e;
  --timer-warn: #a86a00;
  --timer-late: #d03b3b;
  --hold: #d03b3b;
  --ready: #0ca30c;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: transparent;
  --timer-bezel: transparent;
  --timer-size: clamp(64px, 13vw, 168px);
  --timer-pad-x: 0px;
  --timer-pad-y: 0px;
  --timer-bezel-x: 0px;
  --timer-bezel-y: 0px;
  --timer-radius: 0px;
  --led-size: 0px;
  --led-inset: 0px;
  --led-off-l: transparent;
  --led-on-l: transparent;
  --led-off-r: transparent;
  --led-on-r: transparent;
}

/* Pro */
[data-theme="pro"] {
  color-scheme: dark;
  --page: #000000;
  --surface: #1a1a19;
  --surface-2: #242422;
  --surface-3: #2f2f2c;
  --stage: #1a1a19;
  --ink: #f2f2f2;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.1);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --accent: #3987e5;
  --primary: #f2f2f2;
  --on-primary: #1a1a19;
  --danger: #f0716a;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --single: #6f6d68;
  --timer-ink: #f2f2f2;
  --timer-dim: #c3c2b7;
  --timer-warn: #fab219;
  --timer-late: #e5534b;
  --hold: #e5534b;
  --ready: #2fbf2f;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: transparent;
  --timer-bezel: transparent;
  --timer-size: clamp(64px, 13vw, 168px);
  --timer-pad-x: 0px;
  --timer-pad-y: 0px;
  --timer-bezel-x: 0px;
  --timer-bezel-y: 0px;
  --timer-radius: 0px;
  --led-size: 0px;
  --led-inset: 0px;
  --led-off-l: transparent;
  --led-on-l: transparent;
  --led-off-r: transparent;
  --led-on-r: transparent;
}

/* Homebrew */
[data-theme="homebrew"] {
  color-scheme: dark;
  --page: #000000;
  --surface: #0b120b;
  --surface-2: #132313;
  --surface-3: #1b331b;
  --stage: #000000;
  --ink: #28fe14;
  --ink-2: #22c814;
  --muted: #1c9411;
  --grid: #132a12;
  --axis: #1f4a1a;
  --border: rgba(40, 254, 20, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --accent: #28fe14;
  --primary: #28fe14;
  --on-primary: #000000;
  --danger: #ff5c50;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --single: #1a6e12;
  --timer-ink: #28fe14;
  --timer-dim: #22c814;
  --timer-warn: #fab219;
  --timer-late: #ff4b3e;
  --hold: #ff4b3e;
  --ready: #28fe14;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: transparent;
  --timer-bezel: transparent;
  --timer-size: clamp(64px, 13vw, 168px);
  --timer-pad-x: 0px;
  --timer-pad-y: 0px;
  --timer-bezel-x: 0px;
  --timer-bezel-y: 0px;
  --timer-radius: 0px;
  --led-size: 0px;
  --led-inset: 0px;
  --led-off-l: transparent;
  --led-on-l: transparent;
  --led-off-r: transparent;
  --led-on-r: transparent;
}

/* Ocean */
[data-theme="ocean"] {
  color-scheme: dark;
  --page: #224fbc;
  --surface: #14316f;
  --surface-2: #1c3d86;
  --surface-3: #25499b;
  --stage: #224fbc;
  --ink: #ffffff;
  --ink-2: #cdd9f6;
  --muted: #93a9de;
  --grid: #223f80;
  --axis: #2f5199;
  --border: rgba(255, 255, 255, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --accent: #ffd166;
  --primary: #ffffff;
  --on-primary: #14316f;
  --danger: #ffb3aa;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --single: #5f7bc0;
  --timer-ink: #ffffff;
  --timer-dim: #cdd9f6;
  --timer-warn: #ffd166;
  --timer-late: #ffa49a;
  --hold: #ffa49a;
  --ready: #8dfaa9;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: transparent;
  --timer-bezel: transparent;
  --timer-size: clamp(64px, 13vw, 168px);
  --timer-pad-x: 0px;
  --timer-pad-y: 0px;
  --timer-bezel-x: 0px;
  --timer-bezel-y: 0px;
  --timer-radius: 0px;
  --led-size: 0px;
  --led-inset: 0px;
  --led-off-l: transparent;
  --led-on-l: transparent;
  --led-off-r: transparent;
  --led-on-r: transparent;
}

/* Grass */
[data-theme="grass"] {
  color-scheme: dark;
  --page: #13773d;
  --surface: #0b4524;
  --surface-2: #0f552d;
  --surface-3: #146536;
  --stage: #13773d;
  --ink: #fff0a5;
  --ink-2: #f3eaae;
  --muted: #bcd2a2;
  --grid: #11572e;
  --axis: #1c6e3d;
  --border: rgba(255, 240, 165, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --accent: #ffb03b;
  --primary: #fff0a5;
  --on-primary: #0b4524;
  --danger: #ffbca4;
  --s1: #199e70;
  --s2: #c98500;
  --s3: #9085e9;
  --single: #5d8f5a;
  --timer-ink: #fff0a5;
  --timer-dim: #e3d896;
  --timer-warn: #ffb03b;
  --timer-late: #ffb59a;
  --hold: #ffb59a;
  --ready: #d4ff7a;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: transparent;
  --timer-bezel: transparent;
  --timer-size: clamp(64px, 13vw, 168px);
  --timer-pad-x: 0px;
  --timer-pad-y: 0px;
  --timer-bezel-x: 0px;
  --timer-bezel-y: 0px;
  --timer-radius: 0px;
  --led-size: 0px;
  --led-inset: 0px;
  --led-off-l: transparent;
  --led-on-l: transparent;
  --led-off-r: transparent;
  --led-on-r: transparent;
}

/* Red Sands */
[data-theme="red-sands"] {
  color-scheme: dark;
  --page: #7a251e;
  --surface: #4a1511;
  --surface-2: #5a1c16;
  --surface-3: #6a231c;
  --stage: #7a251e;
  --ink: #d7c9a7;
  --ink-2: #c4b38e;
  --muted: #a88f73;
  --grid: #5f1f18;
  --axis: #772c22;
  --border: rgba(215, 201, 167, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --accent: #dfbd22;
  --primary: #d7c9a7;
  --on-primary: #4a1511;
  --danger: #ffbfae;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --single: #8f5a48;
  --timer-ink: #d7c9a7;
  --timer-dim: #c4b38e;
  --timer-warn: #dfbd22;
  --timer-late: #ffb7a3;
  --hold: #ffb7a3;
  --ready: #b8f2a0;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: transparent;
  --timer-bezel: transparent;
  --timer-size: clamp(64px, 13vw, 168px);
  --timer-pad-x: 0px;
  --timer-pad-y: 0px;
  --timer-bezel-x: 0px;
  --timer-bezel-y: 0px;
  --timer-radius: 0px;
  --led-size: 0px;
  --led-inset: 0px;
  --led-off-l: transparent;
  --led-on-l: transparent;
  --led-off-r: transparent;
  --led-on-r: transparent;
}

/* Man Page */
[data-theme="man-page"] {
  color-scheme: light;
  --page: #fef49c;
  --surface: #fffbd9;
  --surface-2: #f8efa6;
  --surface-3: #efe38a;
  --stage: #fef49c;
  --ink: #141410;
  --ink-2: #47432c;
  --muted: #7a7350;
  --grid: #ede5a8;
  --axis: #cfc487;
  --border: rgba(20, 20, 16, 0.12);
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px rgba(11, 11, 11, 0.06);
  --accent: #1e5fb8;
  --primary: #141410;
  --on-primary: #fffbd9;
  --danger: #b71c1c;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #4a3aa7;
  --single: #b9b07a;
  --timer-ink: #141410;
  --timer-dim: #47432c;
  --timer-warn: #8a5800;
  --timer-late: #c62828;
  --hold: #c62828;
  --ready: #0a7a0a;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: transparent;
  --timer-bezel: transparent;
  --timer-size: clamp(64px, 13vw, 168px);
  --timer-pad-x: 0px;
  --timer-pad-y: 0px;
  --timer-bezel-x: 0px;
  --timer-bezel-y: 0px;
  --timer-radius: 0px;
  --led-size: 0px;
  --led-inset: 0px;
  --led-off-l: transparent;
  --led-on-l: transparent;
  --led-off-r: transparent;
  --led-on-r: transparent;
}

/* Novel */
[data-theme="novel"] {
  color-scheme: light;
  --page: #dfdbc3;
  --surface: #fbfaf4;
  --surface-2: #efebda;
  --surface-3: #dfdac3;
  --stage: #dfdbc3;
  --ink: #3b2322;
  --ink-2: #5e4a3e;
  --muted: #7f6f5d;
  --grid: #e2dcc8;
  --axis: #c2b99c;
  --border: rgba(59, 35, 34, 0.14);
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px rgba(11, 11, 11, 0.06);
  --accent: #8e2a19;
  --primary: #3b2322;
  --on-primary: #fbfaf4;
  --danger: #a5221b;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #4a3aa7;
  --single: #b3a78f;
  --timer-ink: #3b2322;
  --timer-dim: #5e4a3e;
  --timer-warn: #7a4f00;
  --timer-late: #b3261e;
  --hold: #b3261e;
  --ready: #2b6e2f;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: transparent;
  --timer-bezel: transparent;
  --timer-size: clamp(64px, 13vw, 168px);
  --timer-pad-x: 0px;
  --timer-pad-y: 0px;
  --timer-bezel-x: 0px;
  --timer-bezel-y: 0px;
  --timer-radius: 0px;
  --led-size: 0px;
  --led-inset: 0px;
  --led-off-l: transparent;
  --led-on-l: transparent;
  --led-off-r: transparent;
  --led-on-r: transparent;
}

/* Silver Aerogel */
[data-theme="silver-aerogel"] {
  color-scheme: light;
  --page: #9a9a9a;
  --surface: #fafafa;
  --surface-2: #ececec;
  --surface-3: #dcdcdc;
  --stage: #a8a8a8;
  --ink: #000000;
  --ink-2: #2b2b2b;
  --muted: #4a4a4a;
  --grid: #dedede;
  --axis: #b3b3b3;
  --border: rgba(0, 0, 0, 0.14);
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px rgba(11, 11, 11, 0.06);
  --accent: #1d4fa8;
  --primary: #000000;
  --on-primary: #fafafa;
  --danger: #8f0e0e;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #4a3aa7;
  --single: #a6a6a6;
  --timer-ink: #000000;
  --timer-dim: #2b2b2b;
  --timer-warn: #5c3f00;
  --timer-late: #8f0e0e;
  --hold: #8f0e0e;
  --ready: #0b5a0b;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: transparent;
  --timer-bezel: transparent;
  --timer-size: clamp(64px, 13vw, 168px);
  --timer-pad-x: 0px;
  --timer-pad-y: 0px;
  --timer-bezel-x: 0px;
  --timer-bezel-y: 0px;
  --timer-radius: 0px;
  --led-size: 0px;
  --led-inset: 0px;
  --led-off-l: transparent;
  --led-on-l: transparent;
  --led-off-r: transparent;
  --led-on-r: transparent;
}

/* SpeedStacks */
[data-theme="speedstacks"] {
  color-scheme: dark;
  --page: #0a2a6b;
  --surface: #0c2357;
  --surface-2: #122e6c;
  --surface-3: #193a82;
  --stage: #1146a8;
  --ink: #fff7dc;
  --ink-2: #e9dcaa;
  --muted: #9fb2e3;
  --grid: #18346f;
  --axis: #24458a;
  --border: rgba(255, 210, 0, 0.2);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --accent: #ffd200;
  --primary: #ffd200;
  --on-primary: #0a2152;
  --danger: #ff8a80;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --single: #5d74b3;
  --timer-ink: #1c2214;
  --timer-dim: #1c2214;
  --timer-warn: #1c2214;
  --timer-late: #1c2214;
  --hold: #1c2214;
  --ready: #1c2214;
  --timer-glow: none;
  --timer-ghost: 0.06;
  --timer-style: italic;
  --display-face: transparent;
  --display-rim: linear-gradient(transparent, transparent);
  --display-rim-width: 0px;
  --display-pad: 0px;
  --display-min-width: 0px;
  --display-logo: none;
  --display-shadow: none;
  --timer-min-width: 0px;
  --timer-align: left;
  --timer-ghost-content: attr(data-ghost);
  --preview-size: 26px;
  --timer-bg: #c9cf9a;
  --timer-bezel: #071533;
  --timer-size: clamp(52px, 10vw, 140px);
  --timer-pad-x: 0.16em;
  --timer-pad-y: 0.1em;
  --timer-bezel-x: 0.34em;
  --timer-bezel-y: 0.1em;
  --timer-radius: 0.12em;
  --led-size: 0.2em;
  --led-inset: 0.07em;
  --led-off-l: #4a1d1a;
  --led-on-l: #ff3b30;
  --led-off-r: #12381f;
  --led-on-r: #2fd158;
}

/* Competition: SpeedStacks-style competition display - oval board with a blue rim,
   upright red LED digits on a dark module, and a logo underneath */
[data-theme="competition"] {
  color-scheme: dark;
  --page: #050505;
  --surface: #141414;
  --surface-2: #1e1e1e;
  --surface-3: #292929;
  --stage: #0d0d0d;
  --ink: #ececec;
  --ink-2: #bdbdbd;
  --muted: #8a8a8a;
  --grid: #262626;
  --axis: #3a3a3a;
  --border: rgba(255, 255, 255, 0.1);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --accent: #ff5a4a;
  --primary: #ff3b2f;
  --on-primary: #0a0a0a;
  --danger: #ff9a90;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --single: #6a6a6a;
  --timer-ink: #ff2b1c;
  --timer-dim: #ff2b1c;
  --timer-warn: #ff2b1c;
  --timer-late: #ff2b1c;
  --hold: #ff2b1c;
  --ready: #ff2b1c;
  --timer-glow: 0 0 0.05em rgba(255, 43, 28, 0.8), 0 0 0.2em rgba(255, 43, 28, 0.35);
  --timer-ghost: 0.08;
  --timer-style: normal;
  --display-face: #2a2b2e;
  --display-rim: linear-gradient(160deg, #78aef0, #2e66b5 45%, #1b4486);
  --display-rim-width: 0.09em;
  --display-pad: 0.45em 1.3em 0.38em;
  --display-min-width: 8em;
  --display-logo: block;
  --display-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.55), 0 0.05em 0.25em rgba(0, 0, 0, 0.6);
  --timer-min-width: 5.2em;
  --timer-align: right;
  --timer-ghost-content: attr(data-ghost-full);
  --preview-size: 15.5px;
  --timer-bg: #141416;
  --timer-bezel: #141416;
  --timer-size: clamp(38px, 7.4vw, 108px);
  --timer-pad-x: 0.14em;
  --timer-pad-y: 0.1em;
  --timer-bezel-x: 0.32em;
  --timer-bezel-y: 0.06em;
  --timer-radius: 0.05em;
  --led-size: 0.2em;
  --led-inset: 0.06em;
  --led-off-l: #3d1714;
  --led-on-l: #ff3b30;
  --led-off-r: #10301a;
  --led-on-r: #2fd158;
}