/* ============================================================
   howtogo.dev design tokens
   ------------------------------------------------------------
   Every color on the site resolves to one of these variables.
   Values are space-separated RGB channels, not hex, so Tailwind
   can apply an opacity modifier to them: static/js/tailwind-config.js
   maps each scale to rgb(var(--token) / <alpha-value>), which is what
   makes bg-zinc-900/50 and border-blue-400/40 keep working.

   Ramps are generated in OKLCH for even perceptual steps, then
   validated with APCA against the background each token actually
   renders on. See docs/PALETTE.md for the generator and the numbers.

   Adding a theme: copy one [data-theme] block, change the values,
   and add the theme's id to THEMES in static/js/theme.js. Nothing
   else in the codebase needs to know about it.

   The ramp inverts between light and dark on purpose. The codebase
   uses low zinc numbers for text and high ones for surfaces, so a
   light theme is the same scale read the other way round, and no
   template needs a per-theme class.
   ============================================================ */

/* The site's chrome accent: focus rings, the sidebar progress checks, link
   hover, the blockquote rule. Go's own cyan is the fallback, but every theme
   sets its own value below, because a sidebar full of Go cyan reads as an
   import from another palette on a rose or a purple ground. Each theme picks
   the color its own palette uses for UI chrome, and pairs it with an
   --accent-strong of a different hue so the two accents on the home page
   stay distinguishable. For accent *text* use --accent-strong. */
:root { --brand-go: 0 173 216; }

:root {
  color-scheme: dark;
  /* The fallback ramp, on :root alone. It is not a theme a reader can pick:
     every palette in the picker sets its own values over the top, and this
     block is what a page renders with before theme.js runs, or if it never
     does. Deep navy ground. The neutral ramp carries a little of the ground's
     own hue so text sits in the same family as the surfaces it lands on,
     and the whole low end is lifted a step: the dimmest label on the page
     is zinc-500, and it has to stay readable at 10px uppercase. */
  --zinc-50: 246 250 255;
  --zinc-100: 233 240 252;
  --zinc-200: 219 230 246;
  --zinc-300: 199 214 236;
  --zinc-400: 170 190 219;
  --zinc-500: 140 163 199;
  --zinc-600: 103 126 165;
  --zinc-700: 66 88 125;
  --zinc-800: 36 52 80;
  --zinc-850: 22 34 56;
  --zinc-900: 17 27 45;
  --zinc-950: 11 18 32;

  /* Syntax tokens sit on seven well-separated hues so no two read as the
     same color at a glance, and all six of the bright ones are held to one
     lightness band so none visually outranks another. */
  --syn-kw: 255 142 211;
  --syn-fn: 157 196 255;
  --syn-str: 205 248 127;
  --syn-typ: 255 210 124;
  --syn-num: 255 169 140;
  --syn-cmt: 116 132 158;

  /* The colour of an unclassed <code> in prose. Defaults to the function
     blue that code blocks use for identifiers. A theme can point it at a
     different token when blue reads flat against its own palette. */
  --code-inline: var(--syn-fn);
  /* The anchor in a reference table: the declared name, set well
     above the other tokens so the eye lands on it while scanning. */
  --syn-name: 92 249 176;

  /* state colors: strong = stroke/mark, soft = fill, surf = tinted panel */
  --ok-strong: 92 249 176;
  --ok-soft: 178 252 213;
  --ok-surf: 12 56 40;
  --warn-strong: 255 199 87;
  --warn-soft: 255 226 163;
  --warn-surf: 60 44 12;
  --info-strong: 116 205 255;
  --info-soft: 180 228 255;
  --info-surf: 16 45 68;
  --alt-strong: 78 240 224;
  --alt-soft: 168 248 241;
  --alt-surf: 8 58 56;
  --danger-strong: 255 138 158;
  --danger-soft: 255 194 204;
  --danger-surf: 66 27 38;
  --accent-strong: 122 167 255;
  --accent-soft: 178 203 255;
  --accent-surf: 24 40 78;
  /* index accent: the site's search/topic-index affordance. Its own
     hue on purpose, so it never reads as an error color. */
  --index-strong: 255 124 200;
  --index-soft: 255 186 224;
  --index-surf: 66 26 56;
}

