/*
 * B-Side theme contract.
 *
 * Components should consume semantic variables from this file. The RGB
 * channel variants exist for Tailwind's opacity modifiers and Chart.js.
 * Classic is the production appearance that preceded the theme system.
 */
:root,
html[data-theme="classic"] {
    color-scheme: dark;

    /* Application surfaces */
    --theme-bg-app-rgb: 3 7 18;
    --theme-bg-app: rgb(var(--theme-bg-app-rgb));
    --theme-surface-primary-rgb: 17 24 39;
    --theme-surface-primary: rgb(var(--theme-surface-primary-rgb));
    --theme-surface-secondary-rgb: 31 41 55;
    --theme-surface-secondary: rgb(var(--theme-surface-secondary-rgb));
    --theme-surface-elevated-rgb: 55 65 81;
    --theme-surface-elevated: rgb(var(--theme-surface-elevated-rgb));
    --theme-surface-inset-rgb: 15 23 42;
    --theme-surface-inset: rgb(var(--theme-surface-inset-rgb));
    --theme-surface-deep-rgb: 11 18 32;
    --theme-surface-deep: rgb(var(--theme-surface-deep-rgb));
    --theme-surface-void-rgb: 2 6 23;
    --theme-surface-void: rgb(var(--theme-surface-void-rgb));
    --theme-surface-disabled-rgb: 75 85 99;
    --theme-surface-disabled: rgb(var(--theme-surface-disabled-rgb));
    --theme-surface-feature: #0b1220;
    --theme-surface-accent: #14213a;
    --theme-surface-accent-elevated: #172238;

    /* Borders and text */
    --theme-border-subtle-rgb: 31 41 55;
    --theme-border-subtle: rgb(var(--theme-border-subtle-rgb));
    --theme-border-default-rgb: 55 65 81;
    --theme-border-default: rgb(var(--theme-border-default-rgb));
    --theme-border-strong-rgb: 75 85 99;
    --theme-border-strong: rgb(var(--theme-border-strong-rgb));
    --theme-border-cool: #263247;
    --theme-border-overlay-rgb: 51 65 85;
    --theme-border-overlay: rgb(var(--theme-border-overlay-rgb));
    --theme-text-primary-rgb: 243 244 246;
    --theme-text-primary: rgb(var(--theme-text-primary-rgb));
    --theme-text-soft-rgb: 229 231 235;
    --theme-text-soft: rgb(var(--theme-text-soft-rgb));
    --theme-text-secondary-rgb: 209 213 219;
    --theme-text-secondary: rgb(var(--theme-text-secondary-rgb));
    --theme-text-muted-rgb: 156 163 175;
    --theme-text-muted: rgb(var(--theme-text-muted-rgb));
    --theme-text-disabled-rgb: 107 114 128;
    --theme-text-disabled: rgb(var(--theme-text-disabled-rgb));
    --theme-text-faint-rgb: 75 85 99;
    --theme-text-faint: rgb(var(--theme-text-faint-rgb));
    --theme-text-subdued: #64748b;
    --theme-text-bright: #f8fafc;
    --theme-text-heading: #f3f6fb;
    --theme-text-ui-muted: #7d8aa0;
    --theme-text-ui-secondary: #a9b5c7;
    --theme-text-steel: #94a3b8;
    --theme-absolute-white-rgb: 255 255 255;
    --theme-absolute-white: rgb(var(--theme-absolute-white-rgb));
    --theme-absolute-black-rgb: 0 0 0;
    --theme-absolute-black: rgb(var(--theme-absolute-black-rgb));

    /* Product accent */
    --theme-accent-soft-rgb: 138 167 232;
    --theme-accent-soft: rgb(var(--theme-accent-soft-rgb));
    --theme-accent-bright-rgb: 77 109 178;
    --theme-accent-bright: rgb(var(--theme-accent-bright-rgb));
    --theme-accent-rgb: 58 81 129;
    --theme-accent: rgb(var(--theme-accent-rgb));
    --theme-accent-deep-rgb: 38 52 81;
    --theme-accent-deep: rgb(var(--theme-accent-deep-rgb));
    --theme-accent-border-rgb: 69 105 168;
    --theme-accent-border: rgb(var(--theme-accent-border-rgb));
    --theme-accent-strong-border: #48679f;
    --theme-accent-contrast: #ffffff;
    --theme-focus-ring-rgb: 138 167 232;
    --theme-focus-ring: rgb(var(--theme-focus-ring-rgb));

    /* Status colours */
    --theme-success-soft-rgb: 187 247 208;
    --theme-success-soft: rgb(var(--theme-success-soft-rgb));
    --theme-success-light-rgb: 134 239 172;
    --theme-success-light: rgb(var(--theme-success-light-rgb));
    --theme-success-bright-rgb: 74 222 128;
    --theme-success-bright: rgb(var(--theme-success-bright-rgb));
    --theme-success-rgb: 34 197 94;
    --theme-success: rgb(var(--theme-success-rgb));
    --theme-success-deep-rgb: 22 163 74;
    --theme-success-deep: rgb(var(--theme-success-deep-rgb));
    --theme-success-darker-rgb: 21 128 61;
    --theme-success-darker: rgb(var(--theme-success-darker-rgb));
    --theme-success-surface-rgb: 20 83 45;
    --theme-success-surface: rgb(var(--theme-success-surface-rgb));
    --theme-success-inset-rgb: 5 46 22;
    --theme-success-inset: rgb(var(--theme-success-inset-rgb));
    --theme-warning-soft-rgb: 253 230 138;
    --theme-warning-soft: rgb(var(--theme-warning-soft-rgb));
    --theme-warning-light-rgb: 251 191 36;
    --theme-warning-light: rgb(var(--theme-warning-light-rgb));
    --theme-warning-rgb: 245 158 11;
    --theme-warning: rgb(var(--theme-warning-rgb));
    --theme-warning-deep-rgb: 217 119 6;
    --theme-warning-deep: rgb(var(--theme-warning-deep-rgb));
    --theme-warning-pale: #fcd34d;
    --theme-danger-soft-rgb: 254 202 202;
    --theme-danger-soft: rgb(var(--theme-danger-soft-rgb));
    --theme-danger-light-rgb: 252 165 165;
    --theme-danger-light: rgb(var(--theme-danger-light-rgb));
    --theme-danger-bright-rgb: 248 113 113;
    --theme-danger-bright: rgb(var(--theme-danger-bright-rgb));
    --theme-danger-rgb: 239 68 68;
    --theme-danger: rgb(var(--theme-danger-rgb));
    --theme-danger-deep-rgb: 220 38 38;
    --theme-danger-deep: rgb(var(--theme-danger-deep-rgb));
    --theme-danger-darker-rgb: 185 28 28;
    --theme-danger-darker: rgb(var(--theme-danger-darker-rgb));
    --theme-danger-surface-rgb: 127 29 29;
    --theme-danger-surface: rgb(var(--theme-danger-surface-rgb));
    --theme-danger-inset-rgb: 69 10 10;
    --theme-danger-inset: rgb(var(--theme-danger-inset-rgb));

    /* Established feature accents */
    --theme-aside-accent-rgb: 74 222 128;
    --theme-aside-accent: rgb(var(--theme-aside-accent-rgb));
    --theme-monthly-accent-rgb: 245 158 11;
    --theme-monthly-accent: rgb(var(--theme-monthly-accent-rgb));
    --theme-stats-purple-soft-rgb: 233 213 255;
    --theme-stats-purple-soft: rgb(var(--theme-stats-purple-soft-rgb));
    --theme-stats-purple-light-rgb: 216 180 254;
    --theme-stats-purple-light: rgb(var(--theme-stats-purple-light-rgb));
    --theme-stats-purple-rgb: 192 132 252;
    --theme-stats-purple: rgb(var(--theme-stats-purple-rgb));
    --theme-stats-purple-strong-rgb: 168 85 247;
    --theme-stats-purple-strong: rgb(var(--theme-stats-purple-strong-rgb));
    --theme-stats-purple-deep-rgb: 147 51 234;
    --theme-stats-purple-deep: rgb(var(--theme-stats-purple-deep-rgb));
    --theme-stats-period-soft-rgb: 165 243 252;
    --theme-stats-period-soft: rgb(var(--theme-stats-period-soft-rgb));
    --theme-stats-period-light-rgb: 103 232 249;
    --theme-stats-period-light: rgb(var(--theme-stats-period-light-rgb));
    --theme-stats-period-rgb: 34 211 238;
    --theme-stats-period: rgb(var(--theme-stats-period-rgb));
    --theme-stats-period-deep-rgb: 14 116 144;
    --theme-stats-period-deep: rgb(var(--theme-stats-period-deep-rgb));
    --theme-stats-habit-positive: #18c768;
    --theme-stats-habit-purple: #bf84ff;
    --theme-stats-habit-gold: #f5aa00;
    --theme-stats-habit-cool: #5b76b7;
    --theme-stats-habit-negative: #d77f8e;
    --theme-stats-card-blue: #6386cf;
    --theme-stats-card-green: #49dc83;
    --theme-stats-card-gold: #f5ae16;
    --theme-stats-card-purple: #c184ff;
    --theme-stats-card-cyan: #43d7ed;
    --theme-info-soft-rgb: 191 219 254;
    --theme-info-soft: rgb(var(--theme-info-soft-rgb));
    --theme-info-light-rgb: 147 197 253;
    --theme-info-light: rgb(var(--theme-info-light-rgb));
    --theme-info-rgb: 96 165 250;
    --theme-info: rgb(var(--theme-info-rgb));
    --theme-info-strong-rgb: 59 130 246;
    --theme-info-strong: rgb(var(--theme-info-strong-rgb));
    --theme-info-deep-rgb: 37 99 235;
    --theme-info-deep: rgb(var(--theme-info-deep-rgb));
    --theme-info-darker-rgb: 30 64 175;
    --theme-info-darker: rgb(var(--theme-info-darker-rgb));
    --theme-info-inset-rgb: 30 58 138;
    --theme-info-inset: rgb(var(--theme-info-inset-rgb));
    --theme-first-pass-rgb: 192 132 252;
    --theme-first-pass: rgb(var(--theme-first-pass-rgb));
    --theme-up-next-rgb: 245 158 11;
    --theme-up-next: rgb(var(--theme-up-next-rgb));
    --theme-up-next-hover-rgb: 251 191 36;
    --theme-up-next-hover: rgb(var(--theme-up-next-hover-rgb));
    --theme-impression-meh-rgb: 251 146 60;
    --theme-impression-meh: rgb(var(--theme-impression-meh-rgb));
    --theme-impression-meh-strong-rgb: 249 115 22;
    --theme-impression-meh-strong: rgb(var(--theme-impression-meh-strong-rgb));
    --theme-impression-smile-rgb: 163 230 53;
    --theme-impression-smile: rgb(var(--theme-impression-smile-rgb));
    --theme-impression-love-rgb: 251 113 133;
    --theme-impression-love: rgb(var(--theme-impression-love-rgb));
    --theme-impression-strong-rgb: 52 211 153;
    --theme-impression-strong: rgb(var(--theme-impression-strong-rgb));
    --theme-impression-strong-deep-rgb: 5 150 105;
    --theme-impression-strong-deep: rgb(var(--theme-impression-strong-deep-rgb));

    /* Score subsystem: thresholds and meaning remain application logic. */
    --theme-score-90-rgb: 74 222 128;
    --theme-score-90: rgb(var(--theme-score-90-rgb));
    --theme-score-80-rgb: 34 197 94;
    --theme-score-80: rgb(var(--theme-score-80-rgb));
    --theme-score-70-rgb: 22 163 74;
    --theme-score-70: rgb(var(--theme-score-70-rgb));
    --theme-score-60-rgb: 163 230 53;
    --theme-score-60: rgb(var(--theme-score-60-rgb));
    --theme-score-50-rgb: 250 204 21;
    --theme-score-50: rgb(var(--theme-score-50-rgb));
    --theme-score-40-rgb: 251 146 60;
    --theme-score-40: rgb(var(--theme-score-40-rgb));
    --theme-score-low-rgb: 248 113 113;
    --theme-score-low: rgb(var(--theme-score-low-rgb));
    --theme-score-perfect-rgb: 168 85 247;
    --theme-score-perfect: rgb(var(--theme-score-perfect-rgb));

    /* Charts and data visualisation */
    --theme-chart-grid-rgb: 55 65 81;
    --theme-chart-grid: rgb(var(--theme-chart-grid-rgb));
    --theme-chart-label-rgb: 156 163 175;
    --theme-chart-label: rgb(var(--theme-chart-label-rgb));
    --theme-chart-legend-rgb: 209 213 219;
    --theme-chart-legend: rgb(var(--theme-chart-legend-rgb));
    --theme-chart-line-rgb: 77 109 178;
    --theme-chart-line: rgb(var(--theme-chart-line-rgb));
    --theme-chart-line-fill: rgb(var(--theme-chart-line-rgb) / 0.12);
    --theme-chart-bar-rgb: 245 158 11;
    --theme-chart-bar: rgb(var(--theme-chart-bar-rgb));
    --theme-chart-bar-fill: rgb(var(--theme-chart-bar-rgb) / 0.28);
    --theme-chart-score-fill: rgb(var(--theme-score-90-rgb) / 0.12);
    --theme-chart-segment-1: #4d6db2;
    --theme-chart-segment-2: #a855f7;
    --theme-chart-segment-3: #f59e0b;
    --theme-chart-segment-4: #22c55e;
    --theme-chart-segment-5: #f87171;
    --theme-chart-segment-6: #38bdf8;
    --theme-chart-segment-7: #fb923c;
    --theme-chart-segment-8: #94a3b8;

    /* Chrome, overlays, shadows and scrolling */
    --theme-browser-chrome: #030712;
    --theme-overlay: rgb(var(--theme-absolute-black-rgb) / 0.70);
    --theme-overlay-soft: rgb(var(--theme-absolute-black-rgb) / 0.58);
    --theme-shadow-color-rgb: 0 0 0;
    --theme-scrollbar-thumb-rgb: 64 93 152;
    --theme-scrollbar-thumb: rgb(var(--theme-scrollbar-thumb-rgb));
    --theme-scrollbar-hover-rgb: 82 116 184;
    --theme-scrollbar-hover: rgb(var(--theme-scrollbar-hover-rgb));

    /* Complex established treatments kept as feature-level tokens. */
    --theme-home-page-background:
        radial-gradient(circle at 92% 0%, rgb(69 105 168 / 0.14), transparent 32rem),
        linear-gradient(180deg, #080f1c 0%, #060b14 100%);
    --theme-stats-page-background: var(--theme-home-page-background);
    --theme-stats-surface: #111a2a;
    --theme-stats-surface-deep: #070d18;
    --theme-stats-border: #26344b;
    --theme-stats-muted: #7f8da5;
    --theme-stats-highlight-background:
        radial-gradient(circle at 8% 12%, rgb(56 189 248 / 0.20), transparent 40%),
        linear-gradient(145deg, #111827, #07121e);
    --theme-stats-overview-background: rgb(12 21 35 / 0.86);
    --theme-stats-divider: rgb(38 52 75 / 0.80);
    --theme-stats-habits-background: linear-gradient(145deg, #111d2d, #0b1422);
    --theme-stats-habits-heading: #7fa3e8;
    --theme-stats-habit-card-background: #070e1a;
    --theme-stats-habit-card-border: rgb(91 116 151 / 0.42);
    --theme-stats-habit-card-label: #9eacc0;
    --theme-stats-negative-surface: rgb(244 63 94 / 0.08);

    /* Component treatments whose geometry is shared between themes. */
    --theme-artwork-placeholder-background:
        radial-gradient(circle at 30% 25%, rgb(111 149 223 / 0.42), transparent 30%),
        linear-gradient(135deg, #263d65, #1d273a 48%, #452f62);
    --theme-artwork-surface-deep: #070d1b;
    --theme-table-heading: #627087;
    --theme-row-divider: #1d293a;
    --theme-spotify-soft-text: #9be8b2;
    --theme-success-muted-text: #7fd89f;
    --theme-public-profile-glow:
        radial-gradient(circle at 78% 12%, rgb(65 76 145 / 0.20), transparent 36%),
        radial-gradient(circle at 52% 92%, rgb(56 42 105 / 0.18), transparent 42%);
    --theme-public-profile-overlay:
        linear-gradient(90deg, rgb(7 12 22 / 0.82), rgb(7 12 22 / 0.55) 58%, rgb(7 12 22 / 0.30));
    --theme-feature-selected-background: #121e33;
    --theme-feature-inset-background: #0d1523;
    --theme-feature-muted-text: #71809a;
    --theme-feature-primary-text: #d6e2f7;
    --theme-feature-secondary-text: #a9bce2;
    --theme-feature-pill-border: rgb(104 139 205 / 0.25);
    --theme-feature-pill-background: rgb(58 81 129 / 0.20);
    --theme-feature-pill-text: #9db5df;
    --theme-feature-faint-text: #56657b;
    --theme-feature-artwork-overlay:
        linear-gradient(90deg, #09111f 0%, rgb(9 17 31 / 0.92) 34%, rgb(9 17 31 / 0.53) 66%, rgb(9 17 31 / 0.31) 100%),
        linear-gradient(0deg, rgb(6 11 20 / 0.78), rgb(6 11 20 / 0.08) 68%);
    --theme-logo-background: linear-gradient(135deg, #173b63, #102f50);
    --theme-logo-shadow: 0 10px 20px rgb(23 59 99 / 0.35);
    --theme-logo-border: rgb(255 255 255 / 0.08);
    --theme-shelf-edge-background:
        linear-gradient(180deg, var(--theme-accent-deep) 0%, #172235 45%, var(--theme-surface-feature) 100%);
    --theme-shelf-hover-background: rgb(7 12 22 / 0.96);
    --theme-shelf-hover-border: rgb(100 116 139 / 0.28);
    --theme-listening-active-text: #e7eefc;
    --theme-listening-insertion-rgb: 111 157 232;
    --theme-listening-insertion: rgb(var(--theme-listening-insertion-rgb));
}

html[data-theme="cyan"] {
    color-scheme: dark;

    /* Core Cyan palette: #15191C, #1C2125, #232A2F, #303941, #57BED5. */
    --theme-bg-app-rgb: 21 25 28;
    --theme-bg-app: rgb(var(--theme-bg-app-rgb));
    --theme-surface-primary-rgb: 28 33 37;
    --theme-surface-primary: rgb(var(--theme-surface-primary-rgb));
    --theme-surface-secondary-rgb: 35 42 47;
    --theme-surface-secondary: rgb(var(--theme-surface-secondary-rgb));
    --theme-surface-elevated-rgb: 43 52 58;
    --theme-surface-elevated: rgb(var(--theme-surface-elevated-rgb));
    --theme-surface-inset-rgb: 23 28 32;
    --theme-surface-inset: rgb(var(--theme-surface-inset-rgb));
    --theme-surface-deep-rgb: 17 21 24;
    --theme-surface-deep: rgb(var(--theme-surface-deep-rgb));
    --theme-surface-void-rgb: 13 17 20;
    --theme-surface-void: rgb(var(--theme-surface-void-rgb));
    --theme-surface-disabled-rgb: 70 82 90;
    --theme-surface-disabled: rgb(var(--theme-surface-disabled-rgb));
    --theme-surface-feature: #182024;
    --theme-surface-accent: #1b343a;
    --theme-surface-accent-elevated: #203d44;

    --theme-border-subtle-rgb: 35 42 47;
    --theme-border-subtle: rgb(var(--theme-border-subtle-rgb));
    --theme-border-default-rgb: 48 57 65;
    --theme-border-default: rgb(var(--theme-border-default-rgb));
    --theme-border-strong-rgb: 70 82 90;
    --theme-border-strong: rgb(var(--theme-border-strong-rgb));
    --theme-border-cool: #344047;
    --theme-border-overlay-rgb: 59 72 80;
    --theme-border-overlay: rgb(var(--theme-border-overlay-rgb));

    --theme-text-primary-rgb: 241 245 246;
    --theme-text-primary: rgb(var(--theme-text-primary-rgb));
    --theme-text-soft-rgb: 226 232 234;
    --theme-text-soft: rgb(var(--theme-text-soft-rgb));
    --theme-text-secondary-rgb: 201 210 214;
    --theme-text-secondary: rgb(var(--theme-text-secondary-rgb));
    --theme-text-muted-rgb: 148 163 168;
    --theme-text-muted: rgb(var(--theme-text-muted-rgb));
    --theme-text-disabled-rgb: 112 125 131;
    --theme-text-disabled: rgb(var(--theme-text-disabled-rgb));
    --theme-text-faint-rgb: 82 97 104;
    --theme-text-faint: rgb(var(--theme-text-faint-rgb));
    --theme-text-subdued: #76868d;
    --theme-text-bright: #f8fafb;
    --theme-text-heading: #f1f5f6;
    --theme-text-ui-muted: #829097;
    --theme-text-ui-secondary: #b2bec2;
    --theme-text-steel: #9aaaae;

    --theme-accent-soft-rgb: 165 224 236;
    --theme-accent-soft: rgb(var(--theme-accent-soft-rgb));
    --theme-accent-bright-rgb: 116 206 224;
    --theme-accent-bright: rgb(var(--theme-accent-bright-rgb));
    --theme-accent-rgb: 87 190 213;
    --theme-accent: rgb(var(--theme-accent-rgb));
    --theme-accent-deep-rgb: 65 150 168;
    --theme-accent-deep: rgb(var(--theme-accent-deep-rgb));
    --theme-accent-border-rgb: 75 169 188;
    --theme-accent-border: rgb(var(--theme-accent-border-rgb));
    --theme-accent-strong-border: #55b5c9;
    --theme-accent-contrast: #10191c;
    --theme-focus-ring-rgb: 122 210 227;
    --theme-focus-ring: rgb(var(--theme-focus-ring-rgb));

    --theme-chart-grid-rgb: 48 57 65;
    --theme-chart-grid: rgb(var(--theme-chart-grid-rgb));
    --theme-chart-label-rgb: 148 163 168;
    --theme-chart-label: rgb(var(--theme-chart-label-rgb));
    --theme-chart-legend-rgb: 201 210 214;
    --theme-chart-legend: rgb(var(--theme-chart-legend-rgb));
    --theme-chart-line-rgb: 87 190 213;
    --theme-chart-line: rgb(var(--theme-chart-line-rgb));
    --theme-chart-line-fill: rgb(var(--theme-chart-line-rgb) / 0.12);

    --theme-browser-chrome: #15191c;
    --theme-scrollbar-thumb-rgb: 63 106 116;
    --theme-scrollbar-thumb: rgb(var(--theme-scrollbar-thumb-rgb));
    --theme-scrollbar-hover-rgb: 87 190 213;
    --theme-scrollbar-hover: rgb(var(--theme-scrollbar-hover-rgb));

    --theme-home-page-background:
        radial-gradient(circle at 92% 0%, rgb(87 190 213 / 0.11), transparent 32rem),
        linear-gradient(180deg, #181d20 0%, #15191c 100%);
    --theme-stats-page-background: var(--theme-home-page-background);
    --theme-stats-surface: #1c2125;
    --theme-stats-surface-deep: #111518;
    --theme-stats-border: #303941;
    --theme-stats-muted: #89979d;
    --theme-stats-highlight-background:
        radial-gradient(circle at 8% 12%, rgb(87 190 213 / 0.18), transparent 40%),
        linear-gradient(145deg, #1c2529, #151c1f);
    --theme-stats-overview-background: rgb(24 30 34 / 0.92);
    --theme-stats-divider: rgb(48 57 65 / 0.86);
    --theme-stats-habits-background: linear-gradient(145deg, #20282c, #171d20);
    --theme-stats-habits-heading: #83d5e5;
    --theme-stats-habit-card-background: #151a1d;
    --theme-stats-habit-card-border: rgb(76 101 108 / 0.48);
    --theme-stats-habit-card-label: #a3b0b5;

    --theme-artwork-placeholder-background:
        radial-gradient(circle at 30% 25%, rgb(87 190 213 / 0.34), transparent 30%),
        linear-gradient(135deg, #26424a, #223137 48%, #284047);
    --theme-artwork-surface-deep: #111619;
    --theme-table-heading: #7f9097;
    --theme-row-divider: #293238;
    --theme-public-profile-glow:
        radial-gradient(circle at 78% 12%, rgb(87 190 213 / 0.16), transparent 36%),
        radial-gradient(circle at 52% 92%, rgb(55 111 121 / 0.15), transparent 42%);
    --theme-public-profile-overlay:
        linear-gradient(90deg, rgb(17 22 25 / 0.86), rgb(17 22 25 / 0.58) 58%, rgb(17 22 25 / 0.32));
    --theme-feature-selected-background: #20363c;
    --theme-feature-inset-background: #171e21;
    --theme-feature-muted-text: #819197;
    --theme-feature-primary-text: #e0f1f4;
    --theme-feature-secondary-text: #b6d2d8;
    --theme-feature-pill-border: rgb(87 190 213 / 0.28);
    --theme-feature-pill-background: rgb(87 190 213 / 0.14);
    --theme-feature-pill-text: #a9dce6;
    --theme-feature-faint-text: #66777d;
    --theme-feature-artwork-overlay:
        linear-gradient(90deg, #12191c 0%, rgb(18 25 28 / 0.92) 34%, rgb(18 25 28 / 0.54) 66%, rgb(18 25 28 / 0.32) 100%),
        linear-gradient(0deg, rgb(13 17 20 / 0.78), rgb(13 17 20 / 0.08) 68%);
    --theme-logo-background: linear-gradient(135deg, #2d7e8e, #205c68);
    --theme-logo-shadow: 0 10px 20px rgb(20 66 75 / 0.32);
    --theme-shelf-edge-background:
        linear-gradient(180deg, #327b89 0%, #24424a 45%, #182024 100%);
    --theme-shelf-hover-background: rgb(17 22 25 / 0.96);
    --theme-shelf-hover-border: rgb(84 102 110 / 0.34);
    --theme-listening-active-text: #e4f3f6;
    --theme-listening-insertion-rgb: 87 190 213;
    --theme-listening-insertion: rgb(var(--theme-listening-insertion-rgb));
}

html[data-theme="cyan-light"] {
    color-scheme: light;

    /* Warm Cyan Light neutrals: soft ivory/stone surfaces with the cyan identity intact. */
    --theme-bg-app-rgb: 236 234 228;
    --theme-bg-app: rgb(var(--theme-bg-app-rgb));
    --theme-surface-primary-rgb: 246 244 239;
    --theme-surface-primary: rgb(var(--theme-surface-primary-rgb));
    --theme-surface-secondary-rgb: 230 226 217;
    --theme-surface-secondary: rgb(var(--theme-surface-secondary-rgb));
    --theme-surface-elevated-rgb: 250 248 244;
    --theme-surface-elevated: rgb(var(--theme-surface-elevated-rgb));
    --theme-surface-inset-rgb: 234 230 222;
    --theme-surface-inset: rgb(var(--theme-surface-inset-rgb));
    --theme-surface-deep-rgb: 230 226 217;
    --theme-surface-deep: rgb(var(--theme-surface-deep-rgb));
    --theme-surface-void-rgb: 230 226 217;
    --theme-surface-void: rgb(var(--theme-surface-void-rgb));
    --theme-surface-disabled-rgb: 210 204 193;
    --theme-surface-disabled: rgb(var(--theme-surface-disabled-rgb));
    --theme-surface-feature: #eae6de;
    --theme-surface-accent: #dcecef;
    --theme-surface-accent-elevated: #cee4e8;

    --theme-border-subtle-rgb: 230 226 217;
    --theme-border-subtle: rgb(var(--theme-border-subtle-rgb));
    --theme-border-default-rgb: 210 204 193;
    --theme-border-default: rgb(var(--theme-border-default-rgb));
    --theme-border-strong-rgb: 210 204 193;
    --theme-border-strong: rgb(var(--theme-border-strong-rgb));
    --theme-border-cool: #d2ccc1;
    --theme-border-overlay-rgb: 210 204 193;
    --theme-border-overlay: rgb(var(--theme-border-overlay-rgb));

    --theme-text-primary-rgb: 24 33 38;
    --theme-text-primary: rgb(var(--theme-text-primary-rgb));
    --theme-text-soft-rgb: 43 56 62;
    --theme-text-soft: rgb(var(--theme-text-soft-rgb));
    --theme-text-secondary-rgb: 70 86 94;
    --theme-text-secondary: rgb(var(--theme-text-secondary-rgb));
    --theme-text-muted-rgb: 101 115 123;
    --theme-text-muted: rgb(var(--theme-text-muted-rgb));
    --theme-text-disabled-rgb: 137 149 155;
    --theme-text-disabled: rgb(var(--theme-text-disabled-rgb));
    --theme-text-faint-rgb: 137 149 155;
    --theme-text-faint: rgb(var(--theme-text-faint-rgb));
    --theme-text-subdued: #718087;
    --theme-text-bright: #182126;
    --theme-text-heading: #182126;
    --theme-text-ui-muted: #65737b;
    --theme-text-ui-secondary: #46565e;
    --theme-text-steel: #65737b;

    --theme-accent-soft-rgb: 25 116 138;
    --theme-accent-soft: rgb(var(--theme-accent-soft-rgb));
    --theme-accent-bright-rgb: 25 116 138;
    --theme-accent-bright: rgb(var(--theme-accent-bright-rgb));
    --theme-accent-rgb: 25 116 138;
    --theme-accent: rgb(var(--theme-accent-rgb));
    --theme-accent-deep-rgb: 18 90 107;
    --theme-accent-deep: rgb(var(--theme-accent-deep-rgb));
    --theme-accent-border-rgb: 39 133 153;
    --theme-accent-border: rgb(var(--theme-accent-border-rgb));
    --theme-accent-strong-border: #19748a;
    --theme-accent-contrast: #ffffff;
    --theme-focus-ring-rgb: 25 116 138;
    --theme-focus-ring: rgb(var(--theme-focus-ring-rgb));

    /* Feature and status colours are darkened for contrast, without changing meaning. */
    --theme-success-soft-rgb: 25 136 95;
    --theme-success-soft: rgb(var(--theme-success-soft-rgb));
    --theme-success-light-rgb: 25 136 95;
    --theme-success-light: rgb(var(--theme-success-light-rgb));
    --theme-success-bright-rgb: 25 136 95;
    --theme-success-bright: rgb(var(--theme-success-bright-rgb));
    --theme-success-rgb: 25 136 95;
    --theme-success: rgb(var(--theme-success-rgb));
    --theme-success-deep-rgb: 25 136 95;
    --theme-success-deep: rgb(var(--theme-success-deep-rgb));
    --theme-success-darker-rgb: 25 136 95;
    --theme-success-darker: rgb(var(--theme-success-darker-rgb));
    --theme-success-surface-rgb: 217 245 227;
    --theme-success-surface: rgb(var(--theme-success-surface-rgb));
    --theme-success-inset-rgb: 196 235 209;
    --theme-success-inset: rgb(var(--theme-success-inset-rgb));
    --theme-warning-soft-rgb: 124 75 0;
    --theme-warning-soft: rgb(var(--theme-warning-soft-rgb));
    --theme-warning-light-rgb: 154 97 0;
    --theme-warning-light: rgb(var(--theme-warning-light-rgb));
    --theme-warning-rgb: 176 107 0;
    --theme-warning: rgb(var(--theme-warning-rgb));
    --theme-warning-deep-rgb: 138 82 0;
    --theme-warning-deep: rgb(var(--theme-warning-deep-rgb));
    --theme-warning-pale: #8a5700;
    --theme-danger-soft-rgb: 198 70 89;
    --theme-danger-soft: rgb(var(--theme-danger-soft-rgb));
    --theme-danger-light-rgb: 198 70 89;
    --theme-danger-light: rgb(var(--theme-danger-light-rgb));
    --theme-danger-bright-rgb: 198 70 89;
    --theme-danger-bright: rgb(var(--theme-danger-bright-rgb));
    --theme-danger-rgb: 198 70 89;
    --theme-danger: rgb(var(--theme-danger-rgb));
    --theme-danger-deep-rgb: 198 70 89;
    --theme-danger-deep: rgb(var(--theme-danger-deep-rgb));
    --theme-danger-darker-rgb: 198 70 89;
    --theme-danger-darker: rgb(var(--theme-danger-darker-rgb));
    --theme-danger-surface-rgb: 252 229 231;
    --theme-danger-surface: rgb(var(--theme-danger-surface-rgb));
    --theme-danger-inset-rgb: 247 210 214;
    --theme-danger-inset: rgb(var(--theme-danger-inset-rgb));

    --theme-aside-accent-rgb: 25 136 95;
    --theme-aside-accent: rgb(var(--theme-aside-accent-rgb));
    --theme-monthly-accent-rgb: 165 101 0;
    --theme-monthly-accent: rgb(var(--theme-monthly-accent-rgb));
    --theme-stats-purple-soft-rgb: 116 87 207;
    --theme-stats-purple-soft: rgb(var(--theme-stats-purple-soft-rgb));
    --theme-stats-purple-light-rgb: 116 87 207;
    --theme-stats-purple-light: rgb(var(--theme-stats-purple-light-rgb));
    --theme-stats-purple-rgb: 116 87 207;
    --theme-stats-purple: rgb(var(--theme-stats-purple-rgb));
    --theme-stats-purple-strong-rgb: 116 87 207;
    --theme-stats-purple-strong: rgb(var(--theme-stats-purple-strong-rgb));
    --theme-stats-purple-deep-rgb: 116 87 207;
    --theme-stats-purple-deep: rgb(var(--theme-stats-purple-deep-rgb));
    --theme-stats-period-soft-rgb: 20 105 124;
    --theme-stats-period-soft: rgb(var(--theme-stats-period-soft-rgb));
    --theme-stats-period-light-rgb: 23 123 143;
    --theme-stats-period-light: rgb(var(--theme-stats-period-light-rgb));
    --theme-stats-period-rgb: 20 129 151;
    --theme-stats-period: rgb(var(--theme-stats-period-rgb));
    --theme-stats-period-deep-rgb: 14 96 113;
    --theme-stats-period-deep: rgb(var(--theme-stats-period-deep-rgb));
    --theme-stats-habit-positive: #19885f;
    --theme-stats-habit-purple: #7457cf;
    --theme-stats-habit-gold: #9a6100;
    --theme-stats-habit-cool: #3f6fcb;
    --theme-stats-habit-negative: #c64659;
    --theme-stats-card-blue: #3f6fcb;
    --theme-stats-card-green: #19885f;
    --theme-stats-card-gold: #a36600;
    --theme-stats-card-purple: #7457cf;
    --theme-stats-card-cyan: #19748a;
    --theme-info-soft-rgb: 63 111 203;
    --theme-info-soft: rgb(var(--theme-info-soft-rgb));
    --theme-info-light-rgb: 63 111 203;
    --theme-info-light: rgb(var(--theme-info-light-rgb));
    --theme-info-rgb: 63 111 203;
    --theme-info: rgb(var(--theme-info-rgb));
    --theme-info-strong-rgb: 63 111 203;
    --theme-info-strong: rgb(var(--theme-info-strong-rgb));
    --theme-info-deep-rgb: 63 111 203;
    --theme-info-deep: rgb(var(--theme-info-deep-rgb));
    --theme-info-darker-rgb: 63 111 203;
    --theme-info-darker: rgb(var(--theme-info-darker-rgb));
    --theme-info-inset-rgb: 218 230 245;
    --theme-info-inset: rgb(var(--theme-info-inset-rgb));
    --theme-first-pass-rgb: 116 87 207;
    --theme-first-pass: rgb(var(--theme-first-pass-rgb));
    --theme-up-next-rgb: 181 118 6;
    --theme-up-next: rgb(var(--theme-up-next-rgb));
    --theme-up-next-hover-rgb: 181 118 6;
    --theme-up-next-hover: rgb(var(--theme-up-next-hover-rgb));
    --theme-impression-meh-rgb: 180 87 18;
    --theme-impression-meh: rgb(var(--theme-impression-meh-rgb));
    --theme-impression-meh-strong-rgb: 170 71 8;
    --theme-impression-meh-strong: rgb(var(--theme-impression-meh-strong-rgb));
    --theme-impression-smile-rgb: 93 125 16;
    --theme-impression-smile: rgb(var(--theme-impression-smile-rgb));
    --theme-impression-love-rgb: 190 55 84;
    --theme-impression-love: rgb(var(--theme-impression-love-rgb));
    --theme-impression-strong-rgb: 18 130 95;
    --theme-impression-strong: rgb(var(--theme-impression-strong-rgb));
    --theme-impression-strong-deep-rgb: 10 105 76;
    --theme-impression-strong-deep: rgb(var(--theme-impression-strong-deep-rgb));

    --theme-score-90-rgb: 19 138 72;
    --theme-score-90: rgb(var(--theme-score-90-rgb));
    --theme-score-80-rgb: 17 123 62;
    --theme-score-80: rgb(var(--theme-score-80-rgb));
    --theme-score-70-rgb: 14 106 53;
    --theme-score-70: rgb(var(--theme-score-70-rgb));
    --theme-score-60-rgb: 93 125 16;
    --theme-score-60: rgb(var(--theme-score-60-rgb));
    --theme-score-50-rgb: 152 107 0;
    --theme-score-50: rgb(var(--theme-score-50-rgb));
    --theme-score-40-rgb: 182 87 18;
    --theme-score-40: rgb(var(--theme-score-40-rgb));
    --theme-score-low-rgb: 197 58 69;
    --theme-score-low: rgb(var(--theme-score-low-rgb));
    --theme-score-perfect-rgb: 116 87 207;
    --theme-score-perfect: rgb(var(--theme-score-perfect-rgb));

    --theme-chart-grid-rgb: 210 204 193;
    --theme-chart-grid: rgb(var(--theme-chart-grid-rgb));
    --theme-chart-label-rgb: 101 115 123;
    --theme-chart-label: rgb(var(--theme-chart-label-rgb));
    --theme-chart-legend-rgb: 70 86 94;
    --theme-chart-legend: rgb(var(--theme-chart-legend-rgb));
    --theme-chart-line-rgb: 25 116 138;
    --theme-chart-line: rgb(var(--theme-chart-line-rgb));
    --theme-chart-line-fill: rgb(var(--theme-chart-line-rgb) / 0.12);
    --theme-chart-bar-rgb: 165 101 0;
    --theme-chart-bar: rgb(var(--theme-chart-bar-rgb));
    --theme-chart-bar-fill: rgb(var(--theme-chart-bar-rgb) / 0.22);
    --theme-chart-score-fill: rgb(var(--theme-score-90-rgb) / 0.12);
    --theme-chart-segment-1: #19748a;
    --theme-chart-segment-2: #7457cf;
    --theme-chart-segment-3: #a56500;
    --theme-chart-segment-4: #157a42;
    --theme-chart-segment-5: #c64659;
    --theme-chart-segment-6: #3f6fcb;
    --theme-chart-segment-7: #b65712;
    --theme-chart-segment-8: #65737b;

    --theme-browser-chrome: #eceae4;
    --theme-overlay: rgb(var(--theme-absolute-black-rgb) / 0.58);
    --theme-overlay-soft: rgb(var(--theme-absolute-black-rgb) / 0.44);
    --theme-shadow-color-rgb: 24 45 52;
    --theme-scrollbar-thumb-rgb: 151 176 182;
    --theme-scrollbar-thumb: rgb(var(--theme-scrollbar-thumb-rgb));
    --theme-scrollbar-hover-rgb: 25 116 138;
    --theme-scrollbar-hover: rgb(var(--theme-scrollbar-hover-rgb));

    --theme-home-page-background:
        radial-gradient(circle at 92% 0%, rgb(25 116 138 / 0.10), transparent 32rem),
        linear-gradient(180deg, #faf8f4 0%, #eceae4 100%);
    --theme-stats-page-background: var(--theme-home-page-background);
    --theme-stats-surface: #f6f4ef;
    --theme-stats-surface-deep: #eae6de;
    --theme-stats-border: #d2ccc1;
    --theme-stats-muted: #65737b;
    --theme-stats-highlight-background:
        radial-gradient(circle at 8% 12%, rgb(25 116 138 / 0.14), transparent 40%),
        linear-gradient(145deg, #f6f4ef, #e6e2d9);
    --theme-stats-overview-background: rgb(246 244 239 / 0.94);
    --theme-stats-divider: rgb(210 204 193 / 0.92);
    --theme-stats-habits-background: linear-gradient(145deg, #f6f4ef, #e6e2d9);
    --theme-stats-habits-heading: #19748a;
    --theme-stats-habit-card-background: #faf8f4;
    --theme-stats-habit-card-border: rgb(210 204 193 / 0.72);
    --theme-stats-habit-card-label: #65737b;
    --theme-stats-negative-surface: rgb(198 70 89 / 0.08);

    --theme-artwork-placeholder-background:
        radial-gradient(circle at 30% 25%, rgb(25 116 138 / 0.18), transparent 30%),
        linear-gradient(135deg, #d9e8ea, #e8eff0 48%, #cbdfe3);
    --theme-artwork-surface-deep: #e6e2d9;
    --theme-table-heading: #65737b;
    --theme-row-divider: #e6e2d9;
    --theme-spotify-soft-text: #176b3b;
    --theme-success-muted-text: #19885f;
    --theme-public-profile-glow:
        radial-gradient(circle at 78% 12%, rgb(25 116 138 / 0.16), transparent 36%),
        radial-gradient(circle at 52% 92%, rgb(86 133 143 / 0.12), transparent 42%);
    /* Public-profile and artwork scrims stay dark so overlaid identity remains readable. */
    --theme-public-profile-overlay:
        linear-gradient(90deg, rgb(18 29 33 / 0.86), rgb(18 29 33 / 0.58) 58%, rgb(18 29 33 / 0.30));
    --theme-feature-selected-background: #d8e9ec;
    --theme-feature-inset-background: #eae6de;
    --theme-feature-muted-text: #65737b;
    --theme-feature-primary-text: #182126;
    --theme-feature-secondary-text: #405b63;
    --theme-feature-pill-border: rgb(25 116 138 / 0.28);
    --theme-feature-pill-background: rgb(25 116 138 / 0.10);
    --theme-feature-pill-text: #125a6b;
    --theme-feature-faint-text: #89959b;
    --theme-feature-artwork-overlay:
        linear-gradient(90deg, rgb(14 24 28 / 0.92) 0%, rgb(14 24 28 / 0.82) 34%, rgb(14 24 28 / 0.50) 66%, rgb(14 24 28 / 0.28) 100%),
        linear-gradient(0deg, rgb(10 17 20 / 0.72), rgb(10 17 20 / 0.06) 68%);
    --theme-logo-background: linear-gradient(135deg, #23869b, #166477);
    --theme-logo-shadow: 0 10px 20px rgb(25 116 138 / 0.20);
    --theme-logo-border: rgb(25 116 138 / 0.16);
    --theme-shelf-edge-background:
        linear-gradient(180deg, #3f92a4 0%, #79aeb9 45%, #d6e4e6 100%);
    --theme-shelf-hover-background: rgb(246 244 239 / 0.98);
    --theme-shelf-hover-border: rgb(137 149 155 / 0.42);
    --theme-listening-active-text: #164f5d;
    --theme-listening-insertion-rgb: 25 116 138;
    --theme-listening-insertion: rgb(var(--theme-listening-insertion-rgb));
}

html,
body {
    background-color: var(--theme-bg-app);
}