/* GENERATED by scripts/gen-web-tokens.mjs from apps/mobile/src/theme/tokens.ts. Do not edit; run `npm run gen:tokens`. */

/* Themes. Midnight is also :root, the default. [data-theme-scope] scopes a theme to one element (previews, the style guide). */
/* Midnight (free, dark): Default */
:root,
html[data-theme="midnight"],
[data-theme-scope="midnight"] {
  color-scheme: dark;
  --tb-bg: #0A0716;
  --tb-bg2: #100B22;
  --tb-bg3: #18112E;
  --tb-card: #100B22;
  --tb-card2: #18112E;
  --tb-text: #F3EEFE;
  --tb-text2: #B8AEE0;
  --tb-muted: #7C7298;
  --tb-primary: #7C3AED;
  --tb-primary-light: #9D6CFF;
  --tb-primary-dark: #5B21B6;
  --tb-accent: #C879FF;
  --tb-success: #1FD486;
  --tb-warning: #F5C54A;
  --tb-error: #FF5D6C;
  --tb-border: rgba(124,58,237,0.18);
  --tb-border-strong: rgba(124,58,237,0.36);
  --tb-primary-tint: rgba(124,58,237,0.18);
  --tb-primary-tint-weak: rgba(124,58,237,0.08);
  --tb-glow: rgba(200,121,255,0.45);
  --tb-on-primary: #FFFFFF;
  --tb-on-image: rgba(8,5,18,0.88);
  --tb-on-image-text: rgba(255,255,255,0.92);
  --tb-scrim: rgba(0,0,0,0.62);
  --tb-surface: rgba(255,255,255,0.05);
  --tb-surface-strong: rgba(255,255,255,0.14);
  --tb-grad-from: #7C3AED;
  --tb-grad-to: #C879FF;
  --tb-bg-rgb: 10, 7, 22;
  --tb-bg2-rgb: 16, 11, 34;
  --tb-bg3-rgb: 24, 17, 46;
  --tb-card-rgb: 16, 11, 34;
  --tb-card2-rgb: 24, 17, 46;
  --tb-text-rgb: 243, 238, 254;
  --tb-text2-rgb: 184, 174, 224;
  --tb-muted-rgb: 124, 114, 152;
  --tb-primary-rgb: 124, 58, 237;
  --tb-primary-light-rgb: 157, 108, 255;
  --tb-primary-dark-rgb: 91, 33, 182;
  --tb-accent-rgb: 200, 121, 255;
  --tb-success-rgb: 31, 212, 134;
  --tb-warning-rgb: 245, 197, 74;
  --tb-error-rgb: 255, 93, 108;
  --tb-grad-from-rgb: 124, 58, 237;
  --tb-grad-to-rgb: 200, 121, 255;
  --tb-grid-line: rgba(255, 255, 255, 0.05);
  --tb-tint-alpha: 0.12;
  --tb-ladder-raw-1: rgba(157, 108, 255, 1);
  --tb-ladder-raw-2: rgba(157, 108, 255, 0.72);
  --tb-ladder-raw-3: rgba(157, 108, 255, 0.52);
  --tb-ladder-raw-4: rgba(157, 108, 255, 0.38);
  --tb-ladder-raw-5: rgba(157, 108, 255, 0.28);
}

/* Ocean (free, dark): Deep blue */
html[data-theme="ocean"],
[data-theme-scope="ocean"] {
  color-scheme: dark;
  --tb-bg: #050916;
  --tb-bg2: #0A1330;
  --tb-bg3: #142046;
  --tb-card: #0A1330;
  --tb-card2: #142046;
  --tb-text: #EAF0FF;
  --tb-text2: #AEC4F2;
  --tb-muted: #6E82B0;
  --tb-primary: #2F6BFF;
  --tb-primary-light: #78A2FF;
  --tb-primary-dark: #1642B8;
  --tb-accent: #45D6FF;
  --tb-success: #1FD486;
  --tb-warning: #F5C54A;
  --tb-error: #FF5D6C;
  --tb-border: rgba(47,107,255,0.18);
  --tb-border-strong: rgba(47,107,255,0.36);
  --tb-primary-tint: rgba(47,107,255,0.18);
  --tb-primary-tint-weak: rgba(47,107,255,0.08);
  --tb-glow: rgba(69,214,255,0.45);
  --tb-on-primary: #FFFFFF;
  --tb-on-image: rgba(8,5,18,0.88);
  --tb-on-image-text: rgba(255,255,255,0.92);
  --tb-scrim: rgba(0,0,0,0.62);
  --tb-surface: rgba(255,255,255,0.05);
  --tb-surface-strong: rgba(255,255,255,0.14);
  --tb-grad-from: #2F6BFF;
  --tb-grad-to: #45D6FF;
  --tb-bg-rgb: 5, 9, 22;
  --tb-bg2-rgb: 10, 19, 48;
  --tb-bg3-rgb: 20, 32, 70;
  --tb-card-rgb: 10, 19, 48;
  --tb-card2-rgb: 20, 32, 70;
  --tb-text-rgb: 234, 240, 255;
  --tb-text2-rgb: 174, 196, 242;
  --tb-muted-rgb: 110, 130, 176;
  --tb-primary-rgb: 47, 107, 255;
  --tb-primary-light-rgb: 120, 162, 255;
  --tb-primary-dark-rgb: 22, 66, 184;
  --tb-accent-rgb: 69, 214, 255;
  --tb-success-rgb: 31, 212, 134;
  --tb-warning-rgb: 245, 197, 74;
  --tb-error-rgb: 255, 93, 108;
  --tb-grad-from-rgb: 47, 107, 255;
  --tb-grad-to-rgb: 69, 214, 255;
  --tb-grid-line: rgba(255, 255, 255, 0.05);
  --tb-tint-alpha: 0.12;
  --tb-ladder-raw-1: rgba(120, 162, 255, 1);
  --tb-ladder-raw-2: rgba(120, 162, 255, 0.72);
  --tb-ladder-raw-3: rgba(120, 162, 255, 0.52);
  --tb-ladder-raw-4: rgba(120, 162, 255, 0.38);
  --tb-ladder-raw-5: rgba(120, 162, 255, 0.28);
}