[data-theme="light"] {
  color-scheme: light;
  /* neutral ramp: low numbers = text, high numbers = surfaces */
  --zinc-50: 15 19 32;
  --zinc-100: 34 39 54;
  --zinc-200: 54 61 77;
  --zinc-300: 78 85 102;
  --zinc-400: 102 109 126;
  --zinc-500: 128 134 149;
  --zinc-600: 150 155 168;
  --zinc-700: 178 182 191;
  --zinc-800: 212 215 222;
  --zinc-850: 232 234 239;
  --zinc-900: 239 241 245;
  --zinc-950: 253 253 255;

  /* syntax + inline-code tokens, matched in perceived lightness */
  --syn-kw: 0 116 147;
  --syn-fn: 61 106 165;
  --syn-str: 44 125 38;
  --syn-typ: 137 96 0;
  --syn-num: 151 87 0;
  --syn-cmt: 139 145 172;
  /* The anchor in a reference table: the declared name, set well
     above the other tokens so the eye lands on it while scanning. */
  --syn-name: 0 77 157;

  /* state colors: strong = stroke/mark, soft = fill, surf = tinted panel */
  --ok-strong: 49 133 42;
  --ok-soft: 112 170 105;
  --ok-surf: 224 243 222;
  --warn-strong: 147 103 0;
  --warn-soft: 188 144 65;
  --warn-surf: 250 235 211;
  --info-strong: 42 111 197;
  --info-soft: 105 155 219;
  --info-surf: 226 238 254;
  --alt-strong: 124 98 155;
  --alt-soft: 168 134 207;
  --alt-surf: 242 232 255;
  --danger-strong: 183 68 65;
  --danger-soft: 212 124 118;
  --danger-surf: 255 230 228;
  --accent-strong: 0 110 139;
  --accent-soft: 56 166 202;
  --accent-surf: 213 243 254;
  /* index accent: the site's search/topic-index affordance. Its own
     hue on purpose, so it never reads as an error color. */
  --index-strong: 168 70 137;
  --index-soft: 198 124 172;
  --index-surf: 254 228 244;

  /* Chrome accent: Go cyan darkened until it carries on paper. The active
     example tab is set in it, so it has to clear 4.5:1 as text. */
  --brand-go: 0 116 148;
}

[data-theme="high-contrast"] {
  color-scheme: dark;
  /* neutral ramp: low numbers = text, high numbers = surfaces */
  --zinc-50: 255 255 255;
  --zinc-100: 249 250 253;
  --zinc-200: 238 240 246;
  --zinc-300: 223 227 235;
  --zinc-400: 206 210 222;
  --zinc-500: 181 186 200;
  --zinc-600: 152 158 174;
  --zinc-700: 118 125 143;
  --zinc-800: 79 86 105;
  --zinc-850: 44 50 67;
  --zinc-900: 36 43 60;
  --zinc-950: 6 10 20;

  /* syntax + inline-code tokens, matched in perceived lightness */
  --syn-kw: 161 229 255;
  --syn-fn: 193 220 255;
  --syn-str: 177 235 171;
  --syn-typ: 252 210 140;
  --syn-num: 255 207 163;
  --syn-cmt: 147 151 171;
  /* The anchor in a reference table: the declared name, set well
     above the other tokens so the eye lands on it while scanning. */
  --syn-name: 226 238 255;

  /* state colors: strong = stroke/mark, soft = fill, surf = tinted panel */
  --ok-strong: 143 227 134;
  --ok-soft: 195 245 189;
  --ok-surf: 31 52 28;
  --warn-strong: 254 190 70;
  --warn-soft: 255 224 175;
  --warn-surf: 59 43 13;
  --info-strong: 168 205 255;
  --info-soft: 212 230 254;
  --info-surf: 28 47 71;
  --alt-strong: 217 187 255;
  --alt-soft: 235 221 255;
  --alt-surf: 51 39 66;
  --danger-strong: 255 181 174;
  --danger-soft: 254 219 215;
  --danger-surf: 68 35 33;
  --accent-strong: 116 218 255;
  --accent-soft: 192 237 255;
  --accent-surf: 9 51 64;
  /* index accent: the site's search/topic-index affordance. Its own
     hue on purpose, so it never reads as an error color. */
  --index-strong: 255 172 225;
  --index-soft: 255 215 239;
  --index-surf: 63 35 53;

  /* Chrome accent: the palette is already built around one bright cyan. */
  --brand-go: 116 218 255;
}

