/**
 * One colour vocabulary for both apps, in two settings.
 *
 * Generated from the colours the two apps actually draw — stylesheets, inline styles and
 * the markup the renderers build. Every perceptibly distinct shade keeps its own token
 * and its own light value, so moving a screen onto these tokens changes nothing until
 * `data-theme="dark"` appears on the root element.
 *
 * The dark values are derived per role rather than by inverting everything:
 *   - a surface keeps its order, so a card stays lighter than the page it sits on;
 *   - a border sits in a band above the surfaces, so a hairline is still a hairline;
 *   - text reflects, so the darkest ink in light becomes the brightest here.
 *
 * Two things are deliberately never themed: the brand colours, and the saturated
 * semantic solids (a filled red button reads correctly on either background, and
 * repainting it would change what the colour means).
 *
 * To change a colour, edit it here rather than reintroducing a hex in a stylesheet. A new
 * screen references these tokens; `bash scripts/test/check_theme_tokens.sh` catches a
 * stray hex and `python3 build/theme_tokens.py --fix <file>` rewrites it to its token.
 */

:root {
    color-scheme: light;

    /* Surfaces — a card stays lighter than its page, as in light */
    --sx-bg-00: #ffffff;
    --sx-bg-01: #f8fafc;   /* also #fafafa #f9fafb #f7fafc #f9f9f9 #f8f9fa */
    --sx-bg-02: #f1f5f9;   /* also #eef2f6 #f5f5f5 #f3f4f6 #f1f3f8 #edf2f7 */
    --sx-bg-03: #f3f0f0;   /* also #f0f0f0 #eeeeee */
    --sx-bg-04: #f0f0f8;
    --sx-bg-05: #e8eef5;   /* also #e9ecef */
    --sx-bg-06: #e2e8f0;   /* also #e6ebf1 #e5e7eb */
    --sx-bg-07: #e2e3e5;   /* also #dee2e6 */
    --sx-bg-08: #e0e0e0;
    --sx-bg-09: #cbd5e1;
    --sx-bg-10: #9ca3af;
    --sx-bg-11: #94a3b8;
    --sx-bg-12: #6c757d;   /* also #6b7280 */
    --sx-bg-13: #5a6268;
    --sx-bg-14: #545b62;
    --sx-bg-15: #475569;
    --sx-bg-16: #1e293b;
    --sx-bg-17: #1a1a2e;
    --sx-bg-18: #1a1a1a;
    --sx-bg-19: #0d1117;
    --sx-bg-20: #000000;

    /* Borders — a band above the surfaces so a hairline still reads */
    --sx-line-00: #ffffff;
    --sx-line-01: #f1f5f9;   /* also #eef2f6 #f5f5f5 #f3f4f6 #f0f4f8 #f1f3f5 #edf2f7 */
    --sx-line-02: #f3f3f3;   /* also #f0f0f0 */
    --sx-line-03: #eeeeee;   /* also #e9ecef */
    --sx-line-04: #e8eef4;   /* also #e8ecf4 #e8ecf1 */
    --sx-line-05: #e2e8f0;   /* also #e5e7eb */
    --sx-line-06: #dee2e6;
    --sx-line-07: #e0e0e0;   /* also #dddddd */
    --sx-line-08: #d1d5db;   /* also #ced4da */
    --sx-line-09: #cbd5e1;   /* also #cbd5e0 */
    --sx-line-10: #cccccc;   /* also #cfc9c9 */
    --sx-line-11: #aaaaaa;
    --sx-line-12: #9ca3af;
    --sx-line-13: #94a3b8;
    --sx-line-14: #6c757d;
    --sx-line-15: #545b62;
    --sx-line-16: #000000;

    /* Text — reflected: the darkest ink in light is the brightest here */
    --sx-ink-00: #d1d5db;
    --sx-ink-01: #cbd5e1;
    --sx-ink-02: #cccccc;
    --sx-ink-03: #bbbbbb;
    --sx-ink-04: #adb5bd;
    --sx-ink-05: #a0aec0;
    --sx-ink-06: #aaaaaa;
    --sx-ink-07: #9ca3af;
    --sx-ink-08: #94a3b8;
    --sx-ink-09: #999999;
    --sx-ink-10: #5e92c4;
    --sx-ink-11: #8c8c9e;
    --sx-ink-12: #888888;
    --sx-ink-13: #718096;
    --sx-ink-14: #6c757d;   /* also #6b7280 */
    --sx-ink-15: #64748b;
    --sx-ink-16: #636e72;
    --sx-ink-17: #666666;
    --sx-ink-18: #555555;
    --sx-ink-19: #4a5568;   /* also #4b5563 #475569 */
    --sx-ink-20: #2c5282;
    --sx-ink-21: #495057;
    --sx-ink-22: #4a4a6a;
    --sx-ink-23: #334155;   /* also #374151 */
    --sx-ink-24: #343a40;
    --sx-ink-25: #2d3748;
    --sx-ink-26: #1a365d;
    --sx-ink-27: #333333;
    --sx-ink-28: #1e293b;   /* also #1f2937 */
    --sx-ink-29: #212529;
    --sx-ink-30: #1a202c;
    --sx-ink-31: #1a1a2e;
    --sx-ink-32: #0f172a;   /* also #111827 */
    --sx-ink-33: #000000;

    /* Status families. The hue is the meaning, so dark keeps it and only
       moves lightness; a hover shade stays a different colour from its rest
       shade so the control still answers the pointer. */
    --sx-accent-ink-0: #4c51bf;
    --sx-accent-ink-1: #4338ca;
    --sx-accent-ink-2: #434190;
    --sx-accent-ink-3: #3c3f9e;
    --sx-accent-ink-4: #3730a3;
    --sx-accent-line-0: #c7d7fd;
    --sx-accent-line-1: #c7d2fe;
    --sx-accent-line-2: #d5d0e6;
    --sx-accent-line-3: #a5b4fc;
    --sx-accent-soft-0: #fafbff;
    --sx-accent-soft-1: #faf5ff;
    --sx-accent-soft-10: #e9d5ff;
    --sx-accent-soft-2: #f0f4ff;
    --sx-accent-soft-3: #f0f0f8;
    --sx-accent-soft-4: #e8f0fe;
    --sx-accent-soft-5: #fae8ff;
    --sx-accent-soft-6: #f3eaff;
    --sx-accent-soft-7: #ede9fe;
    --sx-accent-soft-8: #f3e5f5;
    --sx-accent-soft-9: #e0e7ff;
    --sx-danger-ink-0: #c53030;
    --sx-danger-ink-1: #b91c1c;
    --sx-danger-ink-2: #991b1b;
    --sx-danger-ink-3: #742a2a;
    --sx-danger-line-0: #fed7d7;
    --sx-danger-line-1: #fecaca;
    --sx-danger-line-2: #fca5a5;
    --sx-danger-line-3: #fc8181;
    --sx-danger-soft-0: #fff5f5;
    --sx-danger-soft-1: #ffeef0;
    --sx-danger-soft-2: #fce7f3;
    --sx-danger-soft-3: #fce4ec;
    --sx-danger-soft-4: #fee2e2;
    --sx-danger-soft-5: #f8d7da;
    --sx-danger-soft-6: #f0d0d0;
    --sx-info-ink-0: #2b6cb0;
    --sx-info-ink-1: #075985;
    --sx-info-ink-2: #0c5460;
    --sx-info-ink-3: #1e40af;
    --sx-info-line-0: #bae6fd;
    --sx-info-line-1: #bee3f8;
    --sx-info-line-10: #64b5f6;
    --sx-info-line-11: #06b6d4;
    --sx-info-line-2: #bbdefb;
    --sx-info-line-3: #bfdbfe;
    --sx-info-line-4: #b3d4fc;
    --sx-info-line-5: #7dd3fc;
    --sx-info-line-6: #90cdf4;
    --sx-info-line-7: #93c5fd;
    --sx-info-line-8: #31d2f2;
    --sx-info-line-9: #25cff2;
    --sx-info-soft-0: #f8f9ff;
    --sx-info-soft-1: #f0f9ff;
    --sx-info-soft-2: #e7f5ff;
    --sx-info-soft-3: #e0f2fe;
    --sx-info-soft-4: #dbeafe;
    --sx-info-soft-5: #cce5ff;
    --sx-info-soft-6: #bee5eb;
    --sx-info-soft-7: #b3d7ff;
    --sx-success-ink-0: #047857;
    --sx-success-ink-1: #276749;
    --sx-success-ink-2: #065f46;
    --sx-success-ink-3: #22543d;
    --sx-success-line-0: #a7f3d0;
    --sx-success-line-1: #86efac;
    --sx-success-line-2: #6ee7b7;
    --sx-success-line-3: #81c784;
    --sx-success-line-4: #22c55e;
    --sx-success-soft-0: #f0fff4;
    --sx-success-soft-1: #f0f8f0;
    --sx-success-soft-10: #c8e6c9;
    --sx-success-soft-2: #dcfce7;
    --sx-success-soft-3: #e8f5e9;
    --sx-success-soft-4: #c8ffc8;
    --sx-success-soft-5: #d1fae5;
    --sx-success-soft-6: #c6f6d5;
    --sx-success-soft-7: #bbf7d0;
    --sx-success-soft-8: #d4edda;
    --sx-success-soft-9: #d1e7dd;
    --sx-txt-00: #dc3545;
    --sx-txt-01: #198754;
    --sx-txt-04: #0d6efd;
    --sx-txt-06: #084298;
    --sx-txt-08: #155724;
    --sx-txt-09: #ef4444;
    --sx-txt-11: #dc2626;
    --sx-txt-12: #6f42c1;
    --sx-txt-13: #fd7e14;
    --sx-txt-15: #007bff;
    --sx-txt-16: #b02a37;
    --sx-txt-17: #667eea;
    --sx-txt-18: #78350f;
    --sx-txt-19: #1565c0;
    --sx-txt-20: #1976d2;
    --sx-txt-21: #e53e3e;
    --sx-txt-22: #721c24;
    --sx-txt-23: #10b981;
    --sx-txt-24: #4f46e5;
    --sx-txt-25: #6366f1;
    --sx-txt-26: #2563eb;
    --sx-txt-27: #2e7d32;
    --sx-txt-28: #3182ce;
    --sx-txt-31: #15803d;
    --sx-txt-32: #0369a1;
    --sx-txt-33: #388e3c;
    --sx-txt-36: #16a34a;
    --sx-txt-37: #1d4ed8;
    --sx-txt-38: #28a745;
    --sx-txt-39: #c62828;
    --sx-txt-40: #7b1fa2;
    --sx-txt-42: #3b82f6;
    --sx-txt-43: #166534;
    --sx-txt-44: #059669;
    --sx-txt-49: #975a16;
    --sx-txt-50: #38a169;
    --sx-txt-52: #004085;
    --sx-txt-53: #0a84ff;
    --sx-txt-55: #0e7490;
    --sx-txt-56: #7c3aed;
    --sx-txt-57: #ef6c00;
    --sx-txt-60: #b7791f;
    --sx-txt-61: #9a3412;
    --sx-txt-62: #d97706;
    --sx-txt-63: #0f5132;
    --sx-txt-64: #a16207;
    --sx-txt-65: #a15c07;
    --sx-txt-66: #9b2c2c;
    --sx-txt-67: #8a6d3b;
    --sx-txt-68: #e65100;
    --sx-txt-70: #f44336;
    --sx-txt-71: #5b21b6;
    --sx-txt-72: #713f12;
    --sx-txt-73: #14532d;
    --sx-txt-74: #9d174d;
    --sx-txt-75: #6d28d9;
    --sx-txt-76: #0056b3;
    --sx-txt-78: #d63031;
    --sx-txt-79: #e17055;
    --sx-txt-80: #d4a017;
    --sx-txt-81: #4a6cf7;
    --sx-txt-82: #984c0c;
    --sx-txt-83: #ea580c;
    --sx-txt-84: #ca8a04;
    --sx-txt-85: #854d0e;
    --sx-txt-86: #7e22ce;
    --sx-txt-87: #bb0000;
    --sx-txt-88: #008800;
    --sx-txt-89: #c2410c;
    --sx-txt-90: #744210;
    --sx-txt-91: #e83e8c;
    --sx-txt-92: #f57c00;
    --sx-txt-93: #d32f2f;
    --sx-txt-94: #4caf50;
    --sx-txt-95: #66bb6a;
    --sx-txt-96: #42a5f5;
    --sx-warning-ink-0: #b45309;
    --sx-warning-ink-1: #856404;
    --sx-warning-ink-2: #9c4221;
    --sx-warning-ink-3: #92400e;
    --sx-warning-ink-4: #7b341e;
    --sx-warning-line-0: #fde68a;
    --sx-warning-line-1: #fbd38d;
    --sx-warning-line-2: #fcd34d;
    --sx-warning-line-3: #ffca2c;
    --sx-warning-line-4: #ffc720;
    --sx-warning-line-5: #fbbf24;
    --sx-warning-line-6: #eab308;
    --sx-warning-line-7: #e0a800;
    --sx-warning-line-8: #ff9800;
    --sx-warning-soft-0: #fffff0;
    --sx-warning-soft-1: #fefce8;
    --sx-warning-soft-10: #ffe5d0;
    --sx-warning-soft-11: #fed7aa;
    --sx-warning-soft-2: #fff8f0;
    --sx-warning-soft-3: #fefcbf;
    --sx-warning-soft-4: #fff8e1;
    --sx-warning-soft-5: #fff3e6;
    --sx-warning-soft-6: #fff3cd;
    --sx-warning-soft-7: #ffedd5;
    --sx-warning-soft-8: #fef08a;
    --sx-warning-soft-9: #feebc8;

    /* The names the older stylesheets already declare, kept so their 234 call sites
       needed no edit; they resolve through the ramp above and inherit the dark values. */
    --sx-surface: var(--sx-bg-00);
    --sx-ground: var(--sx-bg-01);
    --sx-head: var(--sx-bg-02);
    --sx-line: var(--sx-line-05);
    --sx-line-strong: var(--sx-line-09);
    --sx-row-line: var(--sx-line-01);
    --sx-ink: var(--sx-ink-32);
    --sx-ink-soft: var(--sx-ink-23);
    --sx-muted: var(--sx-ink-15);
    --sx-faint: var(--sx-ink-08);
    /* Text on a solid yellow fill (#ffc107). Declared only here, never in the dark
       block: the fill keeps its colour in both themes, so its text must too — an ink
       token would be reflected to near-white on the same yellow. */
    --sx-on-warning: #0f172a;

    /* Depth. A shadow tuned for a white page is invisible on a dark one. */
    --sx-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --sx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --sx-overlay: rgba(15, 23, 42, 0.45);

    /* Handed to WaveSurfer by JS, which draws on a canvas and cannot read a stylesheet. */
    --sx-wave: #0A84FF;
    --sx-wave-progress: #007AFF;
    --sx-wave-cursor: #FFFFFF;
}

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

    /* Surfaces — a card stays lighter than its page, as in light */
    --sx-bg-00: #272d39;
    --sx-bg-01: #232935;
    --sx-bg-02: #1e2430;
    --sx-bg-03: #191f2b;
    --sx-bg-04: #151b27;
    --sx-bg-05: #101622;
    --sx-bg-06: #0f1521;
    --sx-bg-07: #0f1521;
    --sx-bg-08: #0f1521;
    --sx-bg-09: #0f1521;
    --sx-bg-10: #2c323e;
    --sx-bg-11: #2c323e;
    --sx-bg-12: #2c323e;
    --sx-bg-13: #2c323e;
    --sx-bg-14: #2c323e;
    --sx-bg-15: #2c323e;
    --sx-bg-16: #2c323e;
    --sx-bg-17: #2c323e;
    --sx-bg-18: #2c323e;
    --sx-bg-19: #2c323e;
    --sx-bg-20: #2c323e;

    /* Borders — a band above the surfaces so a hairline still reads */
    --sx-line-00: #5c616a;
    --sx-line-01: #595e67;
    --sx-line-02: #585d66;
    --sx-line-03: #565b64;
    --sx-line-04: #565b64;
    --sx-line-05: #545962;
    --sx-line-06: #525760;
    --sx-line-07: #525760;
    --sx-line-08: #4e535c;
    --sx-line-09: #4e535c;
    --sx-line-10: #4b5059;
    --sx-line-11: #40454e;
    --sx-line-12: #40454e;
    --sx-line-13: #40454e;
    --sx-line-14: #40454e;
    --sx-line-15: #40454e;
    --sx-line-16: #40454e;

    /* Text — reflected: the darkest ink in light is the brightest here */
    --sx-ink-00: #939599;
    --sx-ink-01: #939599;
    --sx-ink-02: #939599;
    --sx-ink-03: #989a9e;
    --sx-ink-04: #9b9da1;
    --sx-ink-05: #9fa1a5;
    --sx-ink-06: #a0a2a6;
    --sx-ink-07: #a3a5a9;
    --sx-ink-08: #a4a6aa;
    --sx-ink-09: #a8aaae;
    --sx-ink-10: #adafb3;
    --sx-ink-11: #adafb3;
    --sx-ink-12: #b0b2b6;
    --sx-ink-13: #b5b7bb;
    --sx-ink-14: #babcc0;
    --sx-ink-15: #bbbdc1;
    --sx-ink-16: #bec0c4;
    --sx-ink-17: #c2c4c8;
    --sx-ink-18: #cbcdd1;
    --sx-ink-19: #cbcdd1;
    --sx-ink-20: #cdcfd3;
    --sx-ink-21: #ced0d4;
    --sx-ink-22: #cfd1d5;
    --sx-ink-23: #d7d9dd;
    --sx-ink-24: #dbdde1;
    --sx-ink-25: #dcdee2;
    --sx-ink-26: #dddfe3;
    --sx-ink-27: #dee0e4;
    --sx-ink-28: #e5e7eb;
    --sx-ink-29: #e8eaee;
    --sx-ink-30: #ebedf1;
    --sx-ink-31: #edeff3;
    --sx-ink-32: #eef0f4;
    --sx-ink-33: #eef0f4;

    /* Status families */
    --sx-accent-ink-0: #c1bef0;
    --sx-accent-ink-1: #b2aeec;
    --sx-accent-ink-2: #a29fe8;
    --sx-accent-ink-3: #938fe5;
    --sx-accent-ink-4: #8580e1;
    --sx-accent-line-0: #323059;
    --sx-accent-line-1: #373562;
    --sx-accent-line-2: #3c3a6b;
    --sx-accent-line-3: #413f74;
    --sx-accent-soft-0: #19182f;
    --sx-accent-soft-1: #1a1931;
    --sx-accent-soft-10: #242243;
    --sx-accent-soft-2: #1b1a33;
    --sx-accent-soft-3: #1c1b35;
    --sx-accent-soft-4: #1e1c37;
    --sx-accent-soft-5: #1f1d39;
    --sx-accent-soft-6: #201e3b;
    --sx-accent-soft-7: #211f3d;
    --sx-accent-soft-8: #22203f;
    --sx-accent-soft-9: #232141;
    --sx-danger-ink-0: #f0bebe;
    --sx-danger-ink-1: #eba9a9;
    --sx-danger-ink-2: #e69494;
    --sx-danger-ink-3: #e18080;
    --sx-danger-line-0: #593030;
    --sx-danger-line-1: #623535;
    --sx-danger-line-2: #6b3a3a;
    --sx-danger-line-3: #743f3f;
    --sx-danger-soft-0: #2e1919;
    --sx-danger-soft-1: #311b1b;
    --sx-danger-soft-2: #351c1c;
    --sx-danger-soft-3: #381e1e;
    --sx-danger-soft-4: #3b2020;
    --sx-danger-soft-5: #3e2222;
    --sx-danger-soft-6: #422323;
    --sx-info-ink-0: #bad4f4;
    --sx-info-ink-1: #a4c6f0;
    --sx-info-ink-2: #8eb8ed;
    --sx-info-ink-3: #78abe9;
    --sx-info-line-0: #2d425c;
    --sx-info-line-1: #2e445e;
    --sx-info-line-10: #3a5475;
    --sx-info-line-11: #3b5678;
    --sx-info-line-2: #304661;
    --sx-info-line-3: #314763;
    --sx-info-line-4: #324966;
    --sx-info-line-5: #334b68;
    --sx-info-line-6: #354d6b;
    --sx-info-line-7: #364f6d;
    --sx-info-line-8: #375170;
    --sx-info-line-9: #385373;
    --sx-info-soft-0: #172230;
    --sx-info-soft-1: #182433;
    --sx-info-soft-2: #192636;
    --sx-info-soft-3: #1b2839;
    --sx-info-soft-4: #1c2a3c;
    --sx-info-soft-5: #1e2c3f;
    --sx-info-soft-6: #1f2f42;
    --sx-info-soft-7: #203145;
    --sx-success-ink-0: #c6e8dc;
    --sx-success-ink-1: #b4e0d0;
    --sx-success-ink-2: #a1d9c5;
    --sx-success-ink-3: #8fd1b9;
    --sx-success-line-0: #2e5a4a;
    --sx-success-line-1: #326150;
    --sx-success-line-2: #366855;
    --sx-success-line-3: #396f5b;
    --sx-success-line-4: #3d7661;
    --sx-success-soft-0: #173027;
    --sx-success-soft-1: #183228;
    --sx-success-soft-10: #214437;
    --sx-success-soft-2: #19342a;
    --sx-success-soft-3: #1a362c;
    --sx-success-soft-4: #1b382d;
    --sx-success-soft-5: #1c3a2f;
    --sx-success-soft-6: #1d3c30;
    --sx-success-soft-7: #1e3e32;
    --sx-success-soft-8: #1f4034;
    --sx-success-soft-9: #204235;
    --sx-txt-00: #eb8c95;
    --sx-txt-01: #8deabf;
    --sx-txt-04: #87b1f0;
    --sx-txt-06: #87b1f0;
    --sx-txt-08: #92e5a5;
    --sx-txt-09: #f08787;
    --sx-txt-11: #ec8a8a;
    --sx-txt-12: #b199de;
    --sx-txt-13: #f0b787;
    --sx-txt-15: #87b9f0;
    --sx-txt-16: #e5929a;
    --sx-txt-17: #889bef;
    --sx-txt-18: #f0ad87;
    --sx-txt-19: #87b8f0;
    --sx-txt-20: #87bcf0;
    --sx-txt-21: #ef8888;
    --sx-txt-22: #e4929a;
    --sx-txt-23: #87f0cd;
    --sx-txt-24: #8e88ee;
    --sx-txt-25: #8789f0;
    --sx-txt-26: #87a8f0;
    --sx-txt-27: #9cdb9f;
    --sx-txt-28: #92bde5;
    --sx-txt-31: #8becaf;
    --sx-txt-32: #87cbf0;
    --sx-txt-33: #9ddaa0;
    --sx-txt-36: #88efae;
    --sx-txt-37: #88a3ef;
    --sx-txt-38: #92e5a5;
    --sx-txt-39: #e88e8e;
    --sx-txt-40: #ce8de9;
    --sx-txt-42: #87aff0;
    --sx-txt-43: #90e7b1;
    --sx-txt-44: #87f0cf;
    --sx-txt-49: #eebe89;
    --sx-txt-50: #9bdcb9;
    --sx-txt-52: #87b9f0;
    --sx-txt-53: #87bbf0;
    --sx-txt-55: #87d9f0;
    --sx-txt-56: #ad87f0;
    --sx-txt-57: #f0b687;
    --sx-txt-60: #ebc48b;
    --sx-txt-61: #f0a187;
    --sx-txt-62: #f0bf87;
    --sx-txt-63: #8deabe;
    --sx-txt-64: #f0c587;
    --sx-txt-65: #f0c187;
    --sx-txt-66: #e19696;
    --sx-txt-67: #dac39d;
    --sx-txt-68: #f0ac87;
    --sx-txt-70: #f08e87;
    --sx-txt-71: #b18cea;
    --sx-txt-72: #ecb98a;
    --sx-txt-73: #92e5b3;
    --sx-txt-74: #ee89b2;
    --sx-txt-75: #b18ceb;
    --sx-txt-76: #87b9f0;
    --sx-txt-78: #e98e8f;
    --sx-txt-79: #eb9e8c;
    --sx-txt-80: #f0d387;
    --sx-txt-81: #879bf0;
    --sx-txt-82: #f0b787;
    --sx-txt-83: #f0ab87;
    --sx-txt-84: #f0ce87;
    --sx-txt-85: #f0be87;
    --sx-txt-86: #bf8bec;
    --sx-txt-87: #f08787;
    --sx-txt-88: #87f087;
    --sx-txt-89: #f0a587;
    --sx-txt-90: #efbb88;
    --sx-txt-91: #f087b7;
    --sx-txt-92: #f0bc87;
    --sx-txt-93: #e78f8f;
    --sx-txt-94: #9dda9f;
    --sx-txt-95: #9ddaa0;
    --sx-txt-96: #87c1f0;
    --sx-warning-ink-0: #f4dfba;
    --sx-warning-ink-1: #f1d7a9;
    --sx-warning-ink-2: #eecf99;
    --sx-warning-ink-3: #ecc788;
    --sx-warning-ink-4: #e9c078;
    --sx-warning-line-0: #604c29;
    --sx-warning-line-1: #634e2b;
    --sx-warning-line-2: #67512c;
    --sx-warning-line-3: #6b542e;
    --sx-warning-line-4: #6e572f;
    --sx-warning-line-5: #725a31;
    --sx-warning-line-6: #765d32;
    --sx-warning-line-7: #796034;
    --sx-warning-line-8: #7d6336;
    --sx-warning-soft-0: #332815;
    --sx-warning-soft-1: #342915;
    --sx-warning-soft-10: #46371c;
    --sx-warning-soft-11: #48381d;
    --sx-warning-soft-2: #362b16;
    --sx-warning-soft-3: #382c17;
    --sx-warning-soft-4: #3a2d18;
    --sx-warning-soft-5: #3c2f19;
    --sx-warning-soft-6: #3e3019;
    --sx-warning-soft-7: #40321a;
    --sx-warning-soft-8: #42341b;
    --sx-warning-soft-9: #44351c;

    --sx-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --sx-shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6);
    --sx-overlay: rgba(0, 0, 0, 0.62);

    --sx-wave: #4da3ff;
    --sx-wave-progress: #7cc0ff;
    --sx-wave-cursor: #e6edf3;
}