/* Ember (free, dark): Coal and flame */
html[data-theme="ember"],
[data-theme-scope="ember"] {
  color-scheme: dark;
  --tb-bg: #170608;
  --tb-bg2: #2B0C0A;
  --tb-bg3: #46150E;
  --tb-card: #2B0C0A;
  --tb-card2: #46150E;
  --tb-text: #FFF0E8;
  --tb-text2: #F7C4A6;
  --tb-muted: #B4826C;
  --tb-primary: #FF5A1F;
  --tb-primary-light: #FF9E5E;
  --tb-primary-dark: #C03606;
  --tb-accent: #FFD23D;
  --tb-success: #1FD486;
  --tb-warning: #FFC53D;
  --tb-error: #FF3B54;
  --tb-border: rgba(255,90,31,0.18);
  --tb-border-strong: rgba(255,90,31,0.36);
  --tb-primary-tint: rgba(255,90,31,0.18);
  --tb-primary-tint-weak: rgba(255,90,31,0.08);
  --tb-glow: rgba(255,210,61,0.45);
  --tb-on-primary: #1B0703;
  --tb-on-image: rgba(8,5,18,0.88);
  --tb-on-image-text: rgba(255,255,255,0.92);
  --tb-scrim: rgba(0,0,0,0.62);
  --tb-surface: rgba(255,255,255,0.05);
  --tb-surface-strong: rgba(255,255,255,0.14);
  --tb-grad-from: #FF5A1F;
  --tb-grad-to: #FFD23D;
  --tb-bg-rgb: 23, 6, 8;
  --tb-bg2-rgb: 43, 12, 10;
  --tb-bg3-rgb: 70, 21, 14;
  --tb-card-rgb: 43, 12, 10;
  --tb-card2-rgb: 70, 21, 14;
  --tb-text-rgb: 255, 240, 232;
  --tb-text2-rgb: 247, 196, 166;
  --tb-muted-rgb: 180, 130, 108;
  --tb-primary-rgb: 255, 90, 31;
  --tb-primary-light-rgb: 255, 158, 94;
  --tb-primary-dark-rgb: 192, 54, 6;
  --tb-accent-rgb: 255, 210, 61;
  --tb-success-rgb: 31, 212, 134;
  --tb-warning-rgb: 255, 197, 61;
  --tb-error-rgb: 255, 59, 84;
  --tb-grad-from-rgb: 255, 90, 31;
  --tb-grad-to-rgb: 255, 210, 61;
  --tb-grid-line: rgba(255, 255, 255, 0.05);
  --tb-tint-alpha: 0.12;
  --tb-ladder-raw-1: rgba(255, 158, 94, 1);
  --tb-ladder-raw-2: rgba(255, 158, 94, 0.72);
  --tb-ladder-raw-3: rgba(255, 158, 94, 0.52);
  --tb-ladder-raw-4: rgba(255, 158, 94, 0.38);
  --tb-ladder-raw-5: rgba(255, 158, 94, 0.28);
}

/* Graphite (free, dark): Steel and red */
html[data-theme="forest"],
[data-theme-scope="forest"] {
  color-scheme: dark;
  --tb-bg: #0A0C0F;
  --tb-bg2: #151A20;
  --tb-bg3: #222932;
  --tb-card: #151A20;
  --tb-card2: #222932;
  --tb-text: #F2F5F9;
  --tb-text2: #C2CBD6;
  --tb-muted: #7B8794;
  --tb-primary: #6E8FB5;
  --tb-primary-light: #A8C2DE;
  --tb-primary-dark: #47637F;
  --tb-accent: #F0424A;
  --tb-success: #1FD486;
  --tb-warning: #F5C54A;
  --tb-error: #FF5D6C;
  --tb-border: rgba(240,66,74,0.18);
  --tb-border-strong: rgba(240,66,74,0.36);
  --tb-primary-tint: rgba(110,143,181,0.18);
  --tb-primary-tint-weak: rgba(110,143,181,0.08);
  --tb-glow: rgba(240,66,74,0.45);
  --tb-on-primary: #0A0C0F;
  --tb-on-image: rgba(8,5,18,0.88);
  --tb-on-image-text: rgba(255,255,255,0.92);
  --tb-scrim: rgba(0,0,0,0.62);
  --tb-surface: rgba(255,255,255,0.05);
  --tb-surface-strong: rgba(255,255,255,0.14);
  --tb-grad-from: #F0424A;
  --tb-grad-to: #FF8A5B;
  --tb-bg-rgb: 10, 12, 15;
  --tb-bg2-rgb: 21, 26, 32;
  --tb-bg3-rgb: 34, 41, 50;
  --tb-card-rgb: 21, 26, 32;
  --tb-card2-rgb: 34, 41, 50;
  --tb-text-rgb: 242, 245, 249;
  --tb-text2-rgb: 194, 203, 214;
  --tb-muted-rgb: 123, 135, 148;
  --tb-primary-rgb: 110, 143, 181;
  --tb-primary-light-rgb: 168, 194, 222;
  --tb-primary-dark-rgb: 71, 99, 127;
  --tb-accent-rgb: 240, 66, 74;
  --tb-success-rgb: 31, 212, 134;
  --tb-warning-rgb: 245, 197, 74;
  --tb-error-rgb: 255, 93, 108;
  --tb-grad-from-rgb: 240, 66, 74;
  --tb-grad-to-rgb: 255, 138, 91;
  --tb-grid-line: rgba(255, 255, 255, 0.05);
  --tb-tint-alpha: 0.12;
  --tb-ladder-raw-1: rgba(168, 194, 222, 1);
  --tb-ladder-raw-2: rgba(168, 194, 222, 0.72);
  --tb-ladder-raw-3: rgba(168, 194, 222, 0.52);
  --tb-ladder-raw-4: rgba(168, 194, 222, 0.38);
  --tb-ladder-raw-5: rgba(168, 194, 222, 0.28);
}