[data-theme="dracula"] {
  color-scheme: dark;
  /* Dracula. Hues come from the official palette, lightness does not: every
     syntax token is lifted to at least OKLCH L 0.845 against the code-block
     ground, because the published pink and purple sat at L 0.75 and read
     dimmer than the body text beside them. Green keeps its own lightness and
     gains chroma, so function names are the vivid anchor on a table row. */
  --zinc-50: 255 255 255;
  --zinc-100: 248 248 242;
  --zinc-200: 232 232 228;
  --zinc-300: 213 214 220;
  --zinc-400: 189 191 205;
  --zinc-500: 158 163 186;
  --zinc-600: 128 136 165;
  --zinc-700: 98 114 164;
  --zinc-800: 68 71 90;
  --zinc-850: 52 55 71;
  --zinc-900: 47 50 64;
  --zinc-950: 40 42 54;

  /* Dracula paints function names green, which is also the brightest thing
     in the palette. That makes it the right token for --syn-name, the one
     bright anchor on every reference-table row. The previous pale cyan sat
     too close to the body text to scan. */
  --syn-name: 0 255 105;
  /* The official Dracula pink. The paler 255 176 218 it replaces sat close
     enough to --syn-typ (215 190 255) that keywords and types read as the
     same washed-out lilac in a code block. */
  --syn-kw: 255 121 198;
  --syn-fn: 132 234 255;
  --syn-typ: 215 190 255;
  --syn-str: 242 252 97;
  --syn-num: 255 189 119;
  --syn-cmt: 118 140 207;
  /* Pink, not blue: the palette's blue is already carrying function names
     in every code block on the page. */
  --code-inline: var(--syn-kw);

  --ok-strong: 80 250 123;
  --ok-soft: 150 252 175;
  --ok-surf: 26 58 34;
  --warn-strong: 255 184 108;
  --warn-soft: 255 210 160;
  --warn-surf: 66 44 24;
  --info-strong: 139 233 253;
  --info-soft: 180 241 254;
  --info-surf: 22 55 63;
  --alt-strong: 189 147 249;
  --alt-soft: 214 187 252;
  --alt-surf: 48 38 68;
  --danger-strong: 255 85 85;
  --danger-soft: 255 150 150;
  --danger-surf: 70 28 28;
  --accent-strong: 139 233 253;
  --accent-soft: 180 241 254;
  --accent-surf: 22 55 63;
  --index-strong: 255 121 198;
  --index-soft: 255 173 219;
  --index-surf: 66 30 51;

  /* Chrome accent: Go's own cyan, the same value :root falls back to. This
     is the default theme, and the cyan is the color the site has always worn
     here. The override is written out rather than left to the fallback so
     this block reads the same as every other theme's. */
  --brand-go: 0 173 216;
}

