/* =====================================================================
   Design tokens of the admin panel. SINGLE SOURCE OF TRUTH for every
   colour and gradient in the application (dark + light).

   Loaded from src/index.html as a plain stylesheet, before the Angular
   bundle, so every global stylesheet, component stylesheet, inline
   component style and stand-alone asset page can reference these tokens.
   The PrimeNG theme (assets/primeng-theme/theme.css) and the pages of
   assets/public use them too ; the code editors and the diagram (a
   canvas) read the steps with getComputedStyle, the printed reports with
   themeToken() (src/app/shared/theme-tokens.ts).

   ---------------------------------------------------------------------
   ANOTHER BRAND (white label)
     1. Logos, favicons, the mark of the loaders : replace the files of
        src/assets/brand/, keeping their names.
     2. Colours : change the steps of the brand ramps below — BLUE (35 is
        the primary), TEAL (the bridge of the brand gradients), GREEN (27
        is the accent) — and SLATE too if the surfaces should not be navy.
        Change the -rgb twin of every step you change : `npm test` names
        each twin which says another colour than its step.
     3. Run `node scripts/brand-icons.js` : the icons of the pages are
        images, which can not read these variables ; it writes the brand
        steps into them (`npm test` says when they are out of step).

   ---------------------------------------------------------------------
   LAYERS
     1. PALETTE   --am-<family>-<lightness>   raw, theme-independent values.
                  <lightness> is the HSL L of the colour, so the ramps are
                  self-describing: --am-slate-12 is darker than --am-slate-74.
                  Every entry also ships an  --am-<family>-<L>-rgb  channel
                  triple, for  rgba(var(--am-blue-35-rgb), .18).
     2. GRADIENTS --am-grad-*                 the recurring brand washes.
     3. SEMANTIC  --surface-* --content-* --border-* --brand-* --accent-*
                  role tokens; these are the ones application code should
                  use. They are re-pointed per theme under html.LIGHT.
     4. LEGACY    the token names the app already used, kept as aliases.

   Do not add raw hex/rgb values anywhere else in the app — add a palette
   step here and reference it.
   ===================================================================== */