/* Arctic (free, light): Cold daylight */
html[data-theme="arctic"],
[data-theme-scope="arctic"] {
  color-scheme: light;
  --tb-bg: #E9F2FB;
  --tb-bg2: #FFFFFF;
  --tb-bg3: #D3E4F6;
  --tb-card: #FFFFFF;
  --tb-card2: #F2F8FD;
  --tb-text: #0B2338;
  --tb-text2: #3D5F7C;
  --tb-muted: #7793AB;
  --tb-primary: #1668D6;
  --tb-primary-light: #0F4C9E;
  --tb-primary-dark: #0B3B7D;
  --tb-accent: #6D5AE6;
  --tb-success: #00A184;
  --tb-warning: #B87A08;
  --tb-error: #D93A4C;
  --tb-border: rgba(11,35,56,0.12);
  --tb-border-strong: rgba(22,104,214,0.38);
  --tb-primary-tint: rgba(22,104,214,0.18);
  --tb-primary-tint-weak: rgba(22,104,214,0.08);
  --tb-glow: rgba(109,90,230,0.3);
  --tb-on-primary: #FFFFFF;
  --tb-on-image: rgba(255,255,255,0.90);
  --tb-on-image-text: rgba(11,35,56,0.86);
  --tb-scrim: rgba(24,22,32,0.42);
  --tb-surface: rgba(17,17,24,0.045);
  --tb-surface-strong: rgba(17,17,24,0.09);
  --tb-grad-from: #1668D6;
  --tb-grad-to: #00C2A8;
  --tb-bg-rgb: 233, 242, 251;
  --tb-bg2-rgb: 255, 255, 255;
  --tb-bg3-rgb: 211, 228, 246;
  --tb-card-rgb: 255, 255, 255;
  --tb-card2-rgb: 242, 248, 253;
  --tb-text-rgb: 11, 35, 56;
  --tb-text2-rgb: 61, 95, 124;
  --tb-muted-rgb: 119, 147, 171;
  --tb-primary-rgb: 22, 104, 214;
  --tb-primary-light-rgb: 15, 76, 158;
  --tb-primary-dark-rgb: 11, 59, 125;
  --tb-accent-rgb: 109, 90, 230;
  --tb-success-rgb: 0, 161, 132;
  --tb-warning-rgb: 184, 122, 8;
  --tb-error-rgb: 217, 58, 76;
  --tb-grad-from-rgb: 22, 104, 214;
  --tb-grad-to-rgb: 0, 194, 168;
  --tb-grid-line: rgba(0, 0, 0, 0.07);
  --tb-tint-alpha: 0.09;
  --tb-ladder-raw-1: rgba(15, 76, 158, 1);
  --tb-ladder-raw-2: rgba(15, 76, 158, 0.72);
  --tb-ladder-raw-3: rgba(15, 76, 158, 0.52);
  --tb-ladder-raw-4: rgba(15, 76, 158, 0.38);
  --tb-ladder-raw-5: rgba(15, 76, 158, 0.28);
  /* Light ground: the fixed text colours below, darkened to AA (see lightReadableBlock). */
  --tb-gain-text: #0a5e38;
  --tb-loss-text: #9b111e;
  --tb-gold-text: #71540d;
  --tb-grade-s-accent: #8a670f;
  --tb-grade-a-accent: #0e7c4a;
  --tb-grade-b-accent: #734eeb;
  --tb-grade-c-accent: #8a670f;
  --tb-grade-d-accent: #d41829;
  --tb-grade-f-accent: #d41829;
  --tb-medal-1: #7a5c0e;
  --tb-medal-1-rgb: 122, 92, 14;
  --tb-medal-2: #4c6184;
  --tb-medal-2-rgb: 76, 97, 132;
  --tb-medal-3: #8b531d;
  --tb-medal-3-rgb: 139, 83, 29;
  --tb-muted: #536f87; /* app: #7793AB */
  --tb-muted-rgb: 83, 111, 135;
}