[data-theme="catppuccin-mocha"] {
  color-scheme: dark;
  /* Catppuccin Mocha. Hues from the official palette, lightness normalized
     to a OKLCH L 0.845 floor: the published blue, mauve and sapphire sat
     between L 0.766 and 0.791 and were the dimmest things on a reference row.
     Function names take Teal #94E2D5 and calls take the blue: teal is the
     brighter of the two, and --syn-name is the one bright anchor on every
     reference-table row. */
  --zinc-50: 245 224 220;
  --zinc-100: 227 233 250;
  --zinc-200: 205 214 244;
  --zinc-300: 186 194 222;
  --zinc-400: 166 173 200;
  --zinc-500: 147 153 178;
  --zinc-600: 127 132 156;
  --zinc-700: 108 112 134;
  --zinc-800: 69 71 90;
  --zinc-850: 55 57 76;
  --zinc-900: 49 50 68;
  --zinc-950: 30 30 46;

  --syn-name: 123 231 214;
  --syn-kw: 218 189 255;
  --syn-fn: 175 206 255;
  --syn-typ: 255 225 157;
  --syn-str: 151 232 145;
  --syn-num: 255 187 144;
  --syn-cmt: 135 141 173;

  --ok-strong: 166 227 161;
  --ok-soft: 198 238 194;
  --ok-surf: 32 54 34;
  --warn-strong: 249 226 175;
  --warn-soft: 252 238 208;
  --warn-surf: 62 54 32;
  --info-strong: 137 220 235;
  --info-soft: 178 233 243;
  --info-surf: 24 52 58;
  --alt-strong: 203 166 247;
  --alt-soft: 222 198 250;
  --alt-surf: 50 40 70;
  --danger-strong: 243 139 168;
  --danger-soft: 248 183 202;
  --danger-surf: 66 30 40;
  --accent-strong: 137 180 250;
  --accent-soft: 180 190 254;
  --accent-surf: 26 40 68;
  --index-strong: 245 194 231;
  --index-soft: 249 218 241;
  --index-surf: 62 36 56;

  /* Chrome accent: Mauve, Catppuccin's signature. Blue stays on
     --accent-strong. */
  --brand-go: 203 166 247;
}

[data-theme="carbon"] {
  color-scheme: dark;
  /* Carbon: near-black, the highest contrast of the three. */
  --zinc-50: 255 255 254;
  --zinc-100: 245 247 248;
  --zinc-200: 230 232 234;
  --zinc-300: 211 214 217;
  --zinc-400: 186 190 194;
  --zinc-500: 156 160 165;
  --zinc-600: 128 132 136;
  --zinc-700: 94 98 102;
  --zinc-800: 61 64 68;
  --zinc-850: 32 35 39;
  --zinc-900: 26 29 33;
  --zinc-950: 10 12 15;

  --syn-kw: 187 199 254;
  --syn-fn: 136 232 255;
  --syn-name: 190 252 255;
  --syn-typ: 134 234 171;
  --syn-str: 242 215 108;
  --syn-num: 255 180 179;
  --syn-cmt: 124 129 134;

  --ok-strong: 82 216 140;
  --ok-soft: 161 236 187;
  --ok-surf: 23 53 35;
  --warn-strong: 245 169 31;
  --warn-soft: 254 206 140;
  --warn-surf: 60 42 14;
  --info-strong: 16 208 241;
  --info-soft: 136 232 255;
  --info-surf: 5 52 61;
  --alt-strong: 206 165 255;
  --alt-soft: 226 204 255;
  --alt-surf: 51 39 66;
  --danger-strong: 254 154 154;
  --danger-soft: 254 200 199;
  --danger-surf: 68 35 35;
  --accent-strong: 3 212 220;
  --accent-soft: 128 236 241;
  --accent-surf: 2 53 56;
  --index-strong: 243 146 235;
  --index-soft: 254 192 247;
  --index-surf: 60 36 58;

  /* Chrome accent: periwinkle against a near-black ground, which leaves
     the cyan to --accent-strong. */
  --brand-go: 187 199 254;
}