:root {

    /* ---- SLATE — Navy-tinted neutral ramp — every surface, hairline and body-text step,
       dark canvas (05) through pure white (100). The legacy flat greys
       (#1d1d1d #282828 #3b3b3b #4f4f4f #808080 #b0b0b0 #e6e6e6) were folded
       onto this ramp so nothing reads warm-grey over the navy canvas. ---- */
    --am-slate-00: #000000;
    --am-slate-00-rgb: 0, 0, 0;
    --am-slate-02: #0a0a0a;
    --am-slate-02-rgb: 10, 10, 10;
    --am-slate-03: #06090f;
    --am-slate-03-rgb: 6, 9, 15;
    --am-slate-04: #04080e;
    --am-slate-04-rgb: 4, 8, 14;
    --am-slate-05: #080c12;
    --am-slate-05-rgb: 8, 12, 18;
    --am-slate-06: #0b1320;
    --am-slate-06-rgb: 11, 19, 32;
    --am-slate-07: #0a1018;
    --am-slate-07-rgb: 10, 16, 24;
    --am-slate-07b: #0d1117;
    --am-slate-07b-rgb: 13, 17, 23;
    --am-slate-07c: #0e1318;
    --am-slate-07c-rgb: 14, 19, 24;
    --am-slate-08: #151515;
    --am-slate-08-rgb: 21, 21, 21;
    --am-slate-08b: #141414;
    --am-slate-08b-rgb: 20, 20, 20;
    --am-slate-09: #0e1726;
    --am-slate-09-rgb: 14, 23, 38;
    --am-slate-09b: #11151f;
    --am-slate-09b-rgb: 17, 21, 31;
    --am-slate-09c: #0d1423;
    --am-slate-09c-rgb: 13, 20, 35;
    --am-slate-10: #0f1622;
    --am-slate-10-rgb: 15, 22, 34;
    --am-slate-10b: #131920;
    --am-slate-10b-rgb: 19, 25, 32;
    --am-slate-11: #0c1626;
    --am-slate-11-rgb: 12, 22, 38;
    --am-slate-11b: #161b22;
    --am-slate-11b-rgb: 22, 27, 34;
    --am-slate-11c: #111827;
    --am-slate-11c-rgb: 17, 24, 39;
    --am-slate-12: #141c29;
    --am-slate-12-rgb: 20, 28, 41;
    --am-slate-12b: #111c2d;
    --am-slate-12b-rgb: 17, 28, 45;
    --am-slate-12c: #0c2033;
    --am-slate-12c-rgb: 12, 32, 51;
    --am-slate-12d: #1e1e1e;
    --am-slate-12d-rgb: 30, 30, 30;
    --am-slate-13: #0f172a;
    --am-slate-13-rgb: 15, 23, 42;
    --am-slate-13b: #1c2128;
    --am-slate-13b-rgb: 28, 33, 40;
    --am-slate-13c: #16202e;
    --am-slate-13c-rgb: 22, 32, 46;
    --am-slate-14: #1b2738;
    --am-slate-14-rgb: 27, 39, 56;
    --am-slate-15: #1a2536;
    --am-slate-15-rgb: 26, 37, 54;
    --am-slate-15b: #252525;
    --am-slate-15b-rgb: 37, 37, 37;
    --am-slate-15c: #252526;
    --am-slate-15c-rgb: 37, 37, 38;
    --am-slate-15d: #1b2330;
    --am-slate-15d-rgb: 27, 35, 48;
    --am-slate-15e: #21262d;
    --am-slate-15e-rgb: 33, 38, 45;
    --am-slate-16: #1b2636;
    --am-slate-16-rgb: 27, 38, 54;
    --am-slate-16b: #1e2433;
    --am-slate-16b-rgb: 30, 36, 51;
    --am-slate-16c: #22272e;
    --am-slate-16c-rgb: 34, 39, 46;
    --am-slate-17: #16273d;
    --am-slate-17-rgb: 22, 39, 61;
    --am-slate-17b: #1e293b;
    --am-slate-17b-rgb: 30, 41, 59;
    --am-slate-17c: #1f2937;
    --am-slate-17c-rgb: 31, 41, 55;
    --am-slate-18: #1a2738;
    --am-slate-18-rgb: 26, 39, 56;
    --am-slate-18b: #1b2942;
    --am-slate-18b-rgb: 27, 41, 66;
    --am-slate-19: #1c2a3d;
    --am-slate-19-rgb: 28, 42, 61;
    --am-slate-19b: #252b3b;
    --am-slate-19b-rgb: 37, 43, 59;
    --am-slate-20: #22324a;
    --am-slate-20-rgb: 34, 50, 74;
    --am-slate-20b: #2d333b;
    --am-slate-20b-rgb: 45, 51, 59;
    --am-slate-21: #2b3340;
    --am-slate-21-rgb: 43, 51, 64;
    --am-slate-21b: #23344a;
    --am-slate-21b-rgb: 35, 52, 74;
    --am-slate-21c: #30363d;
    --am-slate-21c-rgb: 48, 54, 61;
    --am-slate-21d: #303539;
    --am-slate-21d-rgb: 48, 53, 57;
    --am-slate-22: #24334a;
    --am-slate-22-rgb: 36, 51, 74;
    --am-slate-23: #2f3641;
    --am-slate-23-rgb: 47, 54, 65;
    --am-slate-23b: #3b3b3b;
    --am-slate-23b-rgb: 59, 59, 59;
    --am-slate-23c: #3a3a3a;
    --am-slate-23c-rgb: 58, 58, 58;
    --am-slate-24: #2a3a52;
    --am-slate-24-rgb: 42, 58, 82;
    --am-slate-25: #2a3d57;
    --am-slate-25-rgb: 42, 61, 87;
    --am-slate-25b: #404040;
    --am-slate-25b-rgb: 64, 64, 64;
    --am-slate-26: #343e4d;
    --am-slate-26-rgb: 52, 62, 77;
    --am-slate-27: #3b4048;
    --am-slate-27-rgb: 59, 64, 72;
    --am-slate-28: #3a4256;
    --am-slate-28-rgb: 58, 66, 86;
    --am-slate-28b: #424a4e;
    --am-slate-28b-rgb: 66, 74, 78;
    --am-slate-29: #33455f;
    --am-slate-29-rgb: 51, 69, 95;
    --am-slate-30: #4b4b4b;
    --am-slate-30-rgb: 75, 75, 75;
    --am-slate-30b: #3d4b5e;
    --am-slate-30b-rgb: 61, 75, 94;
    --am-slate-31: #4e4e4e;
    --am-slate-31-rgb: 78, 78, 78;
    --am-slate-32: #4f4f4f;
    --am-slate-32-rgb: 79, 79, 79;
    --am-slate-33: #484f58;
    --am-slate-33-rgb: 72, 79, 88;
    --am-slate-34: #4a5563;
    --am-slate-34-rgb: 74, 85, 99;
    --am-slate-36: #445874;
    --am-slate-36-rgb: 68, 88, 116;
    --am-slate-37: #515c6a;
    --am-slate-37-rgb: 81, 92, 106;
    --am-slate-41: #686868;
    --am-slate-41-rgb: 104, 104, 104;
    --am-slate-43: #5a6a82;
    --am-slate-43-rgb: 90, 106, 130;
    --am-slate-44: #707070;
    --am-slate-44-rgb: 112, 112, 112;
    --am-slate-45: #5d6f86;
    --am-slate-45-rgb: 93, 111, 134;
    --am-slate-46: #6a737d;
    --am-slate-46-rgb: 106, 115, 125;
    --am-slate-50: #687c97;
    --am-slate-50-rgb: 104, 124, 151;
    --am-slate-51: #6f8095;
    --am-slate-51-rgb: 111, 128, 149;
    --am-slate-52: #848484;
    --am-slate-52-rgb: 132, 132, 132;
    --am-slate-53: #888888;
    --am-slate-53-rgb: 136, 136, 136;
    --am-slate-53b: #7a8694;
    --am-slate-53b-rgb: 122, 134, 148;
    --am-slate-55: #7789a1;
    --am-slate-55-rgb: 119, 137, 161;
    --am-slate-56: #909090;
    --am-slate-56-rgb: 144, 144, 144;
    --am-slate-57: #939393;
    --am-slate-57-rgb: 147, 147, 147;
    --am-slate-58: #7b8fab;
    --am-slate-58-rgb: 123, 143, 171;
    --am-slate-58b: #8b949e;
    --am-slate-58b-rgb: 139, 148, 158;
    --am-slate-59: #8895a7;
    --am-slate-59-rgb: 136, 149, 167;
    --am-slate-60: #7f93ae;
    --am-slate-60-rgb: 127, 147, 174;
    --am-slate-61: #969696;
    --am-slate-61-rgb: 150, 150, 150;
    --am-slate-63: #a8ac94;
    --am-slate-63-rgb: 168, 172, 148;
    --am-slate-64: #94a3b8;
    --am-slate-64-rgb: 148, 163, 184;
    --am-slate-65: #8ea3bd;
    --am-slate-65-rgb: 142, 163, 189;
    --am-slate-66: #9aa6b5;
    --am-slate-66-rgb: 154, 166, 181;
    --am-slate-67: #9da5b4;
    --am-slate-67-rgb: 157, 165, 180;
    --am-slate-68: #9aabc2;
    --am-slate-68-rgb: 154, 171, 194;
    --am-slate-70: #b3b3b3;
    --am-slate-70-rgb: 179, 179, 179;
    --am-slate-71: #a9b5c4;
    --am-slate-71-rgb: 169, 181, 196;
    --am-slate-72: #b9b9b9;
    --am-slate-72-rgb: 185, 185, 185;
    --am-slate-73: #a9b7ca;
    --am-slate-73-rgb: 169, 183, 202;
    --am-slate-74: #adbacd;
    --am-slate-74-rgb: 173, 186, 205;
    --am-slate-76: #aebfd6;
    --am-slate-76-rgb: 174, 191, 214;
    --am-slate-79: #bcc8d8;
    --am-slate-79-rgb: 188, 200, 216;
    --am-slate-80: #b3c9e6;
    --am-slate-80-rgb: 179, 201, 230;
    --am-slate-81: #c9d1d9;
    --am-slate-81-rgb: 201, 209, 217;
    --am-slate-82: #d3d3d3;
    --am-slate-82-rgb: 211, 211, 211;
    --am-slate-83: #c7d2e0;
    --am-slate-83-rgb: 199, 210, 224;
    --am-slate-83b: #c9d4e0;
    --am-slate-83b-rgb: 201, 212, 224;
    --am-slate-84: #d4d4d4;
    --am-slate-84-rgb: 212, 212, 212;
    --am-slate-85: #d0d7e2;
    --am-slate-85-rgb: 208, 215, 226;
    --am-slate-85b: #cdd6e2;
    --am-slate-85b-rgb: 205, 214, 226;
    --am-slate-86: #d7dae0;
    --am-slate-86-rgb: 215, 218, 224;
    --am-slate-87: #d4deea;
    --am-slate-87-rgb: 212, 222, 234;
    --am-slate-87b: #d3dde8;
    --am-slate-87b-rgb: 211, 221, 232;
    --am-slate-88: #d6e2f2;
    --am-slate-88-rgb: 214, 226, 242;
    --am-slate-89: #dde4ee;
    --am-slate-89-rgb: 221, 228, 238;
    --am-slate-90: #dbe4f0;
    --am-slate-90-rgb: 219, 228, 240;
    --am-slate-90b: #e6e6e6;
    --am-slate-90b-rgb: 230, 230, 230;
    --am-slate-91: #cfe4fb;
    --am-slate-91-rgb: 207, 228, 251;
    --am-slate-91b: #e1e7ef;
    --am-slate-91b-rgb: 225, 231, 239;
    --am-slate-92: #dbe8fa;
    --am-slate-92-rgb: 219, 232, 250;
    --am-slate-92b: #e3eaf3;
    --am-slate-92b-rgb: 227, 234, 243;
    --am-slate-93: #e8e8e8;
    --am-slate-93-rgb: 232, 232, 232;
    --am-slate-93b: #e6edf3;
    --am-slate-93b-rgb: 230, 237, 243;
    --am-slate-93c: #e7edf4;
    --am-slate-93c-rgb: 231, 237, 244;
    --am-slate-94: #eef3fa;
    --am-slate-94-rgb: 238, 243, 250;
    --am-slate-94b: #e9eff6;
    --am-slate-94b-rgb: 233, 239, 246;
    --am-slate-95: #eef2f7;
    --am-slate-95-rgb: 238, 242, 247;
    --am-slate-95b: #f3f3f3;
    --am-slate-95b-rgb: 243, 243, 243;
    --am-slate-95c: #eef3f8;
    --am-slate-95c-rgb: 238, 243, 248;
    --am-slate-95d: #eaf1fa;
    --am-slate-95d-rgb: 234, 241, 250;
    --am-slate-95e: #f0f3f6;
    --am-slate-95e-rgb: 240, 243, 246;
    --am-slate-96: #eaf1fb;
    --am-slate-96-rgb: 234, 241, 251;
    --am-slate-96b: #f0f6fc;
    --am-slate-96b-rgb: 240, 246, 252;
    --am-slate-97: #f6f8fb;
    --am-slate-97-rgb: 246, 248, 251;
    --am-slate-97b: #f3f6fa;
    --am-slate-97b-rgb: 243, 246, 250;
    --am-slate-97c: #f2f8fc;
    --am-slate-97c-rgb: 242, 248, 252;
    --am-slate-97d: #f3f7fc;
    --am-slate-97d-rgb: 243, 247, 252;
    --am-slate-97e: #f4f7fb;
    --am-slate-97e-rgb: 244, 247, 251;
    --am-slate-98: #f8f9fa;
    --am-slate-98-rgb: 248, 249, 250;
    --am-slate-99: #fbfcfe;
    --am-slate-99-rgb: 251, 252, 254;
    --am-slate-100: #ffffff;
    --am-slate-100-rgb: 255, 255, 255;

    /* ---- BLUE — Brand blue — the primary of the brand. 35 is the logo blue, 66 the bright
       on-dark accent. ---- */
    --am-blue-10: #001f33;
    --am-blue-10-rgb: 0, 31, 51;
    --am-blue-14: #0c1e3c;
    --am-blue-14-rgb: 12, 30, 60;
    --am-blue-15: #0c2040;
    --am-blue-15-rgb: 12, 32, 64;
    --am-blue-19: #12324f;
    --am-blue-19-rgb: 18, 50, 79;
    --am-blue-20: #0b2e5c;
    --am-blue-20-rgb: 11, 46, 92;
    --am-blue-23: #0e3a68;
    --am-blue-23-rgb: 14, 58, 104;
    --am-blue-25: #001080;
    --am-blue-25-rgb: 0, 16, 128;
    --am-blue-26: #004085;
    --am-blue-26-rgb: 0, 64, 133;
    --am-blue-27: #0c3e78;
    --am-blue-27-rgb: 12, 62, 120;
    --am-blue-28: #1f4a6e;
    --am-blue-28-rgb: 31, 74, 110;
    --am-blue-29: #0a4685;
    --am-blue-29-rgb: 10, 70, 133;
    --am-blue-33: #0e639c;
    --am-blue-33-rgb: 14, 99, 156;
    --am-blue-34: #0451a5;
    --am-blue-34-rgb: 4, 81, 165;
    --am-blue-35: #0c53a4;
    --am-blue-35-rgb: 12, 83, 164;
    --am-blue-36: #3b567c;
    --am-blue-36-rgb: 59, 86, 124;
    --am-blue-37: #245f9f;
    --am-blue-37-rgb: 36, 95, 159;
    --am-blue-38: #4a5f7d;
    --am-blue-38-rgb: 74, 95, 125;
    --am-blue-39: #1667b0;
    --am-blue-39-rgb: 22, 103, 176;
    --am-blue-40: #0e5fbd;
    --am-blue-40-rgb: 14, 95, 189;
    --am-blue-41: #476880;
    --am-blue-41-rgb: 71, 104, 128;
    --am-blue-42: #007acc;
    --am-blue-42-rgb: 0, 122, 204;
    --am-blue-45: #2f6fb8;
    --am-blue-45-rgb: 47, 111, 184;
    --am-blue-46: #5d7290;
    --am-blue-46-rgb: 93, 114, 144;
    --am-blue-47: #1d4ed8;
    --am-blue-47-rgb: 29, 78, 216;
    --am-blue-48: #097bed;
    --am-blue-48-rgb: 9, 123, 237;
    --am-blue-49: #5c7799;
    --am-blue-49-rgb: 92, 119, 153;
    --am-blue-49b: #2e78cc;
    --am-blue-49b-rgb: 46, 120, 204;
    --am-blue-50: #0000ff;
    --am-blue-50-rgb: 0, 0, 255;
    --am-blue-51: #4f7bb3;
    --am-blue-51-rgb: 79, 123, 179;
    --am-blue-52: #0d6efd;
    --am-blue-52-rgb: 13, 110, 253;
    --am-blue-53: #3a8fd0;
    --am-blue-53-rgb: 58, 143, 208;
    --am-blue-58: #4a9fe0;
    --am-blue-58-rgb: 74, 159, 224;
    --am-blue-59: #569cd6;
    --am-blue-59-rgb: 86, 156, 214;
    --am-blue-60: #3b82f6;
    --am-blue-60-rgb: 59, 130, 246;
    --am-blue-60b: #6f96c4;
    --am-blue-60b-rgb: 111, 150, 196;
    --am-blue-61: #38bdf8;
    --am-blue-61-rgb: 56, 189, 248;
    --am-blue-62: #7e97b5;
    --am-blue-62-rgb: 126, 151, 181;
    --am-blue-63: #5c9cdd;
    --am-blue-63-rgb: 92, 156, 221;
    --am-blue-66: #61afef;
    --am-blue-66-rgb: 97, 175, 239;
    --am-blue-67: #569cff;
    --am-blue-67-rgb: 86, 156, 255;
    --am-blue-68: #60a5fa;
    --am-blue-68-rgb: 96, 165, 250;
    --am-blue-76: #9ec3e8;
    --am-blue-76-rgb: 158, 195, 232;
    --am-blue-77: #8cc6ff;
    --am-blue-77-rgb: 140, 198, 255;
    --am-blue-80: #9cdcfe;
    --am-blue-80-rgb: 156, 220, 254;
    --am-blue-81: #9fd0ff;
    --am-blue-81-rgb: 159, 208, 255;
    --am-blue-86: #b8daff;
    --am-blue-86-rgb: 184, 218, 255;
    --am-blue-90: #cce5ff;
    --am-blue-90-rgb: 204, 229, 255;

    /* ---- CYAN — Cyan / info-teal. ---- */
    --am-cyan-19: #18424a;
    --am-cyan-19-rgb: 24, 66, 74;
    --am-cyan-32: #2f6473;
    --am-cyan-32-rgb: 47, 100, 115;
    --am-cyan-37: #267f99;
    --am-cyan-37-rgb: 38, 127, 153;
    --am-cyan-41: #17a2b8;
    --am-cyan-41-rgb: 23, 162, 184;
    --am-cyan-43: #06b6d4;
    --am-cyan-43-rgb: 6, 182, 212;
    --am-cyan-53: #22d3ee;
    --am-cyan-53-rgb: 34, 211, 238;

    /* ---- TEAL — Teal — the blue→green bridge used in the brand gradients. ---- */
    --am-teal-17: #0a4f47;
    --am-teal-17-rgb: 10, 79, 71;
    --am-teal-23: #0a6a5f;
    --am-teal-23-rgb: 10, 106, 95;
    --am-teal-26: #1d6a5a;
    --am-teal-26-rgb: 29, 106, 90;
    --am-teal-29: #0e8576;
    --am-teal-29-rgb: 14, 133, 118;
    --am-teal-30: #138575;
    --am-teal-30-rgb: 19, 133, 117;
    --am-teal-45: #3da79c;
    --am-teal-45-rgb: 61, 167, 156;
    --am-teal-55: #4ec9b0;
    --am-teal-55-rgb: 78, 201, 176;
    --am-teal-56: #4fd1c5;
    --am-teal-56-rgb: 79, 209, 197;

    /* ---- GREEN — Brand green — 27 is the logo green, 44 the "success" accent. ---- */
    --am-green-05: #08120c;
    --am-green-05-rgb: 8, 18, 12;
    --am-green-13: #133024;
    --am-green-13-rgb: 19, 48, 36;
    --am-green-18: #00632d;
    --am-green-18-rgb: 0, 99, 45;
    --am-green-19: #006400;
    --am-green-19-rgb: 0, 100, 0;
    --am-green-20: #1a4d33;
    --am-green-20-rgb: 26, 77, 51;
    --am-green-21: #155724;
    --am-green-21-rgb: 21, 87, 36;
    --am-green-25: #008000;
    --am-green-25-rgb: 0, 128, 0;
    --am-green-27: #00893f;
    --am-green-27-rgb: 0, 137, 63;
    --am-green-28: #1d6d44;
    --am-green-28-rgb: 29, 109, 68;
    --am-green-29: #098658;
    --am-green-29-rgb: 9, 134, 88;
    --am-green-31: #00a04a;
    --am-green-31-rgb: 0, 160, 74;
    --am-green-33: #1d8a4e;
    --am-green-33-rgb: 29, 138, 78;
    --am-green-34: #3c6e50;
    --am-green-34-rgb: 60, 110, 80;
    --am-green-35: #149a54;
    --am-green-35-rgb: 20, 154, 84;
    --am-green-38: #28986e;
    --am-green-38-rgb: 40, 152, 110;
    --am-green-39: #26a05d;
    --am-green-39-rgb: 38, 160, 93;
    --am-green-40: #2ea043;
    --am-green-40-rgb: 46, 160, 67;
    --am-green-42: #2fa862;
    --am-green-42-rgb: 47, 168, 98;
    --am-green-43: #26b47f;
    --am-green-43-rgb: 38, 180, 127;
    --am-green-44: #2fb36a;
    --am-green-44-rgb: 47, 179, 106;
    --am-green-47: #6a9955;
    --am-green-47-rgb: 106, 153, 85;
    --am-green-49: #4caf50;
    --am-green-49-rgb: 76, 175, 80;
    --am-green-51: #5fa98c;
    --am-green-51-rgb: 95, 169, 140;
    --am-green-52: #34d399;
    --am-green-52-rgb: 52, 211, 153;
    --am-green-53: #10ff33;
    --am-green-53-rgb: 16, 255, 51;
    --am-green-54: #4dbc82;
    --am-green-54-rgb: 77, 188, 130;
    --am-green-56: #4fd08a;
    --am-green-56-rgb: 79, 208, 138;
    --am-green-58: #56d364;
    --am-green-58-rgb: 86, 211, 100;
    --am-green-65: #6fdcaa;
    --am-green-65-rgb: 111, 220, 170;
    --am-green-67: #6ee7b7;
    --am-green-67-rgb: 110, 231, 183;
    --am-green-69: #9ec3b5;
    --am-green-69-rgb: 158, 195, 181;
    --am-green-71: #8fd9b6;
    --am-green-71-rgb: 143, 217, 182;
    --am-green-73: #b5cea8;
    --am-green-73-rgb: 181, 206, 168;
    --am-green-74: #9fdaa8;
    --am-green-74-rgb: 159, 218, 168;
    --am-green-79: #a6ecc4;
    --am-green-79-rgb: 166, 236, 196;
    --am-green-80: #b7e0c6;
    --am-green-80-rgb: 183, 224, 198;
    --am-green-83: #b7f0d3;
    --am-green-83-rgb: 183, 240, 211;
    --am-green-84: #c3e6cb;
    --am-green-84-rgb: 195, 230, 203;
    --am-green-88: #d4edda;
    --am-green-88-rgb: 212, 237, 218;
    --am-green-95: #eef5f0;
    --am-green-95-rgb: 238, 245, 240;
    --am-green-96: #eef7f1;
    --am-green-96-rgb: 238, 247, 241;

    /* ---- LIME — Lime — syntax highlighting, chart + category series. ---- */
    --am-lime-55: #a3e635;
    --am-lime-55-rgb: 163, 230, 53;
    --am-lime-62: #98c379;
    --am-lime-62-rgb: 152, 195, 121;
    --am-lime-85: #d7e6c9;
    --am-lime-85-rgb: 215, 230, 201;

    /* ---- YELLOW — Yellow — search-match highlight, syntax highlighting. ---- */
    --am-yellow-50: #ffff00;
    --am-yellow-50-rgb: 255, 255, 0;
    --am-yellow-54: #dbdb37;
    --am-yellow-54-rgb: 219, 219, 55;
    --am-yellow-76: #dcdcaa;
    --am-yellow-76-rgb: 220, 220, 170;

    /* ---- AMBER — Amber / warning. ---- */
    --am-amber-06: #1b1402;
    --am-amber-06-rgb: 27, 20, 2;
    --am-amber-26: #8a5300;
    --am-amber-26-rgb: 138, 83, 0;
    --am-amber-27: #785a14;
    --am-amber-27-rgb: 120, 90, 20;
    --am-amber-28: #856404;
    --am-amber-28-rgb: 133, 100, 4;
    --am-amber-30: #975d02;
    --am-amber-30-rgb: 151, 93, 2;
    --am-amber-31: #795e26;
    --am-amber-31-rgb: 121, 94, 38;
    --am-amber-34: #a86a0c;
    --am-amber-34-rgb: 168, 106, 12;
    --am-amber-35: #b06a00;
    --am-amber-35-rgb: 176, 106, 0;
    --am-amber-36: #b98f00;
    --am-amber-36-rgb: 185, 143, 0;
    --am-amber-38: #b8860b;
    --am-amber-38-rgb: 184, 134, 11;
    --am-amber-39: #c9a400;
    --am-amber-39-rgb: 201, 164, 0;
    --am-amber-40: #cc9900;
    --am-amber-40-rgb: 204, 153, 0;
    --am-amber-41: #c58a05;
    --am-amber-41-rgb: 197, 138, 5;
    --am-amber-42: #b7791f;
    --am-amber-42-rgb: 183, 121, 31;
    --am-amber-43: #d18616;
    --am-amber-43-rgb: 209, 134, 22;
    --am-amber-44: #d99a07;
    --am-amber-44-rgb: 217, 154, 7;
    --am-amber-45: #e6ac00;
    --am-amber-45-rgb: 230, 172, 0;
    --am-amber-46: #b58a2e;
    --am-amber-46-rgb: 181, 138, 46;
    --am-amber-47: #eab308;
    --am-amber-47-rgb: 234, 179, 8;
    --am-amber-48: #ffcc00;
    --am-amber-48-rgb: 255, 204, 0;
    --am-amber-49: #ffbf00;
    --am-amber-49-rgb: 255, 191, 0;
    --am-amber-50: #ffb400;
    --am-amber-50-rgb: 255, 180, 0;
    --am-amber-51: #d8b526;
    --am-amber-51-rgb: 216, 181, 38;
    --am-amber-52: #f59e0b;
    --am-amber-52-rgb: 245, 158, 11;
    --am-amber-56: #fbbf24;
    --am-amber-56-rgb: 251, 191, 36;
    --am-amber-57: #e5a33a;
    --am-amber-57-rgb: 229, 163, 58;
    --am-amber-58: #e6a23c;
    --am-amber-58-rgb: 230, 162, 60;
    --am-amber-60: #e5a54b;
    --am-amber-60-rgb: 229, 165, 75;
    --am-amber-62: #f0c14b;
    --am-amber-62-rgb: 240, 193, 75;
    --am-amber-65: #ffd24d;
    --am-amber-65-rgb: 255, 210, 77;
    --am-amber-67: #d7ba7d;
    --am-amber-67-rgb: 215, 186, 125;
    --am-amber-69: #e5c07b;
    --am-amber-69-rgb: 229, 192, 123;
    --am-amber-75: #e6d99a;
    --am-amber-75-rgb: 230, 217, 154;
    --am-amber-76: #ffe082;
    --am-amber-76-rgb: 255, 224, 130;
    --am-amber-77: #ffe08a;
    --am-amber-77-rgb: 255, 224, 138;
    --am-amber-78: #e8cba6;
    --am-amber-78-rgb: 232, 203, 166;
    --am-amber-80: #ffd79a;
    --am-amber-80-rgb: 255, 215, 154;
    --am-amber-81: #f3d9a4;
    --am-amber-81-rgb: 243, 217, 164;
    --am-amber-83: #f7dcb0;
    --am-amber-83-rgb: 247, 220, 176;
    --am-amber-86: #ffeeba;
    --am-amber-86-rgb: 255, 238, 186;
    --am-amber-90: #fff3cd;
    --am-amber-90-rgb: 255, 243, 205;
    --am-amber-91: #fbf4d7;
    --am-amber-91-rgb: 251, 244, 215;
    --am-amber-94: #fcf6e2;
    --am-amber-94-rgb: 252, 246, 226;
    --am-amber-95: #fdf3e6;
    --am-amber-95-rgb: 253, 243, 230;
    --am-amber-96: #fff7e8;
    --am-amber-96-rgb: 255, 247, 232;

    /* ---- ORANGE — Orange. ---- */
    --am-orange-28: #8a4a05;
    --am-orange-28-rgb: 138, 74, 5;
    --am-orange-38: #c45100;
    --am-orange-38-rgb: 196, 81, 0;
    --am-orange-44: #d97706;
    --am-orange-44-rgb: 217, 119, 6;
    --am-orange-46: #ea5c00;
    --am-orange-46-rgb: 234, 92, 0;
    --am-orange-59: #f26b3a;
    --am-orange-59-rgb: 242, 107, 58;
    --am-orange-61: #d19a66;
    --am-orange-61-rgb: 209, 154, 102;
    --am-orange-62: #fb923c;
    --am-orange-62-rgb: 251, 146, 60;
    --am-orange-64: #ce9178;
    --am-orange-64-rgb: 206, 145, 120;
    --am-orange-91: #fbe9d4;
    --am-orange-91-rgb: 251, 233, 212;

    /* ---- RED — Red / danger. ---- */
    --am-red-18: #5e0006;
    --am-red-18-rgb: 94, 0, 6;
    --am-red-24: #790109;
    --am-red-24-rgb: 121, 1, 9;
    --am-red-25: #800000;
    --am-red-25-rgb: 128, 0, 0;
    --am-red-28: #721c24;
    --am-red-28-rgb: 114, 28, 36;
    --am-red-36: #a31515;
    --am-red-36-rgb: 163, 21, 21;
    --am-red-44: #b0323a;
    --am-red-44-rgb: 176, 50, 58;
    --am-red-45: #e51400;
    --am-red-45-rgb: 229, 20, 0;
    --am-red-46: #c0392b;
    --am-red-46-rgb: 192, 57, 43;
    --am-red-47: #e50000;
    --am-red-47-rgb: 229, 0, 0;
    --am-red-48: #ee0000;
    --am-red-48-rgb: 238, 0, 0;
    --am-red-49: #c9302c;
    --am-red-49-rgb: 201, 48, 44;
    --am-red-50: #ff0019;
    --am-red-50-rgb: 255, 0, 25;
    --am-red-51: #ff0000;
    --am-red-51-rgb: 255, 0, 0;
    --am-red-52: #d03a44;
    --am-red-52-rgb: 208, 58, 68;
    --am-red-53: #d9363e;
    --am-red-53-rgb: 217, 54, 62;
    --am-red-57: #f05133;
    --am-red-57-rgb: 240, 81, 51;
    --am-red-61: #ed4b48;
    --am-red-61-rgb: 237, 75, 72;
    --am-red-62: #d16969;
    --am-red-62-rgb: 209, 105, 105;
    --am-red-63: #f85149;
    --am-red-63-rgb: 248, 81, 73;
    --am-red-65: #e06c75;
    --am-red-65-rgb: 224, 108, 117;
    --am-red-66: #ff4b5e;
    --am-red-66-rgb: 255, 75, 94;
    --am-red-69: #f07178;
    --am-red-69-rgb: 240, 113, 120;
    --am-red-71: #ff6b6b;
    --am-red-71-rgb: 255, 107, 107;
    --am-red-72: #f87171;
    --am-red-72-rgb: 248, 113, 113;
    --am-red-73: #ff7583;
    --am-red-73-rgb: 255, 117, 131;
    --am-red-74: #e79b93;
    --am-red-74-rgb: 231, 155, 147;
    --am-red-78: #ff8d94;
    --am-red-78-rgb: 255, 141, 148;
    --am-red-79: #f19ea6;
    --am-red-79-rgb: 241, 158, 166;
    --am-red-80: #ff9b95;
    --am-red-80-rgb: 255, 155, 149;
    --am-red-81: #ff9ea8;
    --am-red-81-rgb: 255, 158, 168;
    --am-red-85: #ffb3b5;
    --am-red-85-rgb: 255, 179, 181;
    --am-red-86: #f0c8c3;
    --am-red-86-rgb: 240, 200, 195;
    --am-red-87: #ffbbc2;
    --am-red-87-rgb: 255, 187, 194;
    --am-red-88: #f5c6cb;
    --am-red-88-rgb: 245, 198, 203;
    --am-red-91: #ffd3d4;
    --am-red-91-rgb: 255, 211, 212;
    --am-red-92: #f8d7da;
    --am-red-92-rgb: 248, 215, 218;
    --am-red-94: #fbe3e4;
    --am-red-94-rgb: 251, 227, 228;
    --am-red-95: #fbedeb;
    --am-red-95-rgb: 251, 237, 235;

    /* ---- PINK — Pink — chart + category series. ---- */
    --am-pink-31: #811f3f;
    --am-pink-31-rgb: 129, 31, 63;
    --am-pink-45: #b5316b;
    --am-pink-45-rgb: 181, 49, 107;
    --am-pink-65: #e06c9f;
    --am-pink-65-rgb: 224, 108, 159;
    --am-pink-66: #c586c0;
    --am-pink-66-rgb: 197, 134, 192;
    --am-pink-70: #f472b6;
    --am-pink-70-rgb: 244, 114, 182;

    /* ---- VIOLET — Violet — chart + category series. ---- */
    --am-violet-43: #af00db;
    --am-violet-43-rgb: 175, 0, 219;
    --am-violet-44: #6b3fa0;
    --am-violet-44-rgb: 107, 63, 160;
    --am-violet-47: #885599;
    --am-violet-47-rgb: 136, 85, 153;
    --am-violet-57: #9d74af;
    --am-violet-57-rgb: 157, 116, 175;
    --am-violet-74: #b578ff;
    --am-violet-74-rgb: 181, 120, 255;
    --am-violet-75: #c084fc;
    --am-violet-75-rgb: 192, 132, 252;

    /* ---- INDIGO — Indigo — chart + category series. ---- */
    --am-indigo-57: #7157cb;
    --am-indigo-57-rgb: 113, 87, 203;
    --am-indigo-61: #8a68cd;
    --am-indigo-61-rgb: 138, 104, 205;
    --am-indigo-68: #a185d6;
    --am-indigo-68-rgb: 161, 133, 214;
    --am-indigo-74: #818cf8;
    --am-indigo-74-rgb: 129, 140, 248;
    --am-indigo-75: #8c90f0;
    --am-indigo-75-rgb: 140, 144, 240;
    --am-indigo-76: #a78bfa;
    --am-indigo-76-rgb: 167, 139, 250;
    --am-indigo-77: #b7a2e0;
    --am-indigo-77-rgb: 183, 162, 224;
    --am-indigo-83: #cdbee9;
    --am-indigo-83-rgb: 205, 190, 233;
    --am-indigo-87: #c3c5fb;
    --am-indigo-87-rgb: 195, 197, 251;

    /* ==================================================================
       2. GRADIENTS — every repeated wash in the app. Single stops live in
       the palette above; these are the compositions.
       ================================================================== */
    /* Brand: blue -> green. The signature brand wash (buttons, headers,
       active rails, progress bars). */
    --am-grad-brand: linear-gradient(135deg, var(--am-blue-35) 0%, var(--am-green-27) 100%);
    --am-grad-brand-h: linear-gradient(90deg, var(--am-blue-35) 0%, var(--am-green-27) 100%);
    --am-grad-brand-v: linear-gradient(180deg, var(--am-blue-35) 0%, var(--am-green-27) 100%);
    /* Brand, 3-stop: blue -> teal -> green (the longer, richer variant). */
    --am-grad-brand-3: linear-gradient(135deg, var(--am-blue-35) 0%, var(--am-teal-23) 55%, var(--am-green-27) 100%);
    --am-grad-brand-3-v: linear-gradient(180deg, var(--am-blue-35) 0%, var(--am-teal-23) 55%, var(--am-green-27) 100%);
    /* Brand, lifted one step — hover state of the 3-stop wash. */
    --am-grad-brand-3-hover: linear-gradient(135deg, var(--am-blue-39) 0%, var(--am-teal-29) 55%, var(--am-green-31) 100%);
    /* Brand, bright — on-dark accents (icon chips, bright rails). */
    --am-grad-brand-bright: linear-gradient(135deg, var(--am-blue-66) 0%, var(--am-green-44) 100%);

    /* Brand tints — the same blue->green sweep at low opacity, used as a
       header / toolbar wash over a surface. */
    --am-grad-brand-tint-45: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .45) 0%, rgba(var(--am-green-27-rgb), .28) 100%);
    --am-grad-brand-tint-28: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .28) 0%, rgba(var(--am-green-27-rgb), .18) 100%);
    --am-grad-brand-tint-22: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .22) 0%, rgba(var(--am-green-27-rgb), .14) 100%);
    --am-grad-brand-tint-16: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .16) 0%, rgba(var(--am-green-27-rgb), .1) 100%);
    --am-grad-brand-tint-08: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .08) 0%, rgba(var(--am-green-27-rgb), .06) 100%);
    --am-grad-brand-tint-diag: linear-gradient(135deg, rgba(var(--am-blue-35-rgb), .18) 0%, rgba(var(--am-green-27-rgb), .12) 100%);

    /* Page canvas — brand blue (top-left) -> navy/white -> green (bottom-right),
       plus the faint diagonal light streak and the square-box grid overlay.
       Re-pointed for the light theme further down. */
    --am-grad-canvas: linear-gradient(135deg, var(--am-slate-11) 0%, var(--am-slate-07) 45%, var(--am-green-05) 100%);
    --am-grad-canvas-glow-blue: radial-gradient(120% 110% at 0% 0%, rgba(var(--am-blue-35-rgb), .55) 0%, rgba(var(--am-blue-35-rgb), 0) 55%);
    --am-grad-canvas-glow-green: radial-gradient(120% 110% at 100% 100%, rgba(var(--am-green-27-rgb), .45) 0%, rgba(var(--am-green-27-rgb), 0) 55%);
    --am-grad-canvas-streaks: repeating-linear-gradient(135deg, transparent 0 140px, rgba(var(--am-blue-66-rgb), .04) 140px 141px, transparent 141px 320px);
    --am-grad-grid-x: linear-gradient(to right, rgba(var(--am-blue-66-rgb), .1) 1px, transparent 1px);
    --am-grad-grid-y: linear-gradient(to bottom, rgba(var(--am-blue-66-rgb), .1) 1px, transparent 1px);
    --am-grad-grid-fade: radial-gradient(ellipse at center, black 30%, transparent 78%);

    /* The corners of a panel (a .card), in both themes. */
    --am-panel-radius: 10px;

    /* Card / panel surfaces — a one-step-darker sheen over the flat surface. */
    --am-grad-surface-1: linear-gradient(160deg, var(--am-slate-16) 0%, var(--am-slate-12) 100%);
    --am-grad-surface-soft: linear-gradient(160deg, rgba(var(--am-slate-16-rgb), .65) 0%, rgba(var(--am-slate-12-rgb), .55) 100%);

    /* Scrollbar thumb. */
    --am-grad-scrollbar: linear-gradient(180deg, var(--am-blue-39) 0%, var(--am-teal-23) 55%, var(--am-green-28) 100%);
    --am-grad-scrollbar-idle: linear-gradient(180deg, var(--am-blue-19) 0%, var(--am-cyan-19) 55%, var(--am-green-20) 100%);

    /* Status washes. */
    --am-grad-success: linear-gradient(135deg, var(--am-green-27) 0%, var(--am-green-44) 100%);
    --am-grad-warning: linear-gradient(135deg, var(--am-amber-35) 0%, var(--am-amber-50) 100%);
    --am-grad-error: linear-gradient(135deg, var(--am-red-44) 0%, var(--am-red-61) 100%);
    --am-grad-info: linear-gradient(135deg, var(--am-blue-35) 0%, var(--am-blue-66) 100%);

    /* ==================================================================
       3. SEMANTIC ROLES — DARK is the application default (app.module boots
       html.DARK), so the base values here are the dark ones; html.LIGHT
       below re-points the same names.
       ================================================================== */
    /* Surfaces, lowest to highest elevation. */
    --surface-canvas: var(--am-slate-05);   /* the page behind everything   */
    --surface-0: var(--am-slate-10);        /* page / app shell             */
    --surface-1: var(--am-slate-12);        /* card, modal body, table row  */
    --surface-2: var(--am-slate-16);        /* raised: header, toolbar, tab */
    --surface-3: var(--am-slate-17);        /* selected / brand-tinted row  */
    --surface-inset: var(--am-slate-07);    /* wells, code blocks, inputs   */
    --surface-overlay: var(--am-slate-12);  /* dropdown, popover, tooltip   */
    --surface-hover: rgba(var(--am-slate-100-rgb), .04);
    --surface-active: rgba(var(--am-blue-66-rgb), .12);
    --surface-scrim: rgba(var(--am-slate-00-rgb), .6);

    /* Hairlines. */
    --border-subtle: var(--am-slate-16);
    --border-regular: var(--am-slate-21);
    --border-strong: var(--am-slate-24);
    --border-brand: rgba(var(--am-blue-66-rgb), .35);

    /* Content (text + icons), most to least prominent. */
    --content-primary: var(--am-slate-86);
    --content-secondary: var(--am-slate-74);
    --content-tertiary: var(--am-slate-59);
    --content-muted: var(--am-slate-51);
    --content-on-brand: var(--am-slate-100);
    --content-link: var(--am-blue-66);

    /* Brand. */
    --brand-primary: var(--am-blue-35);
    --brand-primary-hover: var(--am-blue-39);
    --brand-secondary: var(--am-blue-66);
    --brand-accent: var(--am-green-27);
    --brand-accent-bright: var(--am-green-44);

    /* Status. */
    --accent-error: var(--am-red-61);
    --accent-error-strong: var(--am-red-44);
    --accent-error-soft: rgba(var(--am-red-61-rgb), .16);
    --accent-warning: var(--am-amber-50);
    --accent-warning-strong: var(--am-amber-35);
    --accent-warning-soft: rgba(var(--am-amber-50-rgb), .16);
    --accent-success: var(--am-green-44);
    --accent-success-strong: var(--am-green-27);
    --accent-success-soft: rgba(var(--am-green-44-rgb), .16);
    --accent-info: var(--am-blue-66);
    --accent-info-soft: rgba(var(--am-blue-66-rgb), .16);

    /* Category / chart series — a fixed, colour-blind-legible rotation.
       Read from TypeScript through readToken() (src/app/shared/theme-tokens.ts). */
    --series-1: var(--am-blue-66);
    --series-2: var(--am-green-44);
    --series-3: var(--am-indigo-76);
    --series-4: var(--am-amber-60);
    --series-5: var(--am-teal-56);
    --series-6: var(--am-pink-65);
    --series-7: var(--am-indigo-75);
    --series-8: var(--am-cyan-53);

    /* Syntax / diff / log-level accents (Monaco, consoles, git views). */
    --syntax-string: var(--am-green-52);
    --syntax-number: var(--am-amber-69);
    --syntax-keyword: var(--am-red-65);
    --syntax-comment: var(--am-slate-51);
    --diff-add: rgba(var(--am-green-44-rgb), .16);
    --diff-del: rgba(var(--am-red-61-rgb), .16);


    /* Chart / plotting tokens — read from TypeScript through themeToken()
       (src/app/shared/theme-tokens.ts), because a charting library is handed a
       colour string, not a stylesheet. */
    --status-good: var(--am-green-44);
    --status-warn: var(--am-amber-60);
    --status-crit: var(--am-red-61);
    --status-info: var(--am-blue-66);
    --status-muted: var(--am-slate-59);
    --chart-axis-text: var(--am-slate-86);
    --chart-axis-muted: var(--am-slate-74);
    --chart-grid: rgba(var(--am-blue-66-rgb), .12);
    --chart-label: var(--am-slate-96);
    --chart-label-outline: var(--am-slate-12);

    /* ==================================================================
       4. LEGACY ALIASES — the token names that already existed in the app.
       Kept so nothing has to change at the call sites.
       ================================================================== */
    --bg-primary: var(--surface-0);
    --bg-secondary: var(--surface-1);
    --bg-tertiary: var(--surface-2);
    --hairline-strong: var(--border-strong);
    --content-primary--shade--four: var(--content-secondary);
    --accent-error--shade--five: var(--am-red-24);
    --accent-success--shade--three: var(--am-green-65);
    /* Always-dark surface (footer, quill toolbar, misc chrome that stays
       dark in both themes). */
    --dark-bg-primary: var(--am-slate-12);
}