/* Cherry Blossom (free, light): Warm paper */
html[data-theme="blossom"],
[data-theme-scope="blossom"] {
  color-scheme: light;
  --tb-bg: #FAEDF3;
  --tb-bg2: #FFFFFF;
  --tb-bg3: #F4D9E6;
  --tb-card: #FFFFFF;
  --tb-card2: #FDF3F7;
  --tb-text: #2B1B24;
  --tb-text2: #6A4E5C;
  --tb-muted: #9E8290;
  --tb-primary: #E0468A;
  --tb-primary-light: #A62463;
  --tb-primary-dark: #8A1B4F;
  --tb-accent: #8257D8;
  --tb-success: #129C77;
  --tb-warning: #B57D0C;
  --tb-error: #D8354F;
  --tb-border: rgba(43,27,36,0.12);
  --tb-border-strong: rgba(224,70,138,0.38);
  --tb-primary-tint: rgba(224,70,138,0.18);
  --tb-primary-tint-weak: rgba(224,70,138,0.08);
  --tb-glow: rgba(130,87,216,0.3);
  --tb-on-primary: #FFFFFF;
  --tb-on-image: rgba(255,255,255,0.90);
  --tb-on-image-text: rgba(43,27,36,0.86);
  --tb-scrim: rgba(24,22,32,0.42);
  --tb-surface: rgba(17,17,24,0.045);
  --tb-surface-strong: rgba(17,17,24,0.09);
  --tb-grad-from: #E0468A;
  --tb-grad-to: #8257D8;
  --tb-bg-rgb: 250, 237, 243;
  --tb-bg2-rgb: 255, 255, 255;
  --tb-bg3-rgb: 244, 217, 230;
  --tb-card-rgb: 255, 255, 255;
  --tb-card2-rgb: 253, 243, 247;
  --tb-text-rgb: 43, 27, 36;
  --tb-text2-rgb: 106, 78, 92;
  --tb-muted-rgb: 158, 130, 144;
  --tb-primary-rgb: 224, 70, 138;
  --tb-primary-light-rgb: 166, 36, 99;
  --tb-primary-dark-rgb: 138, 27, 79;
  --tb-accent-rgb: 130, 87, 216;
  --tb-success-rgb: 18, 156, 119;
  --tb-warning-rgb: 181, 125, 12;
  --tb-error-rgb: 216, 53, 79;
  --tb-grad-from-rgb: 224, 70, 138;
  --tb-grad-to-rgb: 130, 87, 216;
  --tb-grid-line: rgba(0, 0, 0, 0.07);
  --tb-tint-alpha: 0.09;
  --tb-ladder-raw-1: rgba(166, 36, 99, 1);
  --tb-ladder-raw-2: rgba(166, 36, 99, 0.72);
  --tb-ladder-raw-3: rgba(166, 36, 99, 0.52);
  --tb-ladder-raw-4: rgba(166, 36, 99, 0.38);
  --tb-ladder-raw-5: rgba(166, 36, 99, 0.28);
  /* Light ground: the fixed text colours below, darkened to AA (see lightReadableBlock). */
  --tb-gain-text: #0a5e38;
  --tb-loss-text: #a0121f;
  --tb-gold-text: #73560d;
  --tb-grade-s-accent: #88660f;
  --tb-grade-a-accent: #0e7c4a;
  --tb-grade-b-accent: #714ceb;
  --tb-grade-c-accent: #88660f;
  --tb-grade-d-accent: #d41829;
  --tb-grade-f-accent: #d41829;
  --tb-medal-1: #7a5c0e;
  --tb-medal-1-rgb: 122, 92, 14;
  --tb-medal-2: #4c6184;
  --tb-medal-2-rgb: 76, 97, 132;
  --tb-medal-3: #8b531d;
  --tb-medal-3-rgb: 139, 83, 29;
  --tb-muted: #816473; /* app: #9E8290 */
  --tb-muted-rgb: 129, 100, 115;
}

/* Obsidian (pro, dark): Black and gold */
html[data-theme="obsidian"],
[data-theme-scope="obsidian"] {
  color-scheme: dark;
  --tb-bg: #000000;
  --tb-bg2: #0B0B0D;
  --tb-bg3: #18181C;
  --tb-card: #0B0B0D;
  --tb-card2: #18181C;
  --tb-text: #F7F7F9;
  --tb-text2: #B6B6BE;
  --tb-muted: #73737D;
  --tb-primary: #D4A72C;
  --tb-primary-light: #F3DC8E;
  --tb-primary-dark: #97730F;
  --tb-accent: #FFE9A8;
  --tb-success: #1FD486;
  --tb-warning: #F5C54A;
  --tb-error: #FF5D6C;
  --tb-border: rgba(243,220,142,0.18);
  --tb-border-strong: rgba(243,220,142,0.36);
  --tb-primary-tint: rgba(212,167,44,0.18);
  --tb-primary-tint-weak: rgba(212,167,44,0.08);
  --tb-glow: rgba(255,233,168,0.45);
  --tb-on-primary: #1A1405;
  --tb-on-image: rgba(8,5,18,0.88);
  --tb-on-image-text: rgba(255,255,255,0.92);
  --tb-scrim: rgba(0,0,0,0.62);
  --tb-surface: rgba(255,255,255,0.05);
  --tb-surface-strong: rgba(255,255,255,0.14);
  --tb-grad-from: #D4A72C;
  --tb-grad-to: #F3DC8E;
  --tb-bg-rgb: 0, 0, 0;
  --tb-bg2-rgb: 11, 11, 13;
  --tb-bg3-rgb: 24, 24, 28;
  --tb-card-rgb: 11, 11, 13;
  --tb-card2-rgb: 24, 24, 28;
  --tb-text-rgb: 247, 247, 249;
  --tb-text2-rgb: 182, 182, 190;
  --tb-muted-rgb: 115, 115, 125;
  --tb-primary-rgb: 212, 167, 44;
  --tb-primary-light-rgb: 243, 220, 142;
  --tb-primary-dark-rgb: 151, 115, 15;
  --tb-accent-rgb: 255, 233, 168;
  --tb-success-rgb: 31, 212, 134;
  --tb-warning-rgb: 245, 197, 74;
  --tb-error-rgb: 255, 93, 108;
  --tb-grad-from-rgb: 212, 167, 44;
  --tb-grad-to-rgb: 243, 220, 142;
  --tb-grid-line: rgba(255, 255, 255, 0.05);
  --tb-tint-alpha: 0.12;
  --tb-ladder-raw-1: rgba(243, 220, 142, 1);
  --tb-ladder-raw-2: rgba(243, 220, 142, 0.72);
  --tb-ladder-raw-3: rgba(243, 220, 142, 0.52);
  --tb-ladder-raw-4: rgba(243, 220, 142, 0.38);
  --tb-ladder-raw-5: rgba(243, 220, 142, 0.28);
}