[data-theme="gophers-path"] {
  color-scheme: dark;
  /* Gopher's Path: Go's own cyan on graphite, with the gopher's yellow and a
     rose as the second and third accents. The three given colors are the
     chrome accent, --accent-strong, and the danger hue respectively; the
     syntax tokens are derived from them and lifted to the OKLCH L 0.845
     floor, with the function blue pushed to 245 degrees so it does not sit
     on top of the cyan the theme is named for. */
  --zinc-50: 250 250 252;
  --zinc-100: 244 245 247;
  --zinc-200: 236 238 241;
  --zinc-300: 229 231 235;
  --zinc-400: 200 203 209;
  --zinc-500: 167 171 179;
  --zinc-600: 136 140 149;
  --zinc-700: 105 109 118;
  --zinc-800: 68 71 78;
  --zinc-850: 52 54 60;
  --zinc-900: 44 46 51;
  --zinc-950: 26 27 30;

  /* The anchor in a reference table: the declared name, lifted off the Go
     cyan so it is the brightest of the seven. */
  --syn-name: 93 221 250;
  --syn-fn: 170 193 255;
  --syn-kw: 255 171 188;
  --syn-typ: 253 224 71;
  --syn-str: 158 235 148;
  --syn-num: 255 184 129;
  --syn-cmt: 131 137 150;

  /* state colors: strong = stroke/mark, soft = fill, surf = tinted panel */
  --ok-strong: 134 226 138;
  --ok-soft: 186 240 188;
  --ok-surf: 22 52 30;
  --warn-strong: 253 224 71;
  --warn-soft: 254 238 160;
  --warn-surf: 58 50 16;
  --info-strong: 90 205 235;
  --info-soft: 165 227 244;
  --info-surf: 12 46 58;
  --alt-strong: 186 166 250;
  --alt-soft: 214 202 252;
  --alt-surf: 44 38 68;
  --danger-strong: 255 111 134;
  --danger-soft: 255 176 190;
  --danger-surf: 66 26 36;
  --accent-strong: 253 224 71;
  --accent-soft: 254 238 160;
  --accent-surf: 56 48 16;
  /* index accent: the site's search/topic-index affordance. Its own
     hue on purpose, so it never reads as an error color. */
  --index-strong: 246 138 200;
  --index-soft: 250 190 224;
  --index-surf: 60 30 50;

  /* Chrome accent: Go's cyan, unmodified. This is the one theme built on
     it, which is why the yellow takes --accent-strong instead. */
  --brand-go: 0 173 216;
}

[data-theme="rose-pine"] {
  color-scheme: dark;
  /* Rose Pine. Hues from the official palette, lightness re-derived to the
     OKLCH L 0.845 floor. Two pairs collide upstream and had to move: rose
     sits 20 degrees from gold, and pine sits 10 from foam. Pine moved to 230
     to carry calls, rose moved warmer to carry types, and the seven now hold
     35 degrees apart at the closest. Rose Pine has no green, so --ok-strong
     is a desaturated one built to sit in the same family. */
  --zinc-50: 255 255 255;
  --zinc-100: 240 238 250;
  --zinc-200: 224 222 244;
  --zinc-300: 209 206 234;
  --zinc-400: 186 182 214;
  --zinc-500: 158 154 186;
  --zinc-600: 132 128 160;
  --zinc-700: 110 106 134;
  --zinc-800: 82 79 103;
  --zinc-850: 52 49 72;
  --zinc-900: 38 35 58;
  --zinc-950: 25 23 36;

  /* The anchor in a reference table: the declared name. Foam, the brightest
     carrier in the palette. */
  --syn-name: 168 228 236;
  --syn-fn: 152 188 244;
  /* Saturated rather than lightened: the previous 214 186 250 cleared the
     contrast floor easily but read as pastel against the other tokens. */
  --syn-kw: 203 150 255;
  --syn-typ: 255 184 172;
  --syn-str: 248 206 124;
  --syn-num: 250 152 182;
  --syn-cmt: 138 133 168;
  /* Peach. Rose Pine's blue sits close to its foam and reads flat in
     running text. */
  --code-inline: var(--syn-typ);

  /* state colors: strong = stroke/mark, soft = fill, surf = tinted panel */
  --ok-strong: 150 220 175;
  --ok-soft: 190 236 205;
  --ok-surf: 28 52 44;
  --warn-strong: 248 203 134;
  --warn-soft: 251 224 180;
  --warn-surf: 58 46 24;
  --info-strong: 164 216 226;
  --info-soft: 196 231 238;
  --info-surf: 22 48 56;
  --alt-strong: 206 178 240;
  --alt-soft: 224 205 246;
  --alt-surf: 46 38 68;
  --danger-strong: 240 128 160;
  --danger-soft: 246 178 198;
  --danger-surf: 64 28 42;
  --accent-strong: 206 178 240;
  --accent-soft: 224 205 246;
  --accent-surf: 46 38 68;
  /* index accent: the site's search/topic-index affordance. Its own
     hue on purpose, so it never reads as an error color. */
  --index-strong: 236 160 200;
  --index-soft: 244 198 224;
  --index-surf: 58 32 50;

  /* Chrome accent: rose, the palette's own primary. Iris carries
     --accent-strong, so the two accents on the home page stay apart. */
  --brand-go: 235 188 186;
}