/* The page itself: both apps paint a light body of their own and neither knows about
   themes. */
:root[data-theme="dark"] body {
    background: var(--sx-ground);
    color: var(--sx-ink);
}

/* Artwork keeps its own colours; only the frame around it moves. Stated because a dark
   theme that dims photographs and spectrograms looks broken. */
:root[data-theme="dark"] img,
:root[data-theme="dark"] canvas,
:root[data-theme="dark"] video {
    filter: none;
}

/**
 * The theme switch: an icon beside the bell, with no frame of its own.
 *
 * Drawn as a pill at first, to match the language switch — but that put a box around a
 * single glyph and read as a control demanding attention. The bell next to it is a bare
 * icon, and so is this.
 */
.sx-theme-toggle {
    display: inline-flex;
    align-items: center;
}

.sx-theme-toggle button {
    padding: 4px 6px;
    font-size: 16px;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.sx-theme-toggle button:hover {
    opacity: 1;
}

/* The admin stylesheet draws a tooltip for every `[title]`, which the browser then draws
   again underneath. One is enough on this control. */
.sx-theme-toggle button[title]:hover::after {
    content: none;
}

/**
 * Bootstrap's colour utilities, under the dark theme.
 *
 * `data-bs-theme="dark"` recolours Bootstrap's components but leaves the utilities alone:
 * `.bg-light` means "the light colour", not "the background", so it stays #f8f9fa on a
 * dark page — which is how a white band ended up across the labelling app. `!important`
 * here is required to beat Bootstrap's own.
 */
:root[data-theme="dark"] .bg-light {
    background-color: var(--sx-ground) !important;
}

:root[data-theme="dark"] .bg-white {
    background-color: var(--sx-surface) !important;
}

:root[data-theme="dark"] .table-light > :not(caption) > * > * {
    background-color: var(--sx-head) !important;
    color: var(--sx-ink) !important;
}

:root[data-theme="dark"] .text-dark {
    color: var(--sx-ink) !important;
}

/* Bootstrap's muted is tuned for a white page; on a dark one it drops below readable. */
:root[data-theme="dark"] .text-muted {
    color: var(--sx-muted) !important;
}

/**
 * Frames.
 *
 * On a white page a card is told apart from its ground by a shadow and two units of
 * lightness. Neither survives a dark theme — a shadow on a dark ground is invisible, and
 * the two units are imperceptible — so the panels lost their outlines entirely. A
 * hairline does the job the shadow did.
 */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .ds-card,
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .section,
:root[data-theme="dark"] .content-section,
:root[data-theme="dark"] .tab-content,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu {
    border: 1px solid var(--sx-line);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu {
    box-shadow: var(--sx-shadow-lg);
}