/* Dawn (pro, dark): Midnight at 5am */
html[data-theme="dawn"],
[data-theme-scope="dawn"] {
  color-scheme: dark;
  --tb-bg: #0A0818;
  --tb-bg2: #16102E;
  --tb-bg3: #271843;
  --tb-card: #16102E;
  --tb-card2: #271843;
  --tb-text: #FCF1F5;
  --tb-text2: #D4C0DC;
  --tb-muted: #8C7B9B;
  --tb-primary: #F5518A;
  --tb-primary-light: #FF93B4;
  --tb-primary-dark: #B62A5C;
  --tb-accent: #FFC46B;
  --tb-success: #1FD486;
  --tb-warning: #FFC53D;
  --tb-error: #FF5D6C;
  --tb-border: rgba(245,81,138,0.18);
  --tb-border-strong: rgba(245,81,138,0.36);
  --tb-primary-tint: rgba(245,81,138,0.18);
  --tb-primary-tint-weak: rgba(245,81,138,0.08);
  --tb-glow: rgba(255,196,107,0.45);
  --tb-on-primary: #FFFFFF;
  --tb-on-image: rgba(8,5,18,0.88);
  --tb-on-image-text: rgba(255,255,255,0.92);
  --tb-scrim: rgba(0,0,0,0.62);
  --tb-surface: rgba(255,255,255,0.05);
  --tb-surface-strong: rgba(255,255,255,0.14);
  --tb-grad-from: #7C5CFF;
  --tb-grad-to: #FFC46B;
  --tb-bg-rgb: 10, 8, 24;
  --tb-bg2-rgb: 22, 16, 46;
  --tb-bg3-rgb: 39, 24, 67;
  --tb-card-rgb: 22, 16, 46;
  --tb-card2-rgb: 39, 24, 67;
  --tb-text-rgb: 252, 241, 245;
  --tb-text2-rgb: 212, 192, 220;
  --tb-muted-rgb: 140, 123, 155;
  --tb-primary-rgb: 245, 81, 138;
  --tb-primary-light-rgb: 255, 147, 180;
  --tb-primary-dark-rgb: 182, 42, 92;
  --tb-accent-rgb: 255, 196, 107;
  --tb-success-rgb: 31, 212, 134;
  --tb-warning-rgb: 255, 197, 61;
  --tb-error-rgb: 255, 93, 108;
  --tb-grad-from-rgb: 124, 92, 255;
  --tb-grad-to-rgb: 255, 196, 107;
  --tb-grid-line: rgba(255, 255, 255, 0.05);
  --tb-tint-alpha: 0.12;
  --tb-ladder-raw-1: rgba(255, 147, 180, 1);
  --tb-ladder-raw-2: rgba(255, 147, 180, 0.72);
  --tb-ladder-raw-3: rgba(255, 147, 180, 0.52);
  --tb-ladder-raw-4: rgba(255, 147, 180, 0.38);
  --tb-ladder-raw-5: rgba(255, 147, 180, 0.28);
}