[data-theme="one-dark"] {
  color-scheme: dark;
  /* One Dark. Hues from Atom's palette, lightness re-derived to the OKLCH
     L 0.845 floor, since #abb2bf as body copy reads a step under this site's
     smallest label. Two pairs collided and moved: the cyan sat 25 degrees
     from the blue and went to 175 to carry calls, and the orange sat 15 from
     the yellow and went to 12 to carry numbers.

     zinc-900 is Atom's own editor ground #282C34 and zinc-950 its darker
     chrome #21252B, one step below where the other dark themes put them.
     Lifting the tokens instead was tried: One Dark's blue has to clear the
     other six to hold --syn-name, and against a lighter card it arrives
     near-white before it gets there. */
  --zinc-50: 255 255 255;
  --zinc-100: 236 240 246;
  --zinc-200: 222 228 236;
  --zinc-300: 205 212 223;
  --zinc-400: 174 180 193;
  --zinc-500: 151 159 172;
  --zinc-600: 122 130 145;
  --zinc-700: 92 99 112;
  --zinc-800: 76 83 97;
  --zinc-850: 62 68 81;
  --zinc-900: 40 44 52;
  --zinc-950: 33 37 43;

  /* The anchor in a reference table: the declared name. One Dark paints
     function declarations blue, lifted here until it is the brightest of
     the seven. */
  --syn-name: 158 209 255;
  --syn-fn: 115 213 206;
  --syn-kw: 221 174 242;
  --syn-typ: 226 196 128;
  --syn-str: 161 209 131;
  --syn-num: 250 173 149;
  --syn-cmt: 130 138 152;

  /* state colors: strong = stroke/mark, soft = fill, surf = tinted panel */
  --ok-strong: 158 212 128;
  --ok-soft: 194 232 176;
  --ok-surf: 30 52 30;
  --warn-strong: 236 202 132;
  --warn-soft: 244 224 180;
  --warn-surf: 58 48 24;
  --info-strong: 122 194 250;
  --info-soft: 176 218 252;
  --info-surf: 20 44 66;
  --alt-strong: 210 152 238;
  --alt-soft: 228 194 246;
  --alt-surf: 48 34 62;
  --danger-strong: 240 130 138;
  --danger-soft: 246 182 186;
  --danger-surf: 66 30 34;
  --accent-strong: 158 212 128;
  --accent-soft: 194 232 176;
  --accent-surf: 30 52 30;
  /* index accent: the site's search/topic-index affordance. Its own
     hue on purpose, so it never reads as an error color. */
  --index-strong: 226 146 214;
  --index-soft: 240 190 232;
  --index-surf: 56 32 54;

  /* Chrome accent: One Dark's blue. The green takes --accent-strong, which
     is the pairing Atom itself uses. */
  --brand-go: 97 175 239;
}