/* =====================================================================
   DARK — restated explicitly so the theme is readable on its own and so
   switching back from LIGHT resets every role.
   ===================================================================== */
html.DARK {
    --surface-canvas: var(--am-slate-05);
    --surface-0: var(--am-slate-10);
    --surface-1: var(--am-slate-12);
    --surface-2: var(--am-slate-16);
    --surface-3: var(--am-slate-17);
    --surface-inset: var(--am-slate-07);
    --surface-overlay: var(--am-slate-12);
    --surface-hover: rgba(var(--am-slate-100-rgb), .04);
    --surface-active: rgba(var(--am-blue-66-rgb), .12);
    --surface-scrim: rgba(var(--am-slate-00-rgb), .6);

    --border-subtle: var(--am-slate-16);
    --border-regular: var(--am-slate-21);
    --border-strong: var(--am-slate-24);
    --border-brand: rgba(var(--am-blue-66-rgb), .35);

    --content-primary: var(--am-slate-86);
    --content-secondary: var(--am-slate-74);
    --content-tertiary: var(--am-slate-59);
    --content-muted: var(--am-slate-51);
    --content-link: var(--am-blue-66);

    --brand-secondary: var(--am-blue-66);

    --accent-error: var(--am-red-61);
    --accent-warning: var(--am-amber-50);
    --accent-success: var(--am-green-44);
    --accent-info: var(--am-blue-66);

    --am-grad-canvas: linear-gradient(135deg, var(--am-slate-11) 0%, var(--am-slate-07) 45%, var(--am-green-05) 100%);
    --am-grad-canvas-glow-blue: radial-gradient(120% 110% at 0% 0%, rgba(var(--am-blue-35-rgb), .55) 0%, rgba(var(--am-blue-35-rgb), 0) 55%);
    --am-grad-canvas-glow-green: radial-gradient(120% 110% at 100% 100%, rgba(var(--am-green-27-rgb), .45) 0%, rgba(var(--am-green-27-rgb), 0) 55%);
    --am-grad-canvas-streaks: repeating-linear-gradient(135deg, transparent 0 140px, rgba(var(--am-blue-66-rgb), .04) 140px 141px, transparent 141px 320px);
    --am-grad-grid-x: linear-gradient(to right, rgba(var(--am-blue-66-rgb), .1) 1px, transparent 1px);
    --am-grad-grid-y: linear-gradient(to bottom, rgba(var(--am-blue-66-rgb), .1) 1px, transparent 1px);
    --am-grad-surface-1: linear-gradient(160deg, var(--am-slate-16) 0%, var(--am-slate-12) 100%);
    --am-grad-scrollbar-idle: linear-gradient(180deg, var(--am-blue-19) 0%, var(--am-cyan-19) 55%, var(--am-green-20) 100%);

    /* The layers of a page of panels, from the back (colors-dark.scss, the --h-bar of the header) : the canvas, the darkest ;
       the top bar and the panels above it, each with a lit hairline ; the header of a panel, the brightest.
       This canvas is dimmer than --am-grad-canvas, which stays on the welcome page and the sign in page, where it is the picture. */
    --am-page-canvas: linear-gradient(135deg, var(--am-slate-05) 0%, var(--am-slate-03) 45%, var(--am-slate-05) 100%);
    --am-page-glow-blue: radial-gradient(120% 110% at 0% 0%, rgba(var(--am-blue-35-rgb), .2) 0%, rgba(var(--am-blue-35-rgb), 0) 55%);
    --am-page-glow-green: radial-gradient(120% 110% at 100% 100%, rgba(var(--am-green-27-rgb), .16) 0%, rgba(var(--am-green-27-rgb), 0) 55%);
    --am-panel-line: rgba(var(--am-blue-66-rgb), .28);
    --am-panel-shadow: 0 2px 10px -2px rgba(var(--am-slate-00-rgb), .65);

    --status-good: var(--am-green-44);
    --status-warn: var(--am-amber-60);
    --status-crit: var(--am-red-61);
    --status-info: var(--am-blue-66);
    --status-muted: var(--am-slate-59);
    --chart-axis-text: var(--am-slate-86);
    --chart-axis-muted: var(--am-slate-74);
    --chart-grid: rgba(var(--am-blue-66-rgb), .12);
    --chart-label: var(--am-slate-96);
    --chart-label-outline: var(--am-slate-12);
}

/* =====================================================================
   LIGHT — same roles, light values. Brand blue/green stay brand blue/green;
   only their *shade* moves, so contrast holds on a white canvas.
   ===================================================================== */
html.LIGHT {
    --surface-canvas: var(--am-slate-95);
    --surface-0: var(--am-slate-95);
    --surface-1: var(--am-slate-100);
    --surface-2: var(--am-slate-96);
    --surface-3: var(--am-slate-92);
    --surface-inset: var(--am-slate-95);
    --surface-overlay: var(--am-slate-100);
    --surface-hover: rgba(var(--am-blue-35-rgb), .06);
    --surface-active: rgba(var(--am-blue-35-rgb), .12);
    --surface-scrim: rgba(var(--am-slate-21-rgb), .45);

    --border-subtle: var(--am-slate-90);
    --border-regular: var(--am-slate-83);
    --border-strong: var(--am-slate-74);
    --border-brand: rgba(var(--am-blue-35-rgb), .35);

    --content-primary: var(--am-slate-21);
    --content-secondary: var(--am-slate-34);
    --content-tertiary: var(--am-slate-43);
    --content-muted: var(--am-slate-51);
    --content-on-brand: var(--am-slate-100);
    --content-link: var(--am-blue-35);

    --brand-secondary: var(--am-blue-39);

    --accent-error: var(--am-red-44);
    --accent-error-strong: var(--am-red-24);
    --accent-error-soft: rgba(var(--am-red-44-rgb), .12);
    --accent-warning: var(--am-amber-35);
    --accent-warning-strong: var(--am-amber-27);
    --accent-warning-soft: rgba(var(--am-amber-35-rgb), .12);
    --accent-success: var(--am-green-27);
    --accent-success-strong: var(--am-green-20);
    --accent-success-soft: rgba(var(--am-green-27-rgb), .12);
    --accent-info: var(--am-blue-39);
    --accent-info-soft: rgba(var(--am-blue-35-rgb), .1);

    --series-1: var(--am-blue-39);
    --series-2: var(--am-green-27);
    --series-3: var(--am-violet-44);
    --series-4: var(--am-amber-35);
    --series-5: var(--am-teal-29);
    --series-6: var(--am-pink-45);
    --series-7: var(--am-indigo-57);
    --series-8: var(--am-cyan-41);

    --syntax-string: var(--am-green-27);
    --syntax-number: var(--am-amber-35);
    --syntax-keyword: var(--am-red-46);
    --syntax-comment: var(--am-slate-51);
    --diff-add: rgba(var(--am-green-27-rgb), .12);
    --diff-del: rgba(var(--am-red-44-rgb), .12);

    /* Light canvas — soft blue -> white -> green. */
    --am-grad-canvas: linear-gradient(135deg, var(--am-slate-95) 0%, var(--am-slate-95) 45%, var(--am-green-95) 100%);
    --am-grad-canvas-glow-blue: radial-gradient(120% 110% at 0% 0%, rgba(var(--am-blue-35-rgb), .12) 0%, rgba(var(--am-blue-35-rgb), 0) 55%);
    --am-grad-canvas-glow-green: radial-gradient(120% 110% at 100% 100%, rgba(var(--am-green-27-rgb), .1) 0%, rgba(var(--am-green-27-rgb), 0) 55%);
    --am-grad-canvas-streaks: repeating-linear-gradient(135deg, transparent 0 140px, rgba(var(--am-blue-35-rgb), .04) 140px 141px, transparent 141px 320px);
    --am-grad-grid-x: linear-gradient(to right, rgba(var(--am-blue-35-rgb), .06) 1px, transparent 1px);
    --am-grad-grid-y: linear-gradient(to bottom, rgba(var(--am-blue-35-rgb), .06) 1px, transparent 1px);
    --am-grad-surface-1: linear-gradient(160deg, var(--am-slate-100) 0%, var(--am-slate-95) 100%);
    --am-grad-surface-soft: linear-gradient(160deg, rgba(var(--am-slate-100-rgb), .85) 0%, rgba(var(--am-slate-95-rgb), .75) 100%);
    --am-grad-brand-tint-45: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .16) 0%, rgba(var(--am-green-27-rgb), .1) 100%);
    --am-grad-brand-tint-28: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .12) 0%, rgba(var(--am-green-27-rgb), .08) 100%);
    --am-grad-brand-tint-22: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .1) 0%, rgba(var(--am-green-27-rgb), .06) 100%);
    --am-grad-brand-tint-16: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .08) 0%, rgba(var(--am-green-27-rgb), .05) 100%);
    --am-grad-brand-tint-08: linear-gradient(90deg, rgba(var(--am-blue-35-rgb), .06) 0%, rgba(var(--am-green-27-rgb), .04) 100%);
    --am-grad-brand-tint-diag: linear-gradient(135deg, rgba(var(--am-blue-35-rgb), .1) 0%, rgba(var(--am-green-27-rgb), .07) 100%);
    --am-grad-scrollbar: linear-gradient(180deg, var(--am-blue-39) 0%, var(--am-teal-29) 55%, var(--am-green-28) 100%);
    --am-grad-scrollbar-idle: linear-gradient(180deg, var(--am-slate-80) 0%, var(--am-green-69) 100%);

    --status-good: var(--am-green-27);
    --status-warn: var(--am-amber-35);
    --status-crit: var(--am-red-44);
    --status-info: var(--am-blue-39);
    --status-muted: var(--am-slate-43);
    --chart-axis-text: var(--am-slate-21);
    --chart-axis-muted: var(--am-slate-43);
    --chart-grid: rgba(var(--am-blue-35-rgb), .1);
    --chart-label: var(--am-slate-21);
    --chart-label-outline: var(--am-slate-100);
}