/* Porcelain (pro, light): Bone and ink */
html[data-theme="porcelain"],
[data-theme-scope="porcelain"] {
  color-scheme: light;
  --tb-bg: #F6F1E7;
  --tb-bg2: #FFFCF5;
  --tb-bg3: #EAE0CD;
  --tb-card: #FFFCF5;
  --tb-card2: #F3EDE0;
  --tb-text: #1C1813;
  --tb-text2: #58503F;
  --tb-muted: #8D8471;
  --tb-primary: #1F4E6B;
  --tb-primary-light: #123449;
  --tb-primary-dark: #0D2536;
  --tb-accent: #B07A2E;
  --tb-success: #217A5C;
  --tb-warning: #A8781A;
  --tb-error: #B23A3A;
  --tb-border: rgba(28,24,19,0.12);
  --tb-border-strong: rgba(176,122,46,0.38);
  --tb-primary-tint: rgba(31,78,107,0.18);
  --tb-primary-tint-weak: rgba(31,78,107,0.08);
  --tb-glow: rgba(176,122,46,0.3);
  --tb-on-primary: #FFFCF5;
  --tb-on-image: rgba(255,255,255,0.90);
  --tb-on-image-text: rgba(28,24,19,0.86);
  --tb-scrim: rgba(24,22,32,0.42);
  --tb-surface: rgba(17,17,24,0.045);
  --tb-surface-strong: rgba(17,17,24,0.09);
  --tb-grad-from: #1F4E6B;
  --tb-grad-to: #B07A2E;
  --tb-bg-rgb: 246, 241, 231;
  --tb-bg2-rgb: 255, 252, 245;
  --tb-bg3-rgb: 234, 224, 205;
  --tb-card-rgb: 255, 252, 245;
  --tb-card2-rgb: 243, 237, 224;
  --tb-text-rgb: 28, 24, 19;
  --tb-text2-rgb: 88, 80, 63;
  --tb-muted-rgb: 141, 132, 113;
  --tb-primary-rgb: 31, 78, 107;
  --tb-primary-light-rgb: 18, 52, 73;
  --tb-primary-dark-rgb: 13, 37, 54;
  --tb-accent-rgb: 176, 122, 46;
  --tb-success-rgb: 33, 122, 92;
  --tb-warning-rgb: 168, 120, 26;
  --tb-error-rgb: 178, 58, 58;
  --tb-grad-from-rgb: 31, 78, 107;
  --tb-grad-to-rgb: 176, 122, 46;
  --tb-grid-line: rgba(0, 0, 0, 0.07);
  --tb-tint-alpha: 0.09;
  --tb-ladder-raw-1: rgba(18, 52, 73, 1);
  --tb-ladder-raw-2: rgba(18, 52, 73, 0.72);
  --tb-ladder-raw-3: rgba(18, 52, 73, 0.52);
  --tb-ladder-raw-4: rgba(18, 52, 73, 0.38);
  --tb-ladder-raw-5: rgba(18, 52, 73, 0.28);
  /* Light ground: the fixed text colours below, darkened to AA (see lightReadableBlock). */
  --tb-gain-text: #0a5734;
  --tb-loss-text: #96111d;
  --tb-gold-text: #6e530c;
  --tb-grade-s-accent: #85640f;
  --tb-grade-a-accent: #0d7949;
  --tb-grade-b-accent: #704aeb;
  --tb-grade-c-accent: #85640f;
  --tb-grade-d-accent: #d21729;
  --tb-grade-f-accent: #d21729;
  --tb-medal-1: #7a5c0e;
  --tb-medal-1-rgb: 122, 92, 14;
  --tb-medal-2: #4d6286;
  --tb-medal-2-rgb: 77, 98, 134;
  --tb-medal-3: #8b531d;
  --tb-medal-3-rgb: 139, 83, 29;
  --tb-muted: #71695a; /* app: #8D8471 */
  --tb-muted-rgb: 113, 105, 90;
}

/* Gilded (pro, light): White and gold */
html[data-theme="gilded"],
[data-theme-scope="gilded"] {
  color-scheme: light;
  --tb-bg: #F7F5FA;
  --tb-bg2: #FFFFFF;
  --tb-bg3: #EBE6F3;
  --tb-card: #FFFFFF;
  --tb-card2: #F5F2FA;
  --tb-text: #1F1830;
  --tb-text2: #574B6E;
  --tb-muted: #8E85A3;
  --tb-primary: #6D3FD6;
  --tb-primary-light: #4C22A8;
  --tb-primary-dark: #3D1A87;
  --tb-accent: #B8942F;
  --tb-success: #17835F;
  --tb-warning: #A87A10;
  --tb-error: #C43D4F;
  --tb-border: rgba(31,24,48,0.12);
  --tb-border-strong: rgba(109,63,214,0.38);
  --tb-primary-tint: rgba(109,63,214,0.18);
  --tb-primary-tint-weak: rgba(109,63,214,0.08);
  --tb-glow: rgba(184,148,47,0.3);
  --tb-on-primary: #FFFFFF;
  --tb-on-image: rgba(255,255,255,0.90);
  --tb-on-image-text: rgba(31,24,48,0.86);
  --tb-scrim: rgba(24,22,32,0.42);
  --tb-surface: rgba(17,17,24,0.045);
  --tb-surface-strong: rgba(17,17,24,0.09);
  --tb-grad-from: #6D3FD6;
  --tb-grad-to: #E0BC4E;
  --tb-bg-rgb: 247, 245, 250;
  --tb-bg2-rgb: 255, 255, 255;
  --tb-bg3-rgb: 235, 230, 243;
  --tb-card-rgb: 255, 255, 255;
  --tb-card2-rgb: 245, 242, 250;
  --tb-text-rgb: 31, 24, 48;
  --tb-text2-rgb: 87, 75, 110;
  --tb-muted-rgb: 142, 133, 163;
  --tb-primary-rgb: 109, 63, 214;
  --tb-primary-light-rgb: 76, 34, 168;
  --tb-primary-dark-rgb: 61, 26, 135;
  --tb-accent-rgb: 184, 148, 47;
  --tb-success-rgb: 23, 131, 95;
  --tb-warning-rgb: 168, 122, 16;
  --tb-error-rgb: 196, 61, 79;
  --tb-grad-from-rgb: 109, 63, 214;
  --tb-grad-to-rgb: 224, 188, 78;
  --tb-grid-line: rgba(0, 0, 0, 0.07);
  --tb-tint-alpha: 0.09;
  --tb-ladder-raw-1: rgba(76, 34, 168, 1);
  --tb-ladder-raw-2: rgba(76, 34, 168, 0.72);
  --tb-ladder-raw-3: rgba(76, 34, 168, 0.52);
  --tb-ladder-raw-4: rgba(76, 34, 168, 0.38);
  --tb-ladder-raw-5: rgba(76, 34, 168, 0.28);
  /* Light ground: the fixed text colours below, darkened to AA (see lightReadableBlock). */
  --tb-gain-text: #0a5c37;
  --tb-loss-text: #9d111f;
  --tb-gold-text: #73560d;
  --tb-grade-s-accent: #8a670f;
  --tb-grade-a-accent: #0e7e4b;
  --tb-grade-b-accent: #734eeb;
  --tb-grade-c-accent: #8a670f;
  --tb-grade-d-accent: #d9182a;
  --tb-grade-f-accent: #d9182a;
  --tb-medal-1: #7d5d0e;
  --tb-medal-1-rgb: 125, 93, 14;
  --tb-medal-2: #4f6489;
  --tb-medal-2-rgb: 79, 100, 137;
  --tb-medal-3: #8f551d;
  --tb-medal-3-rgb: 143, 85, 29;
  --tb-muted: #72688a; /* app: #8E85A3 */
  --tb-muted-rgb: 114, 104, 138;
}

/* Ramps that follow the theme, and the old variable names mapped onto the new tokens. */
:root,
[data-theme-scope] {
  --tb-ladder-1: var(--tb-success);
  --tb-ladder-2: var(--tb-warning);
  --tb-ladder-3: var(--tb-accent);
  --tb-ladder-4: var(--tb-primary-light);
  --tb-ladder-below-alpha: 0.32;
  --primary-purple: var(--tb-primary);
  --primary: var(--tb-primary);
  --primary-dark: var(--tb-primary-dark);
  --primary-light: var(--tb-primary-light);
  --secondary-purple: var(--tb-primary-light);
  --accent-purple: var(--tb-accent);
  --accent-gold: var(--tb-warning);
  --primary-rgb: var(--tb-primary-rgb);
  --accent-rgb: var(--tb-accent-rgb);
  --bg-dark: var(--tb-bg);
  --bg-dark-secondary: var(--tb-bg2);
  --bg-dark-tertiary: var(--tb-bg3);
  --bg-tertiary: var(--tb-bg3);
  --bg-card: var(--tb-card);
  --hero-card-start: var(--tb-bg3);
  --hero-card-end: var(--tb-card);
  --floating-surface-rgb: var(--tb-card-rgb);
  --border: var(--tb-border);
  --text-primary: var(--tb-text);
  --text-secondary: var(--tb-text2);
  --text-muted: var(--tb-muted);
  --success: var(--tb-success);
  --warning: var(--tb-warning);
  --error: var(--tb-error);
  --info: var(--tb-primary-light);
  --glow-purple: rgba(var(--tb-primary-rgb), 0.45);
  --glow-purple-intense: var(--tb-glow);
  --swatch-primary: var(--tb-primary-rgb);
  --swatch-accent: var(--tb-accent-rgb);
  --swatch-surface-1: var(--tb-bg2-rgb);
  --swatch-surface-2: var(--tb-bg-rgb);
  --chart-line-primary: var(--tb-series-ungraded);
  --chart-fill-primary: rgba(var(--tb-series-ungraded-rgb), 0.15);
  --chart-line-alt-1: var(--tb-warning);
  --chart-fill-alt-1: rgba(var(--tb-warning-rgb), 0.15);
  --chart-line-alt-2: var(--tb-series-psa9);
  --chart-fill-alt-2: rgba(var(--tb-series-psa9-rgb), 0.15);
  --chart-line-alt-3: var(--tb-series-psa10);
  --chart-fill-alt-3: rgba(var(--tb-series-psa10-rgb), 0.15);
  --chart-positive: var(--tb-success);
  --chart-positive-fill: rgba(var(--tb-success-rgb), 0.1);
  --chart-negative: var(--tb-error);
  --chart-negative-fill: rgba(var(--tb-error-rgb), 0.1);
  --chart-axis: var(--tb-muted);
  --chart-grid: var(--tb-grid-line);
  --chart-border-soft: var(--tb-surface-strong);
  --chart-tooltip-bg: rgba(var(--tb-card-rgb), 0.96);
  --chart-tooltip-border: var(--tb-border-strong);
  --chart-tooltip-title: var(--tb-text);
  --chart-tooltip-body: var(--tb-text2);
  --chart-legend: var(--tb-text2);
  --chart-surface-border: var(--tb-card);
  --chart-palette-1: var(--tb-cat-1);
  --chart-palette-2: var(--tb-cat-2);
  --chart-palette-3: var(--tb-cat-3);
  --chart-palette-4: var(--tb-cat-4);
  --chart-palette-5: var(--tb-cat-5);
  --chart-palette-6: var(--tb-cat-6);
  --chart-palette-7: var(--tb-cat-7);
  --chart-palette-8: var(--tb-cat-8);
  --chart-palette-9: var(--tb-cat-9);
}

/* Fixed semantic ramps: the same on every theme, as in the app. */
:root {
  --tb-trend-up-from: #34d399;
  --tb-trend-up-to: #1fa05c;
  --tb-trend-up-fg: #06281a;
  --tb-trend-up-accent: #7df2bd;
  --tb-trend-flat-from: #8b93a7;
  --tb-trend-flat-to: #5b6376;
  --tb-trend-flat-fg: #0d1018;
  --tb-trend-flat-accent: #c3c9d6;
  --tb-trend-down-from: #ff8b96;
  --tb-trend-down-to: #d44656;
  --tb-trend-down-fg: #2a0810;
  --tb-trend-down-accent: #ff8b96;
  --tb-gain-text: #7df2bd;
  --tb-loss-text: #ff8b96;
  --tb-grade-s-from: #ffe48a;
  --tb-grade-s-to: #f5c54a;
  --tb-grade-s-fg: #1f1605;
  --tb-grade-s-accent: #ffd66e;
  --tb-grade-s-shadow: rgba(245,197,74,0.55);
  --tb-grade-a-from: #34d399;
  --tb-grade-a-to: #1fa05c;
  --tb-grade-a-fg: #06251a;
  --tb-grade-a-accent: #7df2bd;
  --tb-grade-a-shadow: rgba(31,160,92,0.55);
  --tb-grade-b-from: #c879ff;
  --tb-grade-b-to: #7c3aed;
  --tb-grade-b-fg: #fff;
  --tb-grade-b-accent: #d8ccff;
  --tb-grade-b-shadow: rgba(124,58,237,0.55);
  --tb-grade-c-from: #ffd05a;
  --tb-grade-c-to: #ff9d3d;
  --tb-grade-c-fg: #2a1505;
  --tb-grade-c-accent: #ffd66e;
  --tb-grade-c-shadow: rgba(255,157,61,0.55);
  --tb-grade-d-from: #ff8b96;
  --tb-grade-d-to: #e6364b;
  --tb-grade-d-fg: #fff;
  --tb-grade-d-accent: #ff8b96;
  --tb-grade-d-shadow: rgba(230,54,75,0.55);
  --tb-grade-f-from: #ff8b96;
  --tb-grade-f-to: #e6364b;
  --tb-grade-f-fg: #fff;
  --tb-grade-f-accent: #ff8b96;
  --tb-grade-f-shadow: rgba(230,54,75,0.55);
  --tb-series-ungraded: #6366F1;
  --tb-series-ungraded-rgb: 99, 102, 241;
  --tb-series-psa9: #F97316;
  --tb-series-psa9-rgb: 249, 115, 22;
  --tb-series-psa10: #34D399;
  --tb-series-psa10-rgb: 52, 211, 153;
  --tb-series-portfolio: #7C3AED;
  --tb-series-portfolio-rgb: 124, 58, 237;
  --tb-series-sp500: #1FD486;
  --tb-series-sp500-rgb: 31, 212, 134;
  --tb-split-graded: #FFD23F;
  --tb-split-ungraded: #C879FF;
  --tb-split-sealed: #1FD486;
  --tb-cat-1: #9D6CFF;
  --tb-cat-2: #EC4899;
  --tb-cat-3: #3B82F6;
  --tb-cat-4: #1FD486;
  --tb-cat-5: #F5C54A;
  --tb-cat-6: #FF5D6C;
  --tb-cat-7: #6366F1;
  --tb-cat-8: #14B8A6;
  --tb-cat-9: #FBBF24;
  --tb-cond-lp: rgba(214, 178, 62, 0.95);
  --tb-cond-mp: rgba(214, 132, 46, 0.95);
  --tb-cond-hp: rgba(206, 88, 52, 0.95);
  --tb-cond-dmg: rgba(198, 62, 62, 0.95);
  --tb-slab-psa-rgb: 200, 30, 30;
  --tb-slab-bgs-rgb: 180, 160, 60;
  --tb-slab-cgc-rgb: 0, 120, 200;
  --tb-slab-sgc-rgb: 120, 50, 170;
  --tb-slab-tag-rgb: 40, 160, 100;
  --tb-slab-ace-rgb: 220, 120, 30;
  --tb-gold: #F5C54A;
  --tb-gold-rgb: 245, 197, 74;
  --tb-gold-text: #FFD66E;
  --tb-gold-ink: #3A2810;
  --tb-volatility-range: linear-gradient(90deg, #FF5D6C, #F5C54A, #1FD486);
  --tb-discord: #5865F2;
  --tb-discord-fg: #FFFFFF;
  --tb-theme-lock-veil: rgba(0, 0, 0, 0.42);
  --tb-theme-lock-fg: rgba(255, 255, 255, 0.95);
  --tb-medal-1: #FFD25F;
  --tb-medal-1-rgb: 255, 210, 95;
  --tb-medal-2: #CBD3E1;
  --tb-medal-2-rgb: 203, 211, 225;
  --tb-medal-3: #E0A368;
  --tb-medal-3-rgb: 224, 163, 104;
  --tb-order-pending: #f5c54a;
  --tb-order-pending-rgb: 245, 197, 74;
  --tb-order-confirmed: #9d6cff;
  --tb-order-confirmed-rgb: 157, 108, 255;
  --tb-order-shipped: #52b9ff;
  --tb-order-shipped-rgb: 82, 185, 255;
  --tb-order-delivered: #1fd486;
  --tb-order-delivered-rgb: 31, 212, 134;
  --tb-order-cancelled: #ff5d6c;
  --tb-order-cancelled-rgb: 255, 93, 108;
  --tb-order-refunded: #ff5d6c;
  --tb-order-refunded-rgb: 255, 93, 108;
  --tb-tracking-icon: #8FD2FF;
  --tb-viewer-bg: rgba(0, 0, 0, 0.92);
  --tb-viewer-btn: rgba(255, 255, 255, 0.12);
  --tb-viewer-btn-hover: rgba(255, 255, 255, 0.22);
  --tb-viewer-fg: #FFFFFF;
  --tb-shadow-menu: 0 14px 38px rgba(0, 0, 0, 0.55); /* PortfolioMenu.tsx, sort menu */
  --tb-shadow-float: 0 8px 28px rgba(0, 0, 0, 0.35); /* FloatingTabBar.tsx, toasts */
  --tb-shadow-art: 0 6px 14px rgba(0, 0, 0, 0.45); /* card art, get.html fan */
}