/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial}}}@layer theme{:root,:host{--tw-spacing:.25rem;--tw-text-sm:.875rem;--tw-text-sm--line-height:calc(1.25 / .875)}}@layer utilities{.tw\:relative{position:relative}.tw\:sticky{position:sticky}.tw\:top-0{top:0}.tw\:z-50{z-index:50}.tw\:col-span-full{grid-column:1/-1}.tw\:row-start-2{grid-row-start:2}.tw\:me-2{margin-inline-end:calc(var(--tw-spacing) * 2)}.tw\:mt-2{margin-top:calc(var(--tw-spacing) * 2)}.tw\:flex{display:flex}.tw\:grid{display:grid}.tw\:h-5{height:calc(var(--tw-spacing) * 5)}.tw\:h-6{height:calc(var(--tw-spacing) * 6)}.tw\:h-\[30px\]{height:30px}.tw\:h-dvh{height:100dvh}.tw\:max-h-\[84px\]{max-height:84px}.tw\:min-h-\[104px\]{min-height:104px}.tw\:min-h-dvh{min-height:100dvh}.tw\:w-42{width:calc(var(--tw-spacing) * 42)}.tw\:w-full{width:100%}.tw\:w-px{width:1px}.tw\:max-w-\[30ch\]{max-width:30ch}.tw\:max-w-\[calc\(100\%-16px\)\]{max-width:calc(100% - 16px)}.tw\:min-w-0{min-width:0}.tw\:flex-1{flex:1}.tw\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.tw\:grid-cols-\[362px_minmax\(0\,1fr\)\]{grid-template-columns:362px minmax(0,1fr)}.tw\:grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.tw\:flex-col{flex-direction:column}.tw\:content-between{align-content:space-between}.tw\:items-baseline{align-items:baseline}.tw\:items-center{align-items:center}.tw\:items-start{align-items:flex-start}.tw\:justify-between{justify-content:space-between}.tw\:justify-center{justify-content:center}.tw\:justify-start{justify-content:flex-start}.tw\:gap-2{gap:calc(var(--tw-spacing) * 2)}.tw\:gap-4{gap:calc(var(--tw-spacing) * 4)}.tw\:gap-6{gap:calc(var(--tw-spacing) * 6)}.tw\:gap-x-2{column-gap:calc(var(--tw-spacing) * 2)}.tw\:self-start{align-self:flex-start}.tw\:overflow-x-clip{overflow-x:clip}.tw\:overflow-y-auto{overflow-y:auto}.tw\:overscroll-contain{overscroll-behavior:contain}.tw\:border-b-\[8px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:8px}.tw\:border-\(--rl-neutral-surface-subtle\){border-color:var(--rl-neutral-surface-subtle)}.tw\:bg-\(--rl-neutral-border-default\){background-color:var(--rl-neutral-border-default)}.tw\:bg-\(--rl-neutral-border-subtle\){background-color:var(--rl-neutral-border-subtle)}.tw\:bg-\(--rl-neutral-surface-default\){background-color:var(--rl-neutral-surface-default)}.tw\:bg-\(--rl-neutral-surface-subtle\){background-color:var(--rl-neutral-surface-subtle)}.tw\:p-3{padding:calc(var(--tw-spacing) * 3)}.tw\:p-4{padding:calc(var(--tw-spacing) * 4)}.tw\:px-4{padding-inline:calc(var(--tw-spacing) * 4)}.tw\:px-6{padding-inline:calc(var(--tw-spacing) * 6)}.tw\:py-1\.5{padding-block:calc(var(--tw-spacing) * 1.5)}.tw\:py-2{padding-block:calc(var(--tw-spacing) * 2)}.tw\:py-5{padding-block:calc(var(--tw-spacing) * 5)}.tw\:pt-4{padding-top:calc(var(--tw-spacing) * 4)}.tw\:pr-0{padding-right:0}.tw\:pb-2{padding-bottom:calc(var(--tw-spacing) * 2)}.tw\:pb-14{padding-bottom:calc(var(--tw-spacing) * 14)}.tw\:pl-2{padding-left:calc(var(--tw-spacing) * 2)}.tw\:pl-4{padding-left:calc(var(--tw-spacing) * 4)}.tw\:text-center{text-align:center}.tw\:text-right{text-align:right}.tw\:type-body{font-size:var(--rl-font-size-45);line-height:var(--tw-leading,var(--rl-line-height-45));letter-spacing:var(--tw-tracking,var(--rl-letter-spacing-50))}.tw\:type-caption{font-size:var(--rl-font-size-40);line-height:var(--tw-leading,var(--rl-line-height-40));letter-spacing:var(--tw-tracking,var(--rl-letter-spacing-50))}.tw\:type-display{font-size:var(--rl-font-size-65);line-height:var(--tw-leading,var(--rl-line-height-65));letter-spacing:var(--tw-tracking,var(--rl-letter-spacing-50))}.tw\:type-headline{font-size:var(--rl-font-size-60);line-height:var(--tw-leading,var(--rl-line-height-60));letter-spacing:var(--tw-tracking,var(--rl-letter-spacing-50))}.tw\:text-sm{font-size:var(--tw-text-sm);line-height:var(--tw-leading,var(--tw-text-sm--line-height))}.tw\:text-\[8px\]{font-size:8px}.tw\:leading-3{--tw-leading:calc(var(--tw-spacing) * 3);line-height:calc(var(--tw-spacing) * 3)}.tw\:font-semibold{--tw-font-weight:var(--rl-font-weight-semibold);font-weight:var(--rl-font-weight-semibold)}.tw\:tracking-\[0\.03em\]{--tw-tracking:.03em;letter-spacing:.03em}.tw\:wrap-break-word{overflow-wrap:break-word}.tw\:whitespace-pre-line{white-space:pre-line}.tw\:whitespace-pre-wrap{white-space:pre-wrap}.tw\:text-\(--rl-deprecated-categorical-text\){color:var(--rl-deprecated-categorical-text)}.tw\:text-\(--rl-info-icon\){color:var(--rl-info-icon)}.tw\:text-\(--rl-neutral-text-secondary\){color:var(--rl-neutral-text-secondary)}.tw\:text-\(--rl-warning-text\){color:var(--rl-warning-text)}.tw\:\[\&\>\.page\]\:flex-1>.page{flex:1}.tw\:\[\&\>\.page\>main\]\:flex>.page>main{display:flex}.tw\:\[\&\>\.page\>main\]\:flex-1>.page>main{flex:1}.tw\:\[\&\>\.page\>main\]\:flex-col>.page>main{flex-direction:column}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}
/**
* Layer 1 - Primitive Tokens
*
* This file contains the raw values used by the design system.
* It includes colors, fonts, radius, and other values.
*
* Every color in the main application lives here as a named value.
* These answer "what color is this," not "what is it for." Other files reference them for that.
*
* The "Custom" section at the bottom is off-palette and kept only for parity
* with old code. It is being removed, so never use it in new code.
*/
:root {
--rl-font-family-sans: 'IBM Plex Sans', sans-serif;
--rl-font-family-mona: 'Mona Sans', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
--rl-font-family-mono: 'IBM Plex Mono', ui-monospace, 'Menlo', 'Monaco', 'Courier New', monospace;
/* stylelint-disable-next-line max-line-length */
--rl-font-family-mona-mono: 'Mona Sans Mono', 'IBM Plex Mono', ui-monospace, 'Menlo', 'Monaco', 'Courier New', monospace;
--rl-primitive-radius-none: 0;
--rl-primitive-radius-small: 2px;
--rl-primitive-radius-medium: 4px;
--rl-primitive-radius-large: 50px;
--rl-primitive-white: rgb(255 255 255);
--rl-primitive-white-ext: rgb(245 250 255);
--rl-primitive-black: rgb(0 35 34);
--rl-primitive-black-ext: rgb(17 21 30);
/* ===========================================================================
* Ink Colors
* Base colors you apply at a chosen transparency, like a drop of ink you dilute.
* They are written as the red, green, and blue numbers on their own (not wrapped
* in rgb()), so a token can set its own transparency.
* Example: rgb(var(--rl-primitive-ink-black) / 15%) is black at 15%.
* =========================================================================== */
--rl-primitive-ink-black: 0 0 0;
--rl-primitive-ink-teal: 0 166 161;
--rl-primitive-ink-white: 255 255 255;
--rl-primitive-ink-spruce: 0 36 35;
/* ===========================================================================
* Design System Palette
* This is the main design system palette. It is meant to stay true to what is in Figma.
* Do not customize the values without checking Figma.
* Hues run alphabetically except Slate, grouped right after Gray (out of
* alphabetical order) since it exists solely as Gray's dark-mode stand-in.
* =========================================================================== */
/* Blue */
--rl-primitive-blue-10: rgb(220 240 255);
--rl-primitive-blue-15: rgb(172 220 255);
--rl-primitive-blue-20: rgb(124 200 255);
--rl-primitive-blue-30: rgb(8 153 255);
--rl-primitive-blue-40: rgb(0 121 208);
--rl-primitive-blue-50: rgb(0 91 157);
--rl-primitive-blue-55: rgb(0 78 133);
--rl-primitive-blue-60: rgb(0 65 110);
--rl-primitive-blue-10-ext: rgb(0 46 88);
--rl-primitive-blue-15-ext: rgb(0 58 112);
--rl-primitive-blue-20-ext: rgb(0 90 172);
--rl-primitive-blue-30-ext: rgb(0 128 235);
--rl-primitive-blue-40-ext: rgb(48 152 255);
--rl-primitive-blue-50-ext: rgb(90 178 255);
--rl-primitive-blue-55-ext: rgb(155 210 255);
--rl-primitive-blue-60-ext: rgb(220 240 255);
/* Emerald */
--rl-primitive-emerald-10: rgb(226 241 236);
--rl-primitive-emerald-15: rgb(186 221 209);
--rl-primitive-emerald-20: rgb(150 204 184);
--rl-primitive-emerald-30: rgb(72 165 131);
--rl-primitive-emerald-40: rgb(13 129 97);
--rl-primitive-emerald-50: rgb(5 97 76);
--rl-primitive-emerald-55: rgb(3 82 65);
--rl-primitive-emerald-60: rgb(3 68 54);
--rl-primitive-emerald-10-ext: rgb(0 39 30);
--rl-primitive-emerald-15-ext: rgb(0 68 53);
--rl-primitive-emerald-20-ext: rgb(0 105 82);
--rl-primitive-emerald-30-ext: rgb(0 148 115);
--rl-primitive-emerald-40-ext: rgb(0 185 148);
--rl-primitive-emerald-50-ext: rgb(55 212 172);
--rl-primitive-emerald-55-ext: rgb(118 230 200);
--rl-primitive-emerald-60-ext: rgb(182 245 224);
/* Gold */
--rl-primitive-gold-10: rgb(245 237 215);
--rl-primitive-gold-15: rgb(232 205 137);
--rl-primitive-gold-20: rgb(226 176 52);
--rl-primitive-gold-30: rgb(198 140 7);
--rl-primitive-gold-40: rgb(128 89 10);
--rl-primitive-gold-50: rgb(96 68 10);
--rl-primitive-gold-55: rgb(79 58 13);
--rl-primitive-gold-60: rgb(63 48 14);
--rl-primitive-gold-10-ext: rgb(47 32 0);
--rl-primitive-gold-15-ext: rgb(77 52 0);
--rl-primitive-gold-20-ext: rgb(120 82 0);
--rl-primitive-gold-30-ext: rgb(165 112 0);
--rl-primitive-gold-40-ext: rgb(220 150 0);
--rl-primitive-gold-50-ext: rgb(250 178 24);
--rl-primitive-gold-55-ext: rgb(255 206 88);
--rl-primitive-gold-60-ext: rgb(255 234 168);
/* Gray */
--rl-primitive-gray-10: rgb(236 239 238);
--rl-primitive-gray-15: rgb(209 215 215);
--rl-primitive-gray-20: rgb(185 194 194);
--rl-primitive-gray-30: rgb(137 152 151);
--rl-primitive-gray-40: rgb(103 122 122);
--rl-primitive-gray-50: rgb(75 92 91);
--rl-primitive-gray-55: rgb(64 78 77);
--rl-primitive-gray-60: rgb(53 65 64);
/* Slate -- Gray's dark-mode counterpart. Figma calls this ramp "Dark-Gray". */
--rl-primitive-slate-10: rgb(26 34 48);
--rl-primitive-slate-15: rgb(35 46 64);
--rl-primitive-slate-20: rgb(58 75 102);
--rl-primitive-slate-30: rgb(73 92 122);
--rl-primitive-slate-40: rgb(123 146 184);
--rl-primitive-slate-50: rgb(184 209 245);
--rl-primitive-slate-55: rgb(212 229 255);
--rl-primitive-slate-60: rgb(237 247 255);
/* Green */
--rl-primitive-green-10: rgb(230 241 226);
--rl-primitive-green-15: rgb(196 222 186);
--rl-primitive-green-20: rgb(163 204 147);
--rl-primitive-green-30: rgb(94 166 66);
--rl-primitive-green-40: rgb(65 133 39);
--rl-primitive-green-50: rgb(49 100 30);
--rl-primitive-green-55: rgb(41 85 25);
--rl-primitive-green-60: rgb(34 71 21);
--rl-primitive-green-10-ext: rgb(9 54 3);
--rl-primitive-green-15-ext: rgb(14 82 4);
--rl-primitive-green-20-ext: rgb(22 128 6);
--rl-primitive-green-30-ext: rgb(30 172 8);
--rl-primitive-green-40-ext: rgb(52 205 22);
--rl-primitive-green-50-ext: rgb(78 224 50);
--rl-primitive-green-55-ext: rgb(132 238 106);
--rl-primitive-green-60-ext: rgb(188 250 168);
/* Navy */
--rl-primitive-navy-10: rgb(234 239 243);
--rl-primitive-navy-15: rgb(205 216 227);
--rl-primitive-navy-20: rgb(177 195 211);
--rl-primitive-navy-30: rgb(122 152 180);
--rl-primitive-navy-40: rgb(83 122 159);
--rl-primitive-navy-50: rgb(43 91 136);
--rl-primitive-navy-55: rgb(22 77 128);
--rl-primitive-navy-60: rgb(7 63 116);
--rl-primitive-navy-10-ext: rgb(13 35 63);
--rl-primitive-navy-15-ext: rgb(19 51 90);
--rl-primitive-navy-20-ext: rgb(26 72 128);
--rl-primitive-navy-30-ext: rgb(35 96 170);
--rl-primitive-navy-40-ext: rgb(68 135 209);
--rl-primitive-navy-50-ext: rgb(112 182 255);
--rl-primitive-navy-55-ext: rgb(205 216 227);
--rl-primitive-navy-60-ext: rgb(234 239 243);
/* Orange */
--rl-primitive-orange-10: rgb(253 236 213);
--rl-primitive-orange-15: rgb(249 208 152);
--rl-primitive-orange-20: rgb(246 180 91);
--rl-primitive-orange-30: rgb(219 126 0);
--rl-primitive-orange-40: rgb(175 100 0);
--rl-primitive-orange-50: rgb(131 75 0);
--rl-primitive-orange-55: rgb(112 63 0);
--rl-primitive-orange-60: rgb(93 53 0);
--rl-primitive-orange-10-ext: rgb(77 38 0);
--rl-primitive-orange-15-ext: rgb(102 50 0);
--rl-primitive-orange-20-ext: rgb(153 75 0);
--rl-primitive-orange-30-ext: rgb(215 106 0);
--rl-primitive-orange-40-ext: rgb(255 132 0);
--rl-primitive-orange-50-ext: rgb(255 160 44);
--rl-primitive-orange-55-ext: rgb(255 192 104);
--rl-primitive-orange-60-ext: rgb(255 222 172);
/* Purple */
--rl-primitive-purple-10: rgb(243 234 245);
--rl-primitive-purple-15: rgb(228 208 233);
--rl-primitive-purple-20: rgb(212 182 220);
--rl-primitive-purple-30: rgb(182 130 196);
--rl-primitive-purple-40: rgb(160 92 178);
--rl-primitive-purple-50: rgb(135 49 158);
--rl-primitive-purple-55: rgb(119 34 141);
--rl-primitive-purple-60: rgb(102 23 123);
--rl-primitive-purple-10-ext: rgb(50 20 71);
--rl-primitive-purple-15-ext: rgb(68 28 97);
--rl-primitive-purple-20-ext: rgb(104 42 148);
--rl-primitive-purple-30-ext: rgb(142 58 202);
--rl-primitive-purple-40-ext: rgb(162 88 220);
--rl-primitive-purple-50-ext: rgb(211 158 255);
--rl-primitive-purple-55-ext: rgb(227 194 255);
--rl-primitive-purple-60-ext: rgb(244 230 255);
/* Red */
--rl-primitive-red-10: rgb(251 233 233);
--rl-primitive-red-15: rgb(246 205 205);
--rl-primitive-red-20: rgb(241 176 175);
--rl-primitive-red-30: rgb(230 114 113);
--rl-primitive-red-40: rgb(220 56 54);
--rl-primitive-red-50: rgb(167 40 39);
--rl-primitive-red-55: rgb(142 34 33);
--rl-primitive-red-60: rgb(119 29 28);
--rl-primitive-red-10-ext: rgb(92 16 15);
--rl-primitive-red-15-ext: rgb(115 20 19);
--rl-primitive-red-20-ext: rgb(174 30 29);
--rl-primitive-red-30-ext: rgb(240 42 40);
--rl-primitive-red-40-ext: rgb(255 72 70);
--rl-primitive-red-50-ext: rgb(255 148 145);
--rl-primitive-red-55-ext: rgb(255 175 173);
--rl-primitive-red-60-ext: rgb(255 205 205);
/* Teal */
--rl-primitive-teal-10: rgb(216 243 242);
--rl-primitive-teal-15: rgb(162 226 224);
--rl-primitive-teal-20: rgb(107 208 205);
--rl-primitive-teal-30: rgb(0 166 161);
--rl-primitive-teal-40: rgb(0 132 129);
--rl-primitive-teal-50: rgb(0 100 97);
--rl-primitive-teal-55: rgb(0 85 82);
--rl-primitive-teal-60: rgb(0 70 68);
--rl-primitive-teal-10-ext: rgb(0 54 52);
--rl-primitive-teal-15-ext: rgb(0 82 79);
--rl-primitive-teal-20-ext: rgb(0 122 118);
--rl-primitive-teal-30-ext: rgb(0 170 164);
--rl-primitive-teal-40-ext: rgb(0 205 198);
--rl-primitive-teal-50-ext: rgb(52 225 220);
--rl-primitive-teal-55-ext: rgb(118 238 234);
--rl-primitive-teal-60-ext: rgb(185 250 248);
/* Yellow */
--rl-primitive-yellow-10: rgb(251 238 187);
--rl-primitive-yellow-15: rgb(244 213 86);
--rl-primitive-yellow-20: rgb(234 187 0);
--rl-primitive-yellow-30: rgb(181 144 0);
--rl-primitive-yellow-40: rgb(145 115 0);
--rl-primitive-yellow-50: rgb(108 86 0);
--rl-primitive-yellow-55: rgb(92 73 0);
--rl-primitive-yellow-60: rgb(77 61 0);
--rl-primitive-yellow-10-ext: rgb(44 34 0);
--rl-primitive-yellow-15-ext: rgb(74 58 0);
--rl-primitive-yellow-20-ext: rgb(117 92 0);
--rl-primitive-yellow-30-ext: rgb(165 130 0);
--rl-primitive-yellow-40-ext: rgb(208 162 0);
--rl-primitive-yellow-50-ext: rgb(252 202 0);
--rl-primitive-yellow-55-ext: rgb(255 228 64);
--rl-primitive-yellow-60-ext: rgb(255 244 158);
/* ===========================================================================
* Custom
* Off-palette and legacy values, kept only for parity with old code.
* These are not part of the design system palette and are slated for removal.
* Do not use them in new code. Each entry notes why it exists and who owns it.
* =========================================================================== */
--rl-primitive-wash: rgb(242 242 242);
--rl-primitive-wash-ext: rgb(27 36 52);
--rl-primitive-brand-navy: rgb(26 61 109);
--rl-primitive-brand-teal: rgb(0 175 170);
--rl-primitive-botanical-garden: rgb(0 51 49);
--rl-primitive-darkest-spruce: rgb(47 58 57);
--rl-primitive-barely-blue: rgb(222 227 227);
--rl-primitive-ponderosa-pine: rgb(30 62 60);
--rl-primitive-oyster-mushroom: rgb(192 200 200);
--rl-primitive-hushed-green: rgb(207 247 246);
--rl-primitive-star-white: rgb(229 250 249);
--rl-primitive-brilliant-white: rgb(235 250 249);
--rl-primitive-dark-blue: rgb(42 83 122);
--rl-primitive-scuba-blue: rgb(0 172 179);
--rl-primitive-lead: rgb(128 144 145);
--rl-primitive-gray-violet: rgb(187 187 187);
--rl-primitive-magenta: rgb(189 16 224);
--rl-primitive-sky-gray: rgb(192 200 200);
--rl-primitive-slate-gray: rgb(129 146 145);
--rl-primitive-mallard-green: rgb(66 89 88);
--rl-primitive-pine-grove: rgb(32 52 51);
--rl-primitive-snow-white: rgb(241 243 243);
--rl-primitive-gallery: rgb(238 238 238);
--rl-primitive-athens-gray: rgb(248 249 250);
--rl-primitive-alice-blue: rgb(240 248 255);
--rl-primitive-dove-gray: rgb(102 102 102);
--rl-primitive-dusty-gray: rgb(153 153 153);
--rl-primitive-ship-cove: rgb(143 160 189);
/* accounting-ui off-palette colors (RLA-427015) */
--rl-primitive-deep-slate: rgb(44 62 80);
--rl-primitive-cool-gray: rgb(108 117 125);
--rl-primitive-pure-black: rgb(0 0 0);
--rl-primitive-cool-silver: rgb(209 213 219);
/* data-ui off-palette colors (RLA-246622) */
--rl-primitive-persian-red: rgb(211 47 47);
--rl-primitive-nevada: rgb(96 102 102);
--rl-primitive-gainsboro: rgb(224 224 224);
--rl-primitive-gallery-gray: rgb(240 240 240);
--rl-primitive-lotion: rgb(250 250 250);
--rl-primitive-granite-gray: rgb(90 90 90);
--rl-primitive-bubbles: rgb(230 244 234);
--rl-primitive-camarone: rgb(30 126 52);
--rl-primitive-tutu: rgb(253 236 235);
--rl-primitive-carnelian: rgb(179 38 30);
--rl-primitive-pure-gray: rgb(128 128 128);
/* dataGrid27 button off-palette colors */
--rl-primitive-harbor-teal: rgb(0 133 128);
--rl-primitive-abyss-teal: rgb(0 107 104);
--rl-primitive-gunsmoke: rgb(96 113 113);
--rl-primitive-pearl-mist: rgb(231 233 233);
/* tom-pc-ui migration off-palette colors (token targets audit, 2026-07-01) */
--rl-primitive-mine-shaft: rgb(51 51 51);
--rl-primitive-bunker: rgb(28 33 39);
--rl-primitive-white-smoke: rgb(245 245 245);
--rl-primitive-cerulean: rgb(0 122 204);
--rl-primitive-russet: rgb(163 92 0);
--rl-primitive-mist-gray: rgb(191 200 200);
--rl-primitive-persian-green: rgb(0 173 168);
--rl-primitive-pure-red: rgb(255 0 0);
--rl-primitive-coral: 230 114 113;
}
/* stylelint-disable max-line-length */
/**
* @deprecated
* IMPORTANT: this file is deprecated and will be removed in when the ui_ridgeline_token_adoption flag is rolled out.
* This file has been replaced by the adoption.css file (the current token semantic library) and the refresh.css file (the current theme file).
* This file should not be used in any new code, all tokens inside are not up to date and might not be migrated to the new tokens.
* This file was leveraging the outdated tokens.json that will also be removed.
*
* Semantic Design Tokens
* Auto-generated from tokens.json
* Do not edit directly - run: bun run libraries/sapling/tokens/parseTokens.ts
*/
:root {
/*
* ==========================================================================
* Color
* ==========================================================================
*/
/* Signal */
--rl-color-signal-10-positive: rgb(230 241 226);
--rl-color-signal-10-active: rgb(220 240 255);
--rl-color-signal-10-passive: rgb(236 239 238);
--rl-color-signal-10-negative-low: rgb(251 238 187);
--rl-color-signal-10-negative-medium: rgb(253 236 213);
--rl-color-signal-10-negative-high: rgb(251 233 233);
--rl-color-signal-10-primary: rgb(216 243 242);
--rl-color-signal-10-emerald: rgb(226 241 236);
--rl-color-signal-10-navy: rgb(234 239 243);
--rl-color-signal-10-purple: rgb(243 234 245);
--rl-color-signal-15-positive: rgb(196 222 186);
--rl-color-signal-15-active: rgb(172 220 255);
--rl-color-signal-15-passive: rgb(209 215 215);
--rl-color-signal-15-negative-low: rgb(244 213 86);
--rl-color-signal-15-negative-medium: rgb(249 208 152);
--rl-color-signal-15-negative-high: rgb(246 205 205);
--rl-color-signal-15-primary: rgb(162 226 224);
--rl-color-signal-15-emerald: rgb(186 221 209);
--rl-color-signal-15-navy: rgb(205 216 227);
--rl-color-signal-15-purple: rgb(228 208 233);
--rl-color-signal-20-positive: rgb(163 204 147);
--rl-color-signal-20-active: rgb(124 200 255);
--rl-color-signal-20-passive: rgb(185 194 194);
--rl-color-signal-20-negative-low: rgb(234 187 0);
--rl-color-signal-20-negative-medium: rgb(246 180 91);
--rl-color-signal-20-negative-high: rgb(241 176 175);
--rl-color-signal-20-primary: rgb(107 208 205);
--rl-color-signal-20-navy: rgb(177 195 211);
--rl-color-signal-20-emerald: rgb(150 204 184);
--rl-color-signal-20-purple: rgb(212 182 220);
--rl-color-signal-30-positive: rgb(94 166 66);
--rl-color-signal-30-active: rgb(8 153 255);
--rl-color-signal-30-passive: rgb(137 152 151);
--rl-color-signal-30-negative-low: rgb(181 144 0);
--rl-color-signal-30-negative-medium: rgb(219 126 0);
--rl-color-signal-30-negative-high: rgb(230 114 113);
--rl-color-signal-30-primary: rgb(0 166 161);
--rl-color-signal-30-navy: rgb(122 152 180);
--rl-color-signal-30-emerald: rgb(72 165 131);
--rl-color-signal-30-purple: rgb(182 130 196);
--rl-color-signal-40-positive: rgb(65 133 39);
--rl-color-signal-40-active: rgb(0 121 208);
--rl-color-signal-40-passive: rgb(103 122 122);
--rl-color-signal-40-negative-low: rgb(145 115 0);
--rl-color-signal-40-negative-medium: rgb(175 100 0);
--rl-color-signal-40-negative-high: rgb(220 56 54);
--rl-color-signal-40-primary: rgb(0 132 129);
--rl-color-signal-40-navy: rgb(83 122 159);
--rl-color-signal-40-emerald: rgb(13 129 97);
--rl-color-signal-40-purple: rgb(160 92 178);
--rl-color-signal-50-positive: rgb(49 100 30);
--rl-color-signal-50-active: rgb(0 91 157);
--rl-color-signal-50-passive: rgb(75 92 91);
--rl-color-signal-50-negative-low: rgb(108 86 0);
--rl-color-signal-50-negative-medium: rgb(131 75 0);
--rl-color-signal-50-negative-high: rgb(167 40 39);
--rl-color-signal-50-primary: rgb(0 100 97);
--rl-color-signal-50-navy: rgb(43 91 136);
--rl-color-signal-50-emerald: rgb(5 97 76);
--rl-color-signal-50-purple: rgb(135 49 158);
--rl-color-signal-55-positive: rgb(41 85 25);
--rl-color-signal-55-active: rgb(0 78 133);
--rl-color-signal-55-passive: rgb(64 78 77);
--rl-color-signal-55-negative-low: rgb(92 73 0);
--rl-color-signal-55-negative-medium: rgb(112 63 0);
--rl-color-signal-55-negative-high: rgb(142 34 33);
--rl-color-signal-55-primary: rgb(0 85 82);
--rl-color-signal-55-navy: rgb(22 77 128);
--rl-color-signal-55-emerald: rgb(3 82 65);
--rl-color-signal-55-purple: rgb(119 34 141);
--rl-color-signal-60-positive: rgb(34 71 21);
--rl-color-signal-60-active: rgb(0 65 110);
--rl-color-signal-60-passive: rgb(53 65 64);
--rl-color-signal-60-negative-low: rgb(77 61 0);
--rl-color-signal-60-negative-medium: rgb(93 53 0);
--rl-color-signal-60-negative-high: rgb(119 29 28);
--rl-color-signal-60-primary: rgb(0 70 68);
--rl-color-signal-60-navy: rgb(7 63 116);
--rl-color-signal-60-emerald: rgb(3 68 54);
--rl-color-signal-60-purple: rgb(102 23 123);
/* Text */
--rl-color-text-hover: rgb(53 65 64);
--rl-color-text-secondary: rgb(103 122 122);
--rl-color-text-placeholder: rgb(185 194 194);
--rl-color-text-default: rgb(0 35 34);
--rl-color-text-default-inverse: rgb(255 255 255);
--rl-color-text-disabled: rgb(185 194 194);
--rl-color-text-secondary-hover: rgb(75 92 91);
--rl-color-text-error: rgb(220 56 54);
--rl-color-text-primary: rgb(0 132 129);
--rl-color-text-warning: rgb(175 100 0);
--rl-color-text-primary-strong: rgb(0 70 68);
--rl-color-text-success: rgb(65 133 39);
/* Background */
--rl-color-bg-default: rgb(255 255 255);
--rl-color-bg-primary: rgb(0 132 129);
--rl-color-bg-alert-hover: rgb(251 233 233);
--rl-color-bg-alert-active: rgb(246 205 205);
--rl-color-bg-alert-disabled: rgb(236 239 238);
--rl-color-bg-error-active: rgb(119 29 28);
--rl-color-bg-error-hover: rgb(167 40 39);
--rl-color-bg-error-light: rgb(251 233 233);
--rl-color-bg-error-default: rgb(220 56 54);
--rl-color-bg-secondary: rgb(236 239 238);
--rl-color-bg-success-light: rgb(230 241 226);
--rl-color-bg-success-default: rgb(65 133 39);
--rl-color-bg-hover: rgb(236 239 238);
--rl-color-bg-info-default: rgb(220 240 255);
--rl-color-bg-disabled: rgb(236 239 238);
--rl-color-bg-warning-default: rgb(175 100 0);
--rl-color-bg-warning-light: rgb(253 236 213);
--rl-color-bg-page: rgb(242 242 242);
--rl-color-bg-default-inverse: rgb(0 35 34);
--rl-color-bg-active-default: rgb(162 226 224);
--rl-color-bg-active-hover: rgb(107 208 205);
--rl-color-bg-active-disabled: rgb(216 243 242);
--rl-color-bg-active-subtle: rgb(216 243 242);
--rl-color-bg-selected-default: rgb(0 166 161);
--rl-color-bg-selected-hover: rgb(0 132 129);
--rl-color-bg-selected-disabled: rgb(162 226 224);
/* Icons */
--rl-color-icons-error: rgb(220 56 54);
--rl-color-icons-success: rgb(94 166 66);
--rl-color-icons-warning: rgb(175 100 0);
--rl-color-icons-default: rgb(103 122 122);
--rl-color-icons-hover: rgb(75 92 91);
--rl-color-icons-disabled: rgb(185 194 194);
--rl-color-icons-active: rgb(0 121 208);
--rl-color-icons-on-dark-bg: rgb(255 255 255);
--rl-color-icons-primary: rgb(0 132 129);
--rl-color-icons-secondary: rgb(137 152 151);
--rl-color-icons-primary-light: rgb(0 166 161);
--rl-color-icons-primary-disabled: rgb(107 208 205);
--rl-color-icons-on-light-bg: rgb(0 35 34);
--rl-color-icons-subtle: rgb(185 194 194);
/* UI */
/* Table */
--rl-color-ui-table-row-selection-selected: rgb(162 226 224);
--rl-color-ui-table-row-selection-selected-disabled: rgb(255 255 255);
--rl-color-ui-table-row-selection-default: rgb(255 255 255);
--rl-color-ui-table-row-selection-hover: rgb(216 243 242);
--rl-color-ui-table-row-selection-active: rgb(162 226 224);
--rl-color-ui-table-row-selection-disabled: rgb(255 255 255);
--rl-color-ui-table-row-selection-selected-hover: rgb(107 208 205);
--rl-color-ui-table-row-selection-selected-active: rgb(162 226 224);
--rl-color-ui-table-row-selection-selected-active-hover: rgb(107 208 205);
--rl-color-ui-table-row-selection-active-hover: rgb(107 208 205);
--rl-color-ui-table-column-header: rgb(75 92 91);
--rl-color-ui-table-formatting-green-low-bg: rgb(230 241 226);
--rl-color-ui-table-formatting-green-low-border: rgb(163 204 147);
--rl-color-ui-table-formatting-green-strong-bg: rgb(163 204 147);
--rl-color-ui-table-formatting-green-strong-border: rgb(94 166 66);
--rl-color-ui-table-formatting-red-low-bg: rgb(251 233 233);
--rl-color-ui-table-formatting-red-low-border: rgb(241 176 175);
--rl-color-ui-table-formatting-red-strong-bg: rgb(241 176 175);
--rl-color-ui-table-formatting-red-strong-border: rgb(230 114 113);
--rl-color-ui-table-formatting-blue-low-bg: rgb(220 240 255);
--rl-color-ui-table-formatting-blue-low-border: rgb(124 200 255);
--rl-color-ui-table-formatting-blue-strong-bg: rgb(124 200 255);
--rl-color-ui-table-formatting-blue-strong-border: rgb(8 153 255);
--rl-color-ui-table-formatting-purple-low-bg: rgb(243 234 245);
--rl-color-ui-table-formatting-purple-low-border: rgb(212 182 220);
--rl-color-ui-table-formatting-purple-strong-bg: rgb(212 182 220);
--rl-color-ui-table-formatting-purple-strong-border: rgb(182 130 196);
--rl-color-ui-table-formatting-navy-low-bg: rgb(234 239 243);
--rl-color-ui-table-formatting-navy-low-border: rgb(177 195 211);
--rl-color-ui-table-formatting-navy-strong-bg: rgb(177 195 211);
--rl-color-ui-table-formatting-navy-strong-border: rgb(122 152 180);
--rl-color-ui-table-formatting-orange-low-bg: rgb(253 236 213);
--rl-color-ui-table-formatting-orange-low-border: rgb(246 180 91);
--rl-color-ui-table-formatting-orange-strong-bg: rgb(246 180 91);
--rl-color-ui-table-formatting-orange-strong-border: rgb(219 126 0);
--rl-color-ui-table-formatting-yellow-low-bg: rgb(251 238 187);
--rl-color-ui-table-formatting-yellow-low-border: rgb(234 187 0);
--rl-color-ui-table-formatting-yellow-strong-bg: rgb(234 187 0);
--rl-color-ui-table-formatting-yellow-strong-border: rgb(181 144 0);
--rl-color-ui-table-formatting-emerald-low-bg: rgb(226 241 236);
--rl-color-ui-table-formatting-emerald-low-border: rgb(150 204 184);
--rl-color-ui-table-formatting-emerald-strong-bg: rgb(150 204 184);
--rl-color-ui-table-formatting-emerald-strong-border: rgb(72 165 131);
--rl-color-ui-table-up-arrow: rgb(65 133 39);
--rl-color-ui-table-down-arrow: rgb(220 56 54);
/* Badges */
--rl-color-ui-badges-positive-bg-strong: rgb(163 204 147);
--rl-color-ui-badges-positive-bg: rgb(230 241 226);
--rl-color-ui-badges-positive-text: rgb(49 100 30);
--rl-color-ui-badges-positive-text-strong: rgb(34 71 21);
--rl-color-ui-badges-positive-icon: rgb(49 100 30);
--rl-color-ui-badges-negative-low-bg: rgb(251 238 187);
--rl-color-ui-badges-negative-low-text: rgb(108 86 0);
--rl-color-ui-badges-negative-low-icon: rgb(108 86 0);
--rl-color-ui-badges-negative-low-bg-strong: rgb(234 187 0);
--rl-color-ui-badges-negative-low-text-strong: rgb(92 73 0);
--rl-color-ui-badges-negative-medium-bg: rgb(253 236 213);
--rl-color-ui-badges-negative-medium-text: rgb(131 75 0);
--rl-color-ui-badges-negative-medium-icon: rgb(131 75 0);
--rl-color-ui-badges-negative-medium-bg-strong: rgb(246 180 91);
--rl-color-ui-badges-negative-medium-text-strong: rgb(112 63 0);
--rl-color-ui-badges-negative-high-bg: rgb(251 233 233);
--rl-color-ui-badges-negative-high-text: rgb(142 34 33);
--rl-color-ui-badges-negative-high-icon: rgb(167 40 39);
--rl-color-ui-badges-negative-high-bg-strong: rgb(241 176 175);
--rl-color-ui-badges-passive-bg: rgb(236 239 238);
--rl-color-ui-badges-passive-bg-strong: rgb(185 194 194);
--rl-color-ui-badges-passive-text: rgb(75 92 91);
--rl-color-ui-badges-passive-text-strong: rgb(53 65 64);
--rl-color-ui-badges-passive-icon: rgb(75 92 91);
--rl-color-ui-badges-active-bg: rgb(220 240 255);
--rl-color-ui-badges-active-bg-strong: rgb(124 200 255);
--rl-color-ui-badges-active-text: rgb(0 91 157);
--rl-color-ui-badges-active-text-strong: rgb(0 65 110);
--rl-color-ui-badges-active-icon: rgb(0 91 157);
--rl-color-ui-badges-alert-text-strong: rgb(255 255 255);
--rl-color-ui-badges-alert-bg: rgb(255 255 255);
--rl-color-ui-badges-alert-text: rgb(119 29 28);
--rl-color-ui-badges-alert-icon: rgb(167 40 39);
--rl-color-ui-badges-alert-bg-strong: rgb(220 56 54);
--rl-color-ui-badges-ai-bg: rgb(245 237 215);
--rl-color-ui-badges-ai-bg-strong: rgb(128 89 10);
--rl-color-ui-badges-ai-text: rgb(96 68 10);
--rl-color-ui-badges-ai-text-strong: rgb(63 48 14);
--rl-color-ui-badges-ai-icon: rgb(96 68 10);
--rl-color-ui-badges-teal-bg: rgb(216 243 242);
--rl-color-ui-badges-teal-bg-strong: rgb(107 208 205);
--rl-color-ui-badges-teal-text: rgb(0 100 97);
--rl-color-ui-badges-teal-text-strong: rgb(0 70 68);
--rl-color-ui-badges-teal-icon: rgb(0 100 97);
--rl-color-ui-badges-navy-bg: rgb(234 239 243);
--rl-color-ui-badges-navy-bg-strong: rgb(177 195 211);
--rl-color-ui-badges-navy-text: rgb(43 91 136);
--rl-color-ui-badges-navy-text-strong: rgb(7 63 116);
--rl-color-ui-badges-navy-icon: rgb(43 91 136);
--rl-color-ui-badges-emerald-bg: rgb(226 241 236);
--rl-color-ui-badges-emerald-bg-strong: rgb(150 204 184);
--rl-color-ui-badges-emerald-text: rgb(5 97 76);
--rl-color-ui-badges-emerald-text-strong: rgb(3 68 54);
--rl-color-ui-badges-emerald-icon: rgb(5 97 76);
--rl-color-ui-badges-draft-bg: rgb(243 234 245);
--rl-color-ui-badges-draft-bg-strong: rgb(212 182 220);
--rl-color-ui-badges-draft-text-strong: rgb(102 23 123);
--rl-color-ui-badges-draft-icon: rgb(135 49 158);
--rl-color-ui-badges-draft-text: rgb(135 49 158);
/* Alert Bar */
--rl-color-ui-alert-bar-success-text: rgb(65 133 39);
--rl-color-ui-alert-bar-success-text-strong: rgb(49 100 30);
--rl-color-ui-alert-bar-success-icon: rgb(49 100 30);
--rl-color-ui-alert-bar-success-border: rgb(94 166 66);
--rl-color-ui-alert-bar-warning-text-strong: rgb(112 63 0);
--rl-color-ui-alert-bar-warning-icon: rgb(131 75 0);
--rl-color-ui-alert-bar-warning-border: rgb(219 126 0);
--rl-color-ui-alert-bar-warning-text: rgb(175 100 0);
--rl-color-ui-alert-bar-default-bg: rgb(242 242 242);
--rl-color-ui-alert-bar-default-border: rgb(137 152 151);
--rl-color-ui-alert-bar-default-text: rgb(0 35 34);
--rl-color-ui-alert-bar-default-icon: rgb(137 152 151);
--rl-color-ui-alert-bar-active-bg: rgb(216 243 242);
--rl-color-ui-alert-bar-active-text: rgb(0 85 82);
--rl-color-ui-alert-bar-active-text-strong: rgb(0 70 68);
--rl-color-ui-alert-bar-active-icon: rgb(0 100 97);
--rl-color-ui-alert-bar-active-border: rgb(0 132 129);
--rl-color-ui-alert-bar-error-text: rgb(167 40 39);
--rl-color-ui-alert-bar-error-text-strong: rgb(119 29 28);
--rl-color-ui-alert-bar-error-icon: rgb(167 40 39);
--rl-color-ui-alert-bar-error-border: rgb(230 114 113);
--rl-color-ui-alert-bar-secondary-bg: rgb(255 255 255);
--rl-color-ui-alert-bar-secondary-border: rgb(103 122 122);
--rl-color-ui-alert-bar-secondary-text: rgb(0 35 34);
--rl-color-ui-alert-bar-secondary-icon: rgb(103 122 122);
--rl-color-ui-alert-bar-info-text: rgb(0 78 133);
--rl-color-ui-alert-bar-info-text-strong: rgb(0 65 110);
--rl-color-ui-alert-bar-info-icon: rgb(0 91 157);
--rl-color-ui-alert-bar-info-border: rgb(0 121 208);
/* App Header */
--rl-color-ui-app-header-bg: rgb(75 92 91);
--rl-color-ui-app-header-bg-search: rgb(103 122 122);
/* Nav */
--rl-color-ui-nav-shortcut-bg: rgb(75 92 91);
--rl-color-ui-nav-shortcut-hover: rgb(103 122 122);
--rl-color-ui-nav-text: rgb(137 152 151);
--rl-color-ui-nav-hover: rgb(53 65 64);
--rl-color-ui-nav-shortcut-light-hover: rgb(209 215 215);
--rl-color-ui-nav-shortcut-light: rgb(236 239 238);
--rl-color-ui-nav-active: rgb(75 92 91);
--rl-color-ui-nav-divider: rgb(64 78 77);
/* Border */
--rl-color-border-focus-outer: rgb(0 121 208);
--rl-color-border-default: rgb(185 194 194);
--rl-color-border-secondary: rgb(103 122 122);
--rl-color-border-divider: rgb(209 215 215);
--rl-color-border-primary: rgb(0 132 129);
--rl-color-border-error: rgb(220 56 54);
--rl-color-border-active: rgb(0 166 161);
--rl-color-border-selected: rgb(107 208 205);
--rl-color-border-focus-inner: rgb(255 255 255);
/*
* ==========================================================================
* Dimensions
* ==========================================================================
*/
/* Padding */
--rl-dimensions-padding-20: 2px;
--rl-dimensions-padding-25: 4px;
--rl-dimensions-padding-30: 6px;
--rl-dimensions-padding-35: 7px;
--rl-dimensions-padding-40: 8px;
--rl-dimensions-padding-45: 10px;
--rl-dimensions-padding-50: 12px;
--rl-dimensions-padding-55: 16px;
--rl-dimensions-padding-60: 20px;
--rl-dimensions-padding-65: 24px;
--rl-dimensions-padding-70: 32px;
/* Border */
--rl-dimensions-border-50: 1px;
--rl-dimensions-border-55: 2px;
/* Radius */
--rl-dimensions-radius-30: 0;
--rl-dimensions-radius-35: 1px;
--rl-dimensions-radius-40: 2px;
--rl-dimensions-radius-45: 4px;
--rl-dimensions-radius-50: 8px;
--rl-dimensions-radius-55: 12px;
--rl-dimensions-radius-60: 16px;
--rl-dimensions-radius-65: 20px;
/* Scale */
--rl-dimensions-scale-30: 12px;
--rl-dimensions-scale-35: 14px;
--rl-dimensions-scale-40: 16px;
--rl-dimensions-scale-45: 18px;
--rl-dimensions-scale-50: 20px;
--rl-dimensions-scale-55: 24px;
--rl-dimensions-scale-60: 30px;
--rl-dimensions-scale-65: 32px;
--rl-dimensions-scale-70: 36px;
--rl-dimensions-scale-75: 40px;
--rl-dimensions-scale-80: 44px;
/* Gap */
--rl-dimensions-gap-25: 1px;
--rl-dimensions-gap-30: 2px;
--rl-dimensions-gap-35: 3px;
--rl-dimensions-gap-40: 4px;
--rl-dimensions-gap-45: 6px;
--rl-dimensions-gap-50: 8px;
--rl-dimensions-gap-55: 10px;
--rl-dimensions-gap-60: 12px;
--rl-dimensions-gap-65: 16px;
--rl-dimensions-gap-70: 20px;
--rl-dimensions-gap-75: 24px;
--rl-dimensions-gap-80: 40px;
/* Box Shadow */
--rl-dimensions-box-shadow-spread-35: 0;
--rl-dimensions-box-shadow-spread-40: 1px;
--rl-dimensions-box-shadow-spread-45: 2px;
--rl-dimensions-box-shadow-spread-50: 3px;
--rl-dimensions-box-shadow-blur-45: 2px;
--rl-dimensions-box-shadow-blur-50: 10px;
--rl-dimensions-box-shadow-x-0: 0;
--rl-dimensions-box-shadow-y-0: 0;
--rl-dimensions-box-shadow-y-50: 6px;
/*
* ==========================================================================
* Font
* ==========================================================================
*/
/* Size */
--rl-font-size-35: 10px;
--rl-font-size-40: 12px;
--rl-font-size-45: 14px;
--rl-font-size-50: 16px;
--rl-font-size-55: 20px;
--rl-font-size-60: 24px;
--rl-font-size-65: 36px;
--rl-font-size-70: 48px;
/* Weight */
--rl-font-weight-45: 400px;
--rl-font-weight-50: 500px;
--rl-font-weight-55: 600px;
--rl-font-weight-60: 700px;
/* Letter spacing */
--rl-letter-spacing-35: 0;
--rl-letter-spacing-40: 0;
--rl-letter-spacing-45: 0;
--rl-letter-spacing-50: 0;
--rl-letter-spacing-55: 0;
/* Line height */
--rl-line-height-35: 14px;
--rl-line-height-40: 16px;
--rl-line-height-45: 18px;
--rl-line-height-50: 24px;
--rl-line-height-55: 26px;
--rl-line-height-60: 32px;
--rl-line-height-65: 48px;
--rl-line-height-70: 56px;
/*
* ==========================================================================
* DEPRECATED TOKENS
* ==========================================================================
*/
/* Color */
--rl-color-bg-dark: rgb(47 58 57);
--rl-color-bg-light: rgb(242 242 242);
--rl-color-border-ai: rgb(128 89 10);
--rl-color-border-subtle: rgb(209 215 215);
--rl-color-dividers: rgb(209 215 215);
--rl-color-focus: rgb(8 153 255);
--rl-color-text-alert: rgb(220 56 54);
--rl-color-text-white: rgb(255 255 255);
--rl-color-icons-white: rgb(255 255 255);
/* Dimensions */
--rl-dimensions-width-45: 80px;
--rl-dimensions-width-50: 172px;
--rl-dimensions-width-55: 264px;
--rl-dimensions-width-60: 356px;
--rl-dimensions-width-65: 540px;
/* Letter spacing */
--rl-letter-spacing-60: 0.036em;
/* Font weight */
--rl-font-weight-regular: 400;
--rl-font-weight-medium: 500;
--rl-font-weight-semibold: 600;
--rl-font-weight-bold: 700;
/* Line height */
--rl-line-height-75: 88px;
/* Spacing */
--rl-dimensions-spacing-25: 2px;
--rl-dimensions-spacing-30: 4px;
--rl-dimensions-spacing-35: 6px;
--rl-dimensions-spacing-40: 8px;
--rl-dimensions-spacing-45: 10px;
--rl-dimensions-spacing-50: 12px;
--rl-dimensions-spacing-55: 16px;
--rl-dimensions-spacing-60: 20px;
--rl-dimensions-spacing-65: 24px;
--rl-dimensions-spacing-70: 32px;
}
/**
* Layer 2 - Semantic Tokens
*
* This layer assigns roles to the raw palette values in primitives.css.
* A semantic token answers "what is this color for," and the primitive answers "what color is that."
* Override one in a theme file to recolor that role everywhere.
*/
:root {
/* Chart palette -- the default data-viz colors. A theme re-points these in its
* own [data-theme] block (and per color-scheme) to recolor charts.
* TODO: "Chart" token names to be revisited in the future. */
--rl-chart-categorical-1: var(--rl-primitive-navy-50);
--rl-chart-categorical-2: var(--rl-primitive-blue-40);
--rl-chart-categorical-3: var(--rl-primitive-teal-30);
--rl-chart-categorical-4: var(--rl-primitive-emerald-20);
--rl-chart-categorical-5: var(--rl-primitive-green-15);
--rl-chart-negative-1: var(--rl-primitive-red-60);
--rl-chart-negative-2: var(--rl-primitive-red-40);
--rl-chart-negative-3: var(--rl-primitive-red-30);
--rl-chart-negative-4: var(--rl-primitive-red-20);
--rl-chart-negative-5: var(--rl-primitive-red-10);
--rl-chart-positive-1: var(--rl-primitive-green-60);
--rl-chart-positive-2: var(--rl-primitive-green-40);
--rl-chart-positive-3: var(--rl-primitive-green-30);
--rl-chart-positive-4: var(--rl-primitive-green-20);
--rl-chart-positive-5: var(--rl-primitive-green-10);
--rl-chart-extended-1: var(--rl-primitive-navy-50);
--rl-chart-extended-2: var(--rl-primitive-blue-40);
--rl-chart-extended-3: var(--rl-primitive-teal-30);
--rl-chart-extended-4: var(--rl-primitive-emerald-20);
--rl-chart-extended-5: var(--rl-primitive-green-15);
--rl-chart-extended-6: var(--rl-primitive-green-30);
--rl-chart-extended-7: var(--rl-primitive-emerald-40);
--rl-chart-extended-8: var(--rl-primitive-teal-50);
--rl-chart-extended-9: var(--rl-primitive-blue-30);
--rl-chart-extended-10: var(--rl-primitive-blue-20);
--rl-chart-extended-11: var(--rl-primitive-navy-40);
--rl-chart-extended-12: var(--rl-primitive-navy-15);
--rl-chart-status-1: var(--rl-primitive-green-20);
--rl-chart-status-2: var(--rl-primitive-green-15);
--rl-chart-status-3: var(--rl-primitive-orange-20);
--rl-chart-status-4: var(--rl-primitive-orange-15);
--rl-chart-status-5: var(--rl-primitive-gray-20);
--rl-chart-status-6: var(--rl-primitive-gray-15);
--rl-chart-status-7: var(--rl-primitive-blue-20);
--rl-chart-status-8: var(--rl-primitive-blue-15);
--rl-chart-status-9: var(--rl-primitive-red-30);
--rl-chart-status-10: var(--rl-primitive-red-20);
/* === ACCENT ===
* The primary brand-action color: primary buttons, links, and active controls. */
--rl-accent-solid: var(--rl-primitive-teal-40);
--rl-accent-solid-hover: var(--rl-primitive-teal-50);
--rl-accent-solid-active: var(--rl-primitive-teal-60);
--rl-accent-solid-disabled: var(--rl-primitive-teal-10);
--rl-accent-on-solid: var(--rl-primitive-white);
--rl-accent-on-solid-disabled: var(--rl-primitive-white);
--rl-accent-surface: var(--rl-primitive-teal-10);
--rl-accent-surface-active: var(--rl-primitive-teal-15);
--rl-accent-text: var(--rl-primitive-teal-50);
/* === ACCENT (SECONDARY) ===
* A lower-emphasis action variant of accent. */
--rl-accent-secondary: var(--rl-primitive-teal-50);
--rl-accent-on-secondary: var(--rl-primitive-white);
/* === FOCUS & INDICATORS ===
* Keyboard-focus rings and small pointer/state indicators. */
--rl-focus-ring-emphasis: var(--rl-primitive-blue-40);
--rl-accent-indicator: var(--rl-primitive-teal-30);
/* === DANGER ===
* Destructive and error states: delete actions, validation errors, critical alerts. */
--rl-danger-solid: var(--rl-primitive-red-40);
--rl-danger-solid-hover: var(--rl-primitive-red-50);
--rl-danger-solid-active: var(--rl-primitive-red-60);
--rl-danger-on-solid: var(--rl-primitive-white);
--rl-danger-surface: var(--rl-primitive-red-10);
--rl-danger-text: var(--rl-primitive-red-40);
--rl-danger-text-strong: var(--rl-primitive-red-60);
--rl-danger-surface-active: var(--rl-primitive-red-15);
--rl-danger-border: var(--rl-primitive-red-30);
--rl-danger-border-strong: var(--rl-primitive-red-40);
/* === WARNING ===
* States that need attention but are not errors. */
--rl-warning-surface: var(--rl-primitive-orange-10);
--rl-warning-text: var(--rl-primitive-orange-40);
--rl-warning-line: var(--rl-primitive-orange-30);
--rl-warning-border: var(--rl-primitive-orange-30);
/* === CAUTION ===
* A softer caution tier (yellow), distinct from warning. */
--rl-caution-surface: var(--rl-primitive-yellow-10);
--rl-caution-border: var(--rl-primitive-yellow-30);
/* === SUCCESS ===
* Positive confirmation: completed actions, valid input, healthy status. */
--rl-success-surface: var(--rl-primitive-green-10);
--rl-success-text: var(--rl-primitive-green-40);
--rl-success-surface-active: var(--rl-primitive-green-15);
--rl-success-border: var(--rl-primitive-green-30);
/* === PENDING ===
* In-progress / awaiting states. */
--rl-pending-surface: var(--rl-primitive-emerald-10);
/* === INFO ===
* Neutral informational messaging and hints. */
--rl-info-surface: var(--rl-primitive-blue-10);
--rl-info-surface-active: var(--rl-primitive-blue-15);
--rl-info-text: var(--rl-primitive-blue-50);
--rl-info-border: var(--rl-primitive-blue-30);
/* === SELECTED ===
* Selection state: selected rows, items, and toggles. */
--rl-selected-solid: var(--rl-primitive-teal-30);
--rl-selected-solid-hover: var(--rl-primitive-teal-40);
--rl-selected-solid-accent: var(--rl-primitive-teal-40);
--rl-selected-solid-accent-hover: var(--rl-primitive-teal-50);
--rl-selected-surface: var(--rl-primitive-teal-10);
--rl-selected-surface-active: var(--rl-primitive-teal-15);
--rl-selected-surface-hover: var(--rl-primitive-teal-20);
--rl-selected-surface-muted: var(--rl-primitive-teal-15);
--rl-selected-surface-subtle: var(--rl-primitive-teal-10);
--rl-selected-text: var(--rl-primitive-teal-60);
--rl-selected-text-on-muted: var(--rl-primitive-teal-60);
--rl-selected-solid-disabled: var(--rl-primitive-teal-20);
/* === HIGHLIGHT ===
* Draws attention/emphasis without a status meaning (gold): highlighted content. */
--rl-highlight-solid: var(--rl-primitive-gold-30);
--rl-highlight-surface: var(--rl-primitive-gold-15);
--rl-highlight-text: var(--rl-primitive-gold-60);
--rl-highlight-text-secondary: var(--rl-primitive-gold-50);
--rl-highlight-on-solid: var(--rl-primitive-gold-20);
--rl-highlight-border: var(--rl-primitive-gold-30);
--rl-highlight-border-strong: var(--rl-primitive-gold-60);
--rl-highlight-surface-subtle: var(--rl-primitive-gold-10);
--rl-highlight-surface-muted: var(--rl-primitive-gold-10);
--rl-highlight-text-muted: var(--rl-primitive-gold-50);
--rl-highlight-solid-muted: var(--rl-primitive-gold-30);
/* === BADGE ===
* Component-scoped: Badge owns its own per-color tokens rather than
* sharing the role families above, since its 11 colors don't map 1:1
* onto danger/warning/success/etc. */
--rl-badge-blue-bg: var(--rl-primitive-blue-10);
--rl-badge-blue-text: var(--rl-primitive-blue-50);
--rl-badge-blue-bg-strong: var(--rl-primitive-blue-20);
--rl-badge-blue-text-strong: var(--rl-primitive-blue-60);
/* purple */
--rl-badge-purple-bg: var(--rl-primitive-purple-10);
--rl-badge-purple-text: var(--rl-primitive-purple-50);
--rl-badge-purple-bg-strong: var(--rl-primitive-purple-20);
--rl-badge-purple-text-strong: var(--rl-primitive-purple-60);
/* gray */
--rl-badge-gray-bg: var(--rl-primitive-gray-10);
--rl-badge-gray-text: var(--rl-primitive-gray-50);
--rl-badge-gray-bg-strong: var(--rl-primitive-gray-20);
--rl-badge-gray-text-strong: var(--rl-primitive-gray-60);
/* green */
--rl-badge-green-bg: var(--rl-primitive-green-10);
--rl-badge-green-text: var(--rl-primitive-green-50);
--rl-badge-green-bg-strong: var(--rl-primitive-green-20);
--rl-badge-green-text-strong: var(--rl-primitive-green-60);
/* yellow */
--rl-badge-yellow-bg: var(--rl-primitive-yellow-10);
--rl-badge-yellow-text: var(--rl-primitive-yellow-50);
--rl-badge-yellow-bg-strong: var(--rl-primitive-yellow-20);
--rl-badge-yellow-text-strong: var(--rl-primitive-yellow-60);
/* orange */
--rl-badge-orange-bg: var(--rl-primitive-orange-10);
--rl-badge-orange-text: var(--rl-primitive-orange-50);
--rl-badge-orange-bg-strong: var(--rl-primitive-orange-20);
--rl-badge-orange-text-strong: var(--rl-primitive-orange-60);
/* red */
--rl-badge-red-bg: var(--rl-primitive-red-10);
--rl-badge-red-text: var(--rl-primitive-red-50);
--rl-badge-red-bg-strong: var(--rl-primitive-red-20);
--rl-badge-red-text-strong: var(--rl-primitive-red-60);
/* alert */
--rl-badge-alert-bg: var(--rl-primitive-white);
--rl-badge-alert-text: var(--rl-primitive-red-40);
--rl-badge-alert-border: var(--rl-primitive-red-40);
--rl-badge-alert-bg-strong: var(--rl-primitive-red-40);
--rl-badge-alert-text-strong: var(--rl-primitive-white);
/* teal */
--rl-badge-teal-bg: var(--rl-primitive-teal-10);
--rl-badge-teal-text: var(--rl-primitive-teal-50);
--rl-badge-teal-bg-strong: var(--rl-primitive-teal-20);
--rl-badge-teal-text-strong: var(--rl-primitive-teal-60);
/* navy */
--rl-badge-navy-bg: var(--rl-primitive-navy-10);
--rl-badge-navy-text: var(--rl-primitive-navy-50);
--rl-badge-navy-bg-strong: var(--rl-primitive-navy-20);
--rl-badge-navy-text-strong: var(--rl-primitive-navy-60);
/* emerald */
--rl-badge-emerald-bg: var(--rl-primitive-emerald-10);
--rl-badge-emerald-text: var(--rl-primitive-emerald-50);
--rl-badge-emerald-bg-strong: var(--rl-primitive-emerald-20);
--rl-badge-emerald-text-strong: var(--rl-primitive-emerald-60);
/* === KEY HINT ===
* Keyboard-shortcut hint chip. -primary is the default (e.g. inside a
* tooltip); -secondary is the variant used inline in a row/list (e.g. the
* Favorites menu's digit shortcuts). */
--rl-key-surface-primary: var(--rl-primitive-teal-60);
--rl-key-on-surface-primary: var(--rl-primitive-white);
--rl-key-surface-secondary: var(--rl-primitive-gray-15);
--rl-key-on-surface-secondary: var(--rl-primitive-black);
/* === FORMULA ===
* Formula/code syntax highlighting for formula editors and code display.
* Grouped by grammar role (keyword, function, column, value, text). */
--rl-formula-keyword: var(--rl-primitive-black);
--rl-formula-function: var(--rl-primitive-blue-40);
--rl-formula-column: var(--rl-primitive-teal-40);
--rl-formula-value: var(--rl-primitive-green-40);
--rl-formula-text: var(--rl-primitive-orange-30);
/* === NEUTRAL SURFACES ===
* Default page and component backgrounds, plus hover/active/disabled states. */
--rl-neutral-surface-default: var(--rl-primitive-white);
--rl-neutral-surface-subtle: var(--rl-primitive-wash);
--rl-neutral-surface-muted: var(--rl-primitive-gray-10);
--rl-neutral-surface-page: var(--rl-neutral-surface-muted);
--rl-neutral-surface-hover: var(--rl-primitive-gray-10);
--rl-neutral-surface-active: var(--rl-primitive-gray-15);
--rl-neutral-surface-disabled: var(--rl-primitive-gray-10);
--rl-neutral-surface-highlighted-accent: var(--rl-primitive-teal-20);
--rl-neutral-surface-highlighted: var(--rl-primitive-blue-15);
/* === RAISED / FLOATING SURFACES ===
* Surfaces that sit above the page: popovers, menus, floating panels. */
--rl-neutral-surface-raised: var(--rl-primitive-black);
--rl-neutral-surface-floating: var(--rl-primitive-black);
/* === SCRIM / LOADER ===
* Full-screen overlays: modal scrims and loading covers. Built on ink-*
* alpha values, which have no "-ext"; no dark variant. */
--rl-neutral-surface-scrim: rgb(var(--rl-primitive-ink-black) / 60%);
/* === SHELL SURFACES ===
* App-chrome backgrounds: the persistent nav rail and header frame. */
--rl-shell-surface: var(--rl-primitive-gray-50);
/* The nav rail / app-chrome backdrop -- the darkest shell surface. On-palette in
* both modes (black in light, slate-15 in dark), so no longer --rl-deprecated-*. */
--rl-shell-surface-default: var(--rl-primitive-black);
--rl-shell-surface-header: var(--rl-shell-surface);
--rl-shell-surface-hover: var(--rl-primitive-gray-60);
--rl-shell-surface-secondary-hover: var(--rl-primitive-gray-40);
--rl-shell-surface-secondary-selected: var(--rl-primitive-gray-20);
--rl-shell-surface-selected: var(--rl-primitive-teal-60);
--rl-shell-surface-selected-default: var(--rl-primitive-gray-50);
--rl-shell-surface-selected-hover: var(--rl-primitive-teal-50);
/* RL-Refresh nav key-hint badge fill (NOT a row surface): the non-active pill vs
* the active/current item's brighter pill. Split from --rl-shell-surface-selected
* (-hover) because the badge and the row diverge in dark mode. Nav-only consumer. */
--rl-shell-surface-emphasis: var(--rl-primitive-teal-60);
--rl-shell-surface-emphasis-strong: var(--rl-primitive-teal-50);
/* Text/glyph on an emphasis surface (the nav key-hint badge): white on the light
* teal pill, black-ext on the dark slate pill. Nav-only consumer. */
--rl-shell-on-emphasis: var(--rl-primitive-white);
--rl-shell-control: var(--rl-primitive-gray-40);
--rl-shell-control-hover: var(--rl-primitive-gray-30);
--rl-shell-inset: var(--rl-primitive-gray-60);
/* === SHELL BORDERS ===
* Borders and dividers within the app shell. */
--rl-shell-border-divider: var(--rl-primitive-teal-60); /* sub-nav "Back to X" header divider */
--rl-shell-border-inset-subtle: var(--rl-primitive-gray-60);
--rl-shell-border-secondary: var(--rl-primitive-gray-40); /* search-bar-shell border */
--rl-shell-border-secondary-hover: var(--rl-primitive-gray-30); /* search-bar-shell hover border */
/* === SHELL INSET TEXT ===
* Text and icons on inset areas of the shell. */
--rl-shell-on-inset: var(--rl-primitive-white);
--rl-shell-on-inset-secondary: var(--rl-primitive-gray-20);
--rl-shell-on-inset-secondary-hover: var(--rl-primitive-white);
--rl-shell-on-inset-muted: var(--rl-primitive-gray-30);
--rl-shell-on-inset-muted-hover: var(--rl-primitive-white);
--rl-shell-on-inset-muted-secondary-hover: var(--rl-primitive-white);
/* === SHELL TEXT ===
* Text and icons on the app-shell chrome. */
--rl-shell-text: var(--rl-primitive-white);
--rl-shell-text-secondary-muted: var(--rl-primitive-gray-30);
--rl-shell-icon-secondary: var(--rl-primitive-gray-40);
--rl-shell-icon-active: var(--rl-primitive-teal-20);
--rl-shell-text-default-active: var(--rl-primitive-gray-50);
--rl-shell-icon-default-active: var(--rl-primitive-gray-20);
--rl-shell-icon: var(--rl-primitive-gray-40);
--rl-shell-icon-accent: var(--rl-primitive-teal-50);
/* === NEUTRAL TEXT ===
* Default text and icons on neutral surfaces. */
--rl-neutral-text-default: var(--rl-primitive-black);
--rl-neutral-text-default-hover: var(--rl-primitive-gray-60);
--rl-neutral-text-disabled: var(--rl-primitive-gray-20);
--rl-neutral-text-on-inverse: var(--rl-primitive-white);
--rl-neutral-text-on-floating: var(--rl-primitive-white);
--rl-neutral-text-subdued: var(--rl-primitive-gray-60);
--rl-neutral-text-subtle: var(--rl-primitive-gray-50);
--rl-neutral-text-emphasis: var(--rl-primitive-teal-40);
--rl-neutral-text-disabled-strong: var(--rl-primitive-gray-40);
--rl-info-icon: var(--rl-primitive-blue-40);
/* === NEUTRAL TEXT (TIERS) ===
* Lower-emphasis neutral text: secondary, muted, and tertiary. */
--rl-neutral-text-secondary: var(--rl-primitive-gray-40);
--rl-neutral-text-secondary-hover: var(--rl-primitive-gray-50);
--rl-neutral-text-strong: var(--rl-primitive-gray-50);
--rl-neutral-text-muted: var(--rl-primitive-gray-30);
--rl-neutral-text-tertiary: var(--rl-primitive-gray-15);
/* === INSET ===
* Recessed/inset areas and their text and borders (wells, embedded fields). */
--rl-inset-surface-emphasis: var(--rl-primitive-gray-20);
--rl-inset-text-secondary: var(--rl-primitive-gray-50);
--rl-inset-text-muted: var(--rl-primitive-gray-40);
--rl-inset-border: var(--rl-primitive-gray-20);
--rl-inset-border-subtle: var(--rl-primitive-gray-15);
/* === BORDERS ===
* Borders and dividers: neutral edges, focus rings, accent and selected borders. */
--rl-neutral-border-default: var(--rl-primitive-gray-20);
--rl-neutral-border-strong: var(--rl-primitive-gray-50);
--rl-neutral-border-secondary: var(--rl-primitive-gray-40);
--rl-neutral-border-muted: var(--rl-primitive-gray-30);
--rl-neutral-border-muted-hover: var(--rl-primitive-gray-40);
--rl-neutral-border-subtle: var(--rl-primitive-gray-15);
--rl-neutral-border-divider: var(--rl-primitive-gray-10);
--rl-neutral-border-wash: var(--rl-primitive-wash);
--rl-focus-ring: var(--rl-primitive-blue-30);
--rl-focus-ring-strong: var(--rl-primitive-blue-50);
--rl-focus-ring-secondary: var(--rl-primitive-teal-30);
--rl-focus-ring-tertiary: var(--rl-primitive-gray-40);
--rl-focus-ring-hover: var(--rl-primitive-gray-20);
--rl-focus-ring-inner: var(--rl-primitive-white);
--rl-accent-border: var(--rl-primitive-teal-40);
--rl-accent-border-subtle: var(--rl-primitive-teal-20);
--rl-accent-border-hover: var(--rl-primitive-teal-50);
--rl-selected-border: var(--rl-primitive-teal-15);
/* === CONDITIONAL FORMATTING SWATCHES === */
--rl-swatch-0: var(--rl-primitive-white);
--rl-swatch-1: var(--rl-primitive-navy-10);
--rl-swatch-2: var(--rl-primitive-blue-10);
--rl-swatch-3: var(--rl-primitive-emerald-10);
--rl-swatch-4: var(--rl-primitive-green-10);
--rl-swatch-5: var(--rl-primitive-yellow-10);
--rl-swatch-6: var(--rl-primitive-orange-10);
--rl-swatch-7: var(--rl-primitive-red-10);
--rl-swatch-8: var(--rl-primitive-purple-10);
--rl-swatch-9: var(--rl-primitive-gray-20);
--rl-swatch-10: var(--rl-primitive-navy-20);
--rl-swatch-11: var(--rl-primitive-blue-20);
--rl-swatch-12: var(--rl-primitive-emerald-20);
--rl-swatch-13: var(--rl-primitive-green-20);
--rl-swatch-14: var(--rl-primitive-yellow-20);
--rl-swatch-15: var(--rl-primitive-orange-20);
--rl-swatch-16: var(--rl-primitive-red-20);
--rl-swatch-17: var(--rl-primitive-purple-20);
--rl-swatch-18: var(--rl-primitive-gray-10);
--rl-swatch-19: var(--rl-primitive-gray-40);
/* UI_EXTENDED_SWATCH_COLORS: steps 30/50 per hue, each led by a neutral gray. */
--rl-swatch-20: var(--rl-primitive-gray-30);
--rl-swatch-21: var(--rl-primitive-navy-30);
--rl-swatch-22: var(--rl-primitive-blue-30);
--rl-swatch-23: var(--rl-primitive-emerald-30);
--rl-swatch-24: var(--rl-primitive-green-30);
--rl-swatch-25: var(--rl-primitive-yellow-30);
--rl-swatch-26: var(--rl-primitive-orange-30);
--rl-swatch-27: var(--rl-primitive-red-30);
--rl-swatch-28: var(--rl-primitive-purple-30);
--rl-swatch-29: var(--rl-primitive-gray-50);
--rl-swatch-30: var(--rl-primitive-navy-50);
--rl-swatch-31: var(--rl-primitive-blue-50);
--rl-swatch-32: var(--rl-primitive-emerald-50);
--rl-swatch-33: var(--rl-primitive-green-50);
--rl-swatch-34: var(--rl-primitive-yellow-50);
--rl-swatch-35: var(--rl-primitive-orange-50);
--rl-swatch-36: var(--rl-primitive-red-50);
--rl-swatch-37: var(--rl-primitive-purple-50);
/* === CONDITIONAL FORMATTING SWATCHES (TEXT) === */
--rl-swatch-text-0: var(--rl-primitive-navy-50);
--rl-swatch-text-1: var(--rl-primitive-blue-50);
--rl-swatch-text-2: var(--rl-primitive-emerald-50);
--rl-swatch-text-3: var(--rl-primitive-green-50);
--rl-swatch-text-4: var(--rl-primitive-yellow-50);
--rl-swatch-text-5: var(--rl-primitive-orange-50);
--rl-swatch-text-6: var(--rl-primitive-red-50);
--rl-swatch-text-7: var(--rl-primitive-purple-50);
--rl-swatch-text-8: var(--rl-neutral-text-default);
/* UI_EXTENDED_SWATCH_COLORS: shared white text for every step-50 background. */
--rl-swatch-text-9: var(--rl-primitive-white);
/* === CONDITIONAL FORMATTING SWATCHES (BORDER) === */
--rl-swatch-border-0: var(--rl-primitive-pure-black);
--rl-swatch-border-1: var(--rl-primitive-gray-30);
--rl-swatch-border-2: var(--rl-primitive-navy-30);
--rl-swatch-border-3: var(--rl-primitive-blue-30);
--rl-swatch-border-4: var(--rl-primitive-emerald-30);
--rl-swatch-border-5: var(--rl-primitive-green-30);
--rl-swatch-border-6: var(--rl-primitive-yellow-30);
--rl-swatch-border-7: var(--rl-primitive-orange-30);
--rl-swatch-border-8: var(--rl-primitive-red-30);
--rl-swatch-border-9: var(--rl-primitive-purple-30);
--rl-swatch-border-10: var(--rl-primitive-gray-20);
/* === BRAND ===
* Ridgeline brand-mark colors (intentionally not themed). primary/secondary
* sit on off-palette Deviation primitives with no "-ext", so no dark
* variant; mark-highlight aliases neutral-surface-default and follows it
* into dark mode automatically. */
--rl-brand-primary: var(--rl-primitive-brand-teal);
--rl-brand-secondary: var(--rl-primitive-brand-navy);
--rl-brand-mark-highlight: var(--rl-neutral-surface-default);
/* === EFFECTS & RADII ===
* Shadows, elevation, and corner radii. The ink-black/-teal alpha shadows
* (subtle/soft/medium/strong/selected-glow) have no dark substitute.
* flat-subtle/flat-medium sit on gray-15/gray-20, which re-point to
* mirrored Slate in dark mode (see the dark-scheme comment in
* themes/refresh.css).
* elevation-overlay and the radii aren't colors, so they don't need one. */
--rl-shadow-subtle: rgb(var(--rl-primitive-ink-black) / 3%);
--rl-shadow-soft: rgb(var(--rl-primitive-ink-black) / 8%);
--rl-shadow-medium: rgb(var(--rl-primitive-ink-black) / 10%);
--rl-shadow-strong: rgb(var(--rl-primitive-ink-black) / 15%);
--rl-shadow-selected-glow: rgb(var(--rl-primitive-ink-teal) / 10%);
--rl-shadow-flat-subtle: var(--rl-primitive-gray-15);
--rl-shadow-flat-medium: var(--rl-primitive-gray-20);
--rl-elevation-overlay: none;
/* Elevation scale. Holds the whole box-shadow rather than a colour, because
* light and dark differ in geometry, not just colour. Only -high exists today
* (detached overlays: modal, popover, menu, dropdown, date picker); low/med are
* reserved for when there are real values for them. Box-shadows only. */
--rl-elevation-high:
0 0 2px 1px var(--rl-shadow-subtle),
0 6px 10px 2px var(--rl-shadow-soft);
--rl-radius-none: var(--rl-primitive-radius-none);
--rl-radius-small: var(--rl-primitive-radius-small);
--rl-radius-medium: var(--rl-primitive-radius-medium);
--rl-radius-large: var(--rl-primitive-radius-large);
/* =====================================================================
* QUARANTINE
* Off-palette pins, *-deprecated tokens, and dead (zero-consumer) tokens. These
* follow the main concept-first naming but are pending a design decision, so do
* not build on them. See token-rename/consolidation-candidates.md for the follow-up.
* 🔴 🟡 🟢 KEEP. TALK TO DESIGN. UPDATE PRIMITIVES FILE. Not in sapling. The primitive is NOT in the color palette
* ===================================================================== */
/* --- SELECTED wash --- */
/* 🟡 brilliant-white is off-palette with no "-ext"; no dark variant. TALK TO DESIGN. KEEP */
--rl-deprecated-selected-wash: var(--rl-primitive-brilliant-white);
/* --- Navigation.scss / Navigation.module.scss / NavigationMenu.scss --- */
/* 🟡 Just in Navigation.scss and Navigation.module.scss.
The primitive is NOT in the color palette. Not in sapling. TALK TO DESIGN. KEEP */
--rl-deprecated-accent-solid-active: var(--rl-primitive-scuba-blue);
/* 🟡 Only used once in NavigationMenu.scss.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
/* --- icon.module.scss / typography.scss --- */
/* 🟢 Used in typography.scss and icon.module.scss. Not in sapling. KEEP */
--rl-deprecated-neutral-text-default-emphasis: var(--rl-primitive-teal-30);
/* 🟢 Used in icon.module.scss. Not in sapling. KEEP */
--rl-deprecated-info-icon: var(--rl-primitive-blue-30);
/* 🟢 Used in icon.module.scss. Not in sapling. KEEP */
--rl-deprecated-accent-text-on-inverse: var(--rl-primitive-teal-20);
/* 🟡 Used in icon.module.scss. Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. */
--rl-deprecated-neutral-text-dark-blue: var(--rl-primitive-dark-blue);
/* --- dropdownMenu.module.scss --- */
/* 🟡 Used once in dropdownMenu.module.scss.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-text-wash: var(--rl-primitive-magenta);
/* --- fields.module.scss --- */
/* 🟡 Used once in fields.module.scss.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-border-default: var(--rl-primitive-sky-gray);
/* --- alertbar.module.scss --- */
/* 🟢 Used once in alertbar.module.scss. Not in sapling. KEEP. */
--rl-deprecated-danger-on-container-hover: var(--rl-primitive-red-60);
/* 🟢 Used once in alertbar.module.scss. Not in sapling. KEEP. */
--rl-deprecated-success-on-container-hover: var(--rl-primitive-green-60);
/* 🟢 Used once in alertbar.module.scss. Not in sapling. KEEP. */
--rl-deprecated-warning-on-container-hover: var(--rl-primitive-orange-60);
/* 🟢 Used once in alertbar.module.scss. Not in sapling. KEEP. */
--rl-deprecated-accent-on-container-hover: var(--rl-primitive-teal-60);
/* --- NotificationsDropdownMenu.scss --- */
/* 🟡 Used once in NotificationsDropdownMenu.scss.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-notifications-body: var(--rl-primitive-dove-gray);
/* 🟡 Used once in NotificationsDropdownMenu.scss.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-notifications-meta: var(--rl-primitive-dusty-gray);
/* --- charts.module.scss --- */
/* 🟡 Used once in cahrts.module.scss.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-text-chart-line: var(--rl-primitive-ship-cove);
/* 🟡 Used once in cahrts.module.scss.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-shadow-tooltip: var(--rl-primitive-ship-cove);
/* --- Main.css --- */
/* 🟡 Used once in Main.css.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
/* --- Multiple / various places --- */
/* 🟡 Used in a few places.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-text-light-teal: var(--rl-primitive-hushed-green);
/* 🟡 Used in multiple places.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-light-teal: var(--rl-primitive-star-white);
/* 🟡 Used in multiple places. Almost not in sapling (only inside ArrayEditorStory.scss).
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-border-divider: var(--rl-primitive-sky-gray);
/* 🟢 Used in multiple places. Migth be used in bad places like AlertBar.scss. KEEP. */
--rl-deprecated-danger-on-container: var(--rl-primitive-red-50);
/* 🟢 Used multiple times in sapling. KEEP. */
--rl-deprecated-success-container: var(--rl-primitive-green-40);
/* 🟢 Used multiple. Not in sapling. KEEP. */
--rl-deprecated-success-on-container: var(--rl-primitive-green-50);
/* 🟢 Use in tooltip and tooltipv2.scss. KEEP. */
--rl-deprecated-warning-container: var(--rl-primitive-orange-40);
/* 🟢 Use in multiple places. KEEP */
--rl-deprecated-warning-on-container: var(--rl-primitive-orange-50);
/* 🟡 Used in a bunch of places. DataGrid included.
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-text-default: rgb(var(--rl-primitive-ink-spruce));
/* --- DataGrid --- */
/* 🟡 Used in DataGrid. Not in sapling.
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-light-teal-subtle: var(--rl-primitive-hushed-green);
/* 🟡 Used in DataGrid. Not in sapling.
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-overlay-faint: var(--rl-primitive-wash);
/* 🟢 Used once in DataGrid. Not in sapling. KEEP. */
--rl-deprecated-neutral-surface-overlay-subtle: var(--rl-primitive-gray-10);
/* 🟢 Used once in DataGrid. Not in sapling. KEEP. */
--rl-deprecated-neutral-surface-overlay-medium: var(--rl-primitive-gray-30);
/* 🟡 Used in DataGrid. Not in sapling.
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-overlay-faint-alpha: var(--rl-primitive-wash);
/* 🟡 Used in DataGrid27's button cell (primary variant background).
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-accent-solid-legacy: var(--rl-primitive-harbor-teal);
/* 🟡 Used in DataGrid27's button cell (primary variant background, hover).
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-accent-solid-legacy-hover: var(--rl-primitive-abyss-teal);
/* 🟡 Used in DataGrid27's button cell (primary variant text/svg). Paired with
--rl-deprecated-accent-solid-legacy above, which is frozen (no dark-mode
re-point), so this stays a fixed white rather than tracking
--rl-accent-on-solid, which now varies with the (brightening) adopted
--rl-accent-solid instead. TALK TO DESIGN. KEEP */
--rl-deprecated-accent-on-solid-legacy: var(--rl-primitive-white);
/* 🟡 Used in DataGrid27's button cell (default/secondary variant border).
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-border-secondary-legacy: var(--rl-primitive-gunsmoke);
/* 🟡 Used in DataGrid27's button cell (default/secondary variant background, hover).
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-hover-legacy: var(--rl-primitive-pearl-mist);
/* 🟡 Used in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-selected-primary: var(--rl-primitive-brand-teal);
/* 🟢 Used once in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-surface-flash-changed: var(--rl-primitive-teal-15);
/* 🟢 Used once in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-surface-flash-increase: var(--rl-primitive-green-15);
/* 🟢 Used once in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-surface-flash-decrease: var(--rl-primitive-red-15);
/* 🟢 Used once in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-surface-flash-removed: var(--rl-primitive-gray-15);
/* 🟢 Used once in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-surface-flash-data-changed: var(--rl-primitive-blue-10);
/* 🟡 Used in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-active: var(--rl-primitive-sky-gray);
/* 🟡 Used in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-skeleton: var(--rl-primitive-sky-gray);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-surface-scrollbar: var(--rl-primitive-gray-20);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-surface-scrollbar-hover: var(--rl-primitive-gray-40);
/* 🟡 Used in DataGrid. With Alpha. Not in Sapling.
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-loading-overlay: rgb(var(--rl-primitive-ink-white) / 85%);
/* 🟡 Used once in DataGrid. With Alpha. Not in Sapling.
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-surface-scrim: rgb(var(--rl-primitive-ink-white) / 70%);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-text-overlay-medium: var(--rl-primitive-gray-30);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-text-overlay-bold: var(--rl-primitive-gray-50);
/* 🟡 Used in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-accent-text: var(--rl-primitive-brand-teal);
/* 🟢 Used once in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-warning-text: var(--rl-primitive-orange-40);
/* 🟡 Used once in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-text-overlay-soft-alpha: var(--rl-primitive-sky-gray);
/* 🟢 Used once in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-border-overlay-subtle: var(--rl-primitive-gray-10);
/* 🟢 Used once in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-border-overlay-soft: var(--rl-primitive-gray-20);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-neutral-border-overlay-medium: var(--rl-primitive-gray-30);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-warning-border: var(--rl-primitive-orange-40);
/* 🟡 Used in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-neutral-border-overlay-soft-alpha: var(--rl-primitive-sky-gray);
/* 🟡 Used in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-shadow-overlay-faint: var(--rl-primitive-wash);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-shadow-overlay-subtle: var(--rl-primitive-gray-10);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-shadow-overlay-soft: var(--rl-primitive-gray-20);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-shadow-overlay-medium: var(--rl-primitive-gray-30);
/* 🟡 Used in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-shadow-focus-primary: var(--rl-primitive-brand-teal);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-shadow-focus: var(--rl-primitive-blue-30);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-shadow-error: var(--rl-primitive-red-40);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-shadow-warning: var(--rl-primitive-orange-40);
/* 🟢 Used in DataGrid. Not in Sapling . KEEP */
--rl-deprecated-shadow-hint: var(--rl-primitive-gray-40);
/* 🟡 Used once in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-shadow-flat-medium: var(--rl-primitive-sky-gray);
/* 🟡 Used in DataGrid. Not in Sapling .
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-shadow-flat-divider: var(--rl-primitive-sky-gray);
/* 🟡 Used in DataGrid. Not in Sapling. With Alpha
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-shadow-overlay-subtle-alpha: rgb(var(--rl-primitive-ink-spruce) / 10%);
/* 🟡 Used in DataGrid. Not in Sapling. With Alpha
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-shadow-faint: rgb(var(--rl-primitive-ink-black) / 5%);
/* not legacy */
/* 🟡 Used multiple times in AI-Assistant.
The primitive is NOT in the color palette. It has a hover that is in the color palette tho.
Not in sapling. KEEP. TALK TO DESIGN */
--rl-deprecated-neutral-surface-inverse: var(--rl-primitive-darkest-spruce);
/* 🟡 AI-Assistant chat history dropdown. This dark popover predates the token system and has
no themeable semantic role yet. The default values below match the flag-off look 1:1 (the
flag-off colors are hardcoded and do not theme), so turning the adoption flag on is a no-op
under the default theme. Named themes re-point these for light/dark mode (see the ai-history
block in catppuccin.css). Consolidate when design gives the popover real semantics.
TALK TO DESIGN. KEEP */
/* 🟡 Used in multiple places specially in NavigationMenu and SiteNavigation.
The primitive is NOT in the color palette. Not in sapling. KEEP. TALK TO DESIGN */
--rl-deprecated-shell-text-default-hover: var(--rl-primitive-darkest-spruce);
/* 🟢 Only use in Client Portal. KEEP (find new name) */
--rl-deprecated-categorical-text: var(--rl-primitive-purple-40);
/* 🟢 Used inside of AlertBar.scss. KEEP */
--rl-deprecated-warning-surface-active: var(--rl-primitive-orange-15);
/* 🟢 Used inside of AlertBar.scss. KEEP */
--rl-deprecated-accent-surface-active: var(--rl-primitive-teal-15);
/* 🟢 Used in the AI-Assistant once..
The primitive is in the color palette (the figma version). Not in sapling.
KEEP. UPDATE PRIMITIVES FILE */
/* 🟢 Used in the AI-Assistant once.
The primitive is in the color palette (the figma version). Not in sapling.
KEEP. UPDATE PRIMITIVES FILE */
/* 🟢 Used in the AI-Assistant once.
The primitive is in the color palette (the figma version). Not in sapling.
KEEP. UPDATE PRIMITIVES FILE */
/* 🟡 Just in the LoadingPlaceholder.scss.
The primitive is NOT in the color palette. Not in sapling. KEEP. TALK TO DESIGN */
--rl-deprecated-skeleton-surface-dark: var(--rl-primitive-mallard-green);
/* 🟡 Just in the LoadingPlaceholder.scss.
The primitive is NOT in the color palette. Not in sapling. KEEP. TALK TO DESIGN */
--rl-deprecated-skeleton-surface-dark-shimmer: var(--rl-primitive-pine-grove);
/* 🟡 Just in the LoadingPlaceholder.scss.
The primitive is NOT in the color palette. Not in sapling. KEEP. TALK TO DESIGN */
--rl-deprecated-skeleton-surface-light: var(--rl-primitive-snow-white);
/* 🟡 Just in the LoadingPlaceholder.scss.
The primitive is NOT in the color palette. Not in sapling. KEEP. TALK TO DESIGN */
--rl-deprecated-skeleton-surface-light-shimmer: var(--rl-primitive-sky-gray);
/* --- accounting-ui (RLA-427015 / RLA-427016) --- */
/* 🟡 Section title text in IncomeExpenseTypes.css.
accounting-ui only. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
/* 🟡 Loading/description text in IncomeExpenseTypes.css.
accounting-ui only. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
/* 🟡 Foundation black used in stepper.scss.
accounting-ui only. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP.
Pinned to --rl-primitive-pure-black (rgb(0 0 0)) since --rl-primitive-black
now carries the Figma "Black" swatch value. */
/* --- data-ui (RLA-246622) --- */
/* --- fieldLockingSidePanel.scss --- */
/* 🟡 Active/selected lock icon color in fieldLockingSidePanel.scss. KEEP */
--rl-deprecated-dataui-lock-icon-active: var(--rl-primitive-teal-30);
/* 🟡 Inactive/muted lock icon color in fieldLockingSidePanel.scss. KEEP */
--rl-deprecated-dataui-lock-icon-inactive: var(--rl-primitive-gray-30);
/* --- DataMappingsDataTable.css / ConfigurableFinancialInstitutions.css /
RecordLogDataTable.css / TransmissionsHubDataTable.css --- */
/* 🟡 Table row hover background in DataMappingsDataTable.css and
ConfigurableFinancialInstitutions.css. KEEP */
--rl-deprecated-dataui-table-row-hover: var(--rl-primitive-athens-gray);
/* 🟡 Container border and thead border-bottom in DataMappingsDataTable.css,
ConfigurableFinancialInstitutions.css, RecordLogDataTable.css and
TransmissionsHubDataTable.css (~9 uses). KEEP */
--rl-deprecated-dataui-table-border: var(--rl-primitive-gainsboro);
/* --- DataMappingsDataTable.css / ConfigurableFinancialInstitutions.css --- */
/* 🟡 Row/cell border-bottom dividers in DataMappingsDataTable.css and
ConfigurableFinancialInstitutions.css (6 uses). KEEP */
--rl-deprecated-dataui-table-row-divider: var(--rl-primitive-gallery-gray);
/* 🟡 Thead background in DataMappingsDataTable.css and
ConfigurableFinancialInstitutions.css (4 uses). KEEP */
--rl-deprecated-dataui-table-head-background: var(--rl-primitive-lotion);
/* --- ProcessTables.scss / RecipesInfiniteScrollList.scss --- */
/* 🟡 Secondary/loading text color in ProcessTables.scss and
RecipesInfiniteScrollList.scss (3 uses). KEEP */
--rl-deprecated-dataui-text-secondary: var(--rl-primitive-nevada);
/* 🟡 Error text color in ProcessTables.scss and RecipesInfiniteScrollList.scss
(2 uses). KEEP */
--rl-deprecated-dataui-text-error: var(--rl-primitive-persian-red);
/* --- ProcessRunDetailModal.scss --- */
/* 🟡 Secondary text color in ProcessRunDetailModal.scss (2 uses, same file). KEEP */
--rl-deprecated-dataui-modal-text-secondary: var(--rl-primitive-granite-gray);
/* 🟡 Copy-success background. Only one use. KEEP */
--rl-deprecated-dataui-copy-success-background: var(--rl-primitive-bubbles);
/* 🟡 Copy-success text. Only one use. KEEP */
--rl-deprecated-dataui-copy-success-text: var(--rl-primitive-camarone);
/* 🟡 Copy-error background. Only one use. KEEP */
--rl-deprecated-dataui-copy-error-background: var(--rl-primitive-tutu);
/* 🟡 Copy-error text. Only one use. KEEP */
--rl-deprecated-dataui-copy-error-text: var(--rl-primitive-carnelian);
/* --- fontColor (gray keyword) --- */
/* 🟡 Muted text color. Only one use. KEEP */
/* --- tom-pc-ui migration (token targets audit, 2026-07-01) --- */
/* 🟡 Body text color across post-trade dashboard modals (Commissions/Fees/Notes
compose containers, confirm-changes dialogs, AI insights section).
Not in sapling. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-tom-text-default: var(--rl-primitive-mine-shaft);
/* 🟢 Divider border in ViewConfigurableFinancialInstitution.scss.
Primitive already exists in the palette (gainsboro). KEEP */
/* 🟡 Dark row background in FixMessagesDataTable.scss.
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-tom-surface-dark: var(--rl-primitive-bunker);
/* 🟡 Hover background across CommissionsEditor.scss / FeesEditor.scss.
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-tom-surface-hover: var(--rl-primitive-white-smoke);
/* 🟡 Focus outline across CommissionsEditor.scss / FeesEditor.scss.
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-tom-focus-ring: var(--rl-primitive-cerulean);
/* 🟡 Warning solid (border/background/text) in tradeMatchingGrid.scss and
TomWarnings.scss. The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-tom-warning-solid: var(--rl-primitive-russet);
/* 🟡 5%-opacity black fill in TableActionsRenderer.scss. Alpha-modified, no
"-ext". TALK TO DESIGN. KEEP */
/* 🟢 Fully-transparent placeholder border/background used as a reset value in
TableActionsRenderer.scss and tradeMatchingGrid.scss. KEEP */
--rl-deprecated-tom-transparent: rgb(var(--rl-primitive-ink-black) / 0%);
/* 🟡 53.3%-opacity white surface in dialogFix.scss and StorybookOverrides.scss.
Alpha-modified, no "-ext". TALK TO DESIGN. KEEP */
--rl-deprecated-tom-surface-translucent: rgb(var(--rl-primitive-ink-white) / 53.3%);
/* 🟡 50%-opacity white border in TableActionEditor.scss. Alpha-modified, no
"-ext". TALK TO DESIGN. KEEP */
--rl-deprecated-tom-border-translucent: rgb(var(--rl-primitive-ink-white) / 50%);
/* 🟡 5%-opacity ink-spruce surface in strategy-view.scss. Alpha-modified, no
"-ext". TALK TO DESIGN. KEEP */
/* 🟡 Inset focus-ring outline for the strategy-view.scss editor (box-shadow
insets at lines 22/30). The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
/* 🟡 Inset border outline for the same strategy-view.scss editor (line 27).
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
/* 🟡 Bright/saturated red used for high-visibility danger text and mock
custom-action styling across demo pages, dialogs, and table-action mocks.
The primitive is NOT in the color palette. TALK TO DESIGN. KEEP */
--rl-deprecated-tom-danger-text-strong: var(--rl-primitive-pure-red);
/* 🟡 90%-opacity white loading-state overlay in AddPortfoliosModalContent.scss.
Alpha-modified, no "-ext". TALK TO DESIGN. KEEP */
--rl-deprecated-tom-surface-scrim: rgb(var(--rl-primitive-ink-white) / 90%);
/* 🟡 8%-opacity red-30 flash background (faint) in MarketDataConnectionStatus.scss.
Alpha-modified, no "-ext". TALK TO DESIGN. KEEP */
--rl-deprecated-tom-danger-surface-subtle: rgb(var(--rl-primitive-coral) / 8%);
/* 🟡 25%-opacity red-30 flash background (strong) in MarketDataConnectionStatus.scss.
Alpha-modified, no "-ext". TALK TO DESIGN. KEEP */
--rl-deprecated-tom-danger-surface-strong: rgb(var(--rl-primitive-coral) / 25%);
}
/**
* MUI Token Adoption
*
* MUI v4 injects styles through JSS, which outprioritizes standard CSS cascade rules.
* This file uses the same BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] scoping as component SCSS
* modules but targets MUI's generated class names directly. The !important declarations
* are required to override JSS insertion-order specificity — not arbitrary; without them
* JSS wins and the tokens are ignored.
*
* Scope: components in packages/ui-components that wrap MUI primitives. Not meant to be
* exhaustive — only classes that are actually used in adoption-enabled components.
*/
/* The [class*='Mui...'] attribute selectors below are the only reliable way to
* target MUI v4's JSS-generated class names; the disallowed-list rule does not
* apply here. */
/* stylelint-disable declaration-no-important, selector-attribute-name-disallowed-list */
/* Paper — base surface for elevated containers (dialogs, menus, popovers).
*
* NOTE: We deliberately exclude SnackbarContent. It renders as a Paper, so it
* picks up `MuiPaper-root`. As a result, SnackbarContent would always have the
* background color specified below (since the style uses `!important`). But in
* general, we don't want SnackbarContent to use that background color. Doing
* so could cause the content to be illegible (e.g. white text on a white
* background). Instead, the SnackbarContent background color should be
* specified by the component that renders it (e.g. RL's `Snackbar` or `Toast`
* component).
*/
BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] [class*='MuiPaper-root']:not([class*='MuiSnackbarContent-root']) {
background-color: var(--rl-neutral-surface-default) !important;
}
/* Paper elevation — MUI's built-in elevation shadow is raw rgba(0,0,0,...) that does
* not theme and is nearly invisible on dark surfaces. Route every elevated Paper
* (popovers, menus, dialogs, cards) through the theme-aware shadow tokens, which ramp
* up in dark mode. One consistent elevation; elevation0 (flat) keeps no shadow. */
BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] [class*='MuiPaper-elevation']:not([class*='MuiPaper-elevation0']) {
box-shadow:
0 1px 5px var(--rl-shadow-strong),
0 2px 2px var(--rl-shadow-medium),
0 3px 1px -2px var(--rl-shadow-soft) !important;
}
/* Scoped to MuiPopover-paper, not MuiPaper-root, so it reaches only overlays --
* an inline Paper such as the Tabs bar must not gain a border. */
BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] [class*='MuiPopover-paper'] {
border: 1px solid var(--rl-neutral-border-default) !important;
border-radius: var(--rl-radius-small) !important;
}
/* Tooltip — the floating-callout surface and matching arrow. Uses surface-floating
* (paired with on-surface-floating), which a theme can lift to read against its
* backgrounds; surface-raised resolves to the deepest surface and read near-black. */
BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] [class*='MuiTooltip-tooltip'] {
background-color: var(--rl-neutral-surface-floating) !important;
color: var(--rl-neutral-text-on-floating) !important;
}
BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] [class*='MuiTooltip-arrow'] {
/* MUI renders the arrow as an overflow-hidden span whose ::before is a rotated
* square painted with `currentColor`; only the clipped triangle shows. Color it
* via `color` only. A `background-color` here fills the span's own box and the
* arrow renders as a square instead of a triangle. */
color: var(--rl-neutral-surface-floating) !important;
}
BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] [class*='MuiListItem-root.Mui-selected'] {
background-color: color-mix(in sRGB, var(--rl-selected-solid) 10%, transparent) !important;
}
/* Menu item hover — legacy off-palette teal-white (#F3FBFD) snapped to the nearest
* ramp stop; same token used for list/menu hover states elsewhere. */
BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] [class*='MuiMenuItem-root']:hover {
background-color: var(--rl-selected-surface) !important;
}
/* Notifications dropdown footer — legacy gray-75 divider border (mirrors
* Navigation.module.scss; tokenized here because the rule lives in a CSS module). */
BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] .notifications-dropdown-menu-footer BUTTON {
border-top: 1px solid var(--rl-deprecated-neutral-border-divider);
}
/* Notifications dropdown footer label text — off-palette teal-gray snapped to the
* nearest ramp stop (gray-40, ~3% shift; mirrors Navigation.module.scss). */
BODY[data-ff~='UI_RIDGELINE_TOKEN_ADOPTION'] .notifications-dropdown-menu-footer SPAN {
color: var(--rl-neutral-text-secondary) !important;
}
/**
* Refresh -- the Ridgeline theme. Dark mode is a theme's job, not the semantic inventory's.
*
* - :root -- always-on defaults that must resolve even with no data-theme set.
* Currently the chart palette (a data-viz palette, not a UI semantic role, so
* it does not belong in adoption.css). Named themes re-point these in their
* own [data-theme] block.
*
* - HTML[data-theme='refresh'] -- Refresh theme color palette and font declarations.
* Applied when setTheme('refresh') sets the attribute, gated behind
* UI_RIDGELINE_REFRESH. The Figma source defines one light track per hue,
* plus an "-ext" companion ramp per hue used to build the dark block below.
*
* - No primitive overrides because a theme should never redeclare the primitive layer.
*
* - HTML[data-theme='refresh'][data-color-scheme='dark'] -- re-points the
* --rl-color-* semantic tokens (defined at :root in adoption.css) to
* their "-ext"/Slate dark-mode counterparts (both already declared in
* primitives.css). Wins over adoption.css's light defaults by attribute
* specificity, the same way catppuccin.css's and red.css's dark blocks do.
*
* Semantic tokens (--rl-color-*) live in adoption.css at :root and pass through
* unchanged in light mode; this file carries only the font declarations plus
* the semantic re-points (light and dark).
*
* Source: Figma "Variables" (file 0SscoMFCzVjrb70kshluzI, node 347-897, "color Palette" section).
*/
:root {
/* Chart palette -- the default data-viz colors. A theme re-points these in its
* own [data-theme] block (and per color-scheme) to recolor charts.
* TODO: "Chart" token names to be revisited in the future. */
--rl-chart-categorical-1: var(--rl-primitive-navy-50);
--rl-chart-categorical-2: var(--rl-primitive-blue-40);
--rl-chart-categorical-3: var(--rl-primitive-teal-30);
--rl-chart-categorical-4: var(--rl-primitive-emerald-20);
--rl-chart-categorical-5: var(--rl-primitive-green-15);
--rl-chart-negative-1: var(--rl-primitive-red-60);
--rl-chart-negative-2: var(--rl-primitive-red-40);
--rl-chart-negative-3: var(--rl-primitive-red-30);
--rl-chart-negative-4: var(--rl-primitive-red-20);
--rl-chart-negative-5: var(--rl-primitive-red-10);
--rl-chart-positive-1: var(--rl-primitive-green-60);
--rl-chart-positive-2: var(--rl-primitive-green-40);
--rl-chart-positive-3: var(--rl-primitive-green-30);
--rl-chart-positive-4: var(--rl-primitive-green-20);
--rl-chart-positive-5: var(--rl-primitive-green-10);
--rl-chart-extended-1: var(--rl-primitive-navy-50);
--rl-chart-extended-2: var(--rl-primitive-blue-40);
--rl-chart-extended-3: var(--rl-primitive-teal-30);
--rl-chart-extended-4: var(--rl-primitive-emerald-20);
--rl-chart-extended-5: var(--rl-primitive-green-15);
--rl-chart-extended-6: var(--rl-primitive-green-30);
--rl-chart-extended-7: var(--rl-primitive-emerald-40);
--rl-chart-extended-8: var(--rl-primitive-teal-50);
--rl-chart-extended-9: var(--rl-primitive-blue-30);
--rl-chart-extended-10: var(--rl-primitive-blue-20);
--rl-chart-extended-11: var(--rl-primitive-navy-40);
--rl-chart-extended-12: var(--rl-primitive-navy-15);
--rl-chart-status-1: var(--rl-primitive-green-20);
--rl-chart-status-2: var(--rl-primitive-green-15);
--rl-chart-status-3: var(--rl-primitive-orange-20);
--rl-chart-status-4: var(--rl-primitive-orange-15);
--rl-chart-status-5: var(--rl-primitive-gray-20);
--rl-chart-status-6: var(--rl-primitive-gray-15);
--rl-chart-status-7: var(--rl-primitive-blue-20);
--rl-chart-status-8: var(--rl-primitive-blue-15);
--rl-chart-status-9: var(--rl-primitive-red-30);
--rl-chart-status-10: var(--rl-primitive-red-20);
}
/* ---------------------------------------------------------------------------
* Refresh font declarations
*
* Refresh's primitive palette (all hues, base neutrals, and brand colors)
* matches primitives.css's defaults exactly, so no --rl-primitive-* overrides
* are declared here -- they resolve straight through from primitives.css's
* :root. Only the Mona Sans font stack and its associated font-* properties
* are Refresh-specific.
* --------------------------------------------------------------------------- */
HTML[data-theme='refresh'] {
/* Font: this theme uses the Mona-led stack from the primitives inventory.
* The stack and its fallback rationale live with the --rl-font-family-mona
* primitive; the theme just declares that it consumes it. */
--rl-font-family-sans: var(--rl-font-family-mona);
--rl-font-family-mono: var(--rl-font-family-mona-mono);
/* Mona design declarations -- the five properties that make Mona look like
* itself. Applied directly on so they inherit into every descendant,
* including mono elements (CODE, PRE, etc.), which render in Mona Sans
* Mono here and share its wdth axis, so font-stretch genuinely applies
* there too. font-variant-numeric: tabular-nums is a no-op on mono (already
* fixed-width); font-feature-settings ss05/ss06 is a no-op unless Mona
* Sans Mono defines those stylistic sets.
*
* --rl-mona-width default 98.5% flips to the wdth-axis face when overridden
* on a subtree -- valid range 75%-125%. */
font-feature-settings: 'ss05' 1, 'ss06' 1;
font-optical-sizing: auto;
font-stretch: var(--rl-mona-width, 98.5%);
font-variant-numeric: tabular-nums;
/* stylelint-disable-next-line order/properties-alphabetical-order */
-webkit-font-smoothing: antialiased;
}
/* ---------------------------------------------------------------------------
* Font width (explicit data-font-width="compact")
*
* The wdth axis only exists because this theme uses Mona Sans, so the theme
* owns which widths it supports. 'compact' narrows Mona to 85% via --rl-mona-width,
* which font-stretch above reads. Absence of a width here means it is unsupported.
* --------------------------------------------------------------------------- */
HTML[data-theme='refresh'][data-font-width='compact'] {
--rl-mona-width: 85%;
}
/* ---------------------------------------------------------------------------
* Light mode -- Refresh semantic overrides
*
* Mirrors adoption.css's :root defaults 1:1, token for token, using the same
* primitive names (all resolve against primitives.css's light primitives).
* Every key here has a counterpart in the Dark mode block below, re-pointed
* to its "-ext"/Slate companion -- declaring both explicitly.
* Aliases (e.g. --rl-neutral-surface-page, --rl-shell-surface-header) are not
* repeated here; they resolve through the token they alias in both schemes.
* --------------------------------------------------------------------------- */
/* stylelint-disable-next-line no-duplicate-selectors */
HTML[data-theme='refresh'] {
/* === ACCENT === */
--rl-accent-solid: var(--rl-primitive-teal-40);
--rl-accent-solid-hover: var(--rl-primitive-teal-50);
--rl-accent-solid-active: var(--rl-primitive-teal-60);
--rl-accent-solid-disabled: var(--rl-primitive-teal-10);
--rl-accent-on-solid: var(--rl-primitive-white);
--rl-accent-on-solid-disabled: var(--rl-primitive-white);
--rl-accent-surface: var(--rl-primitive-teal-10);
--rl-accent-surface-active: var(--rl-primitive-teal-15);
--rl-accent-text: var(--rl-primitive-teal-50);
/* === ACCENT (SECONDARY) === */
--rl-accent-secondary: var(--rl-primitive-teal-50);
--rl-accent-on-secondary: var(--rl-primitive-white);
/* === FOCUS & INDICATORS === */
--rl-focus-ring-emphasis: var(--rl-primitive-blue-40);
--rl-accent-indicator: var(--rl-primitive-teal-30);
/* === DANGER === */
--rl-danger-solid: var(--rl-primitive-red-40);
--rl-danger-solid-hover: var(--rl-primitive-red-50);
--rl-danger-solid-active: var(--rl-primitive-red-60);
--rl-danger-on-solid: var(--rl-primitive-white);
--rl-danger-surface: var(--rl-primitive-red-10);
--rl-danger-text: var(--rl-primitive-red-40);
--rl-danger-text-strong: var(--rl-primitive-red-60);
--rl-danger-surface-active: var(--rl-primitive-red-15);
--rl-danger-border: var(--rl-primitive-red-30);
--rl-danger-border-strong: var(--rl-primitive-red-40);
/* === WARNING === */
--rl-warning-surface: var(--rl-primitive-orange-10);
--rl-warning-text: var(--rl-primitive-orange-40);
--rl-warning-line: var(--rl-primitive-orange-30);
--rl-warning-border: var(--rl-primitive-orange-30);
/* === CAUTION === */
--rl-caution-surface: var(--rl-primitive-yellow-10);
--rl-caution-border: var(--rl-primitive-yellow-30);
/* === SUCCESS === */
--rl-success-surface: var(--rl-primitive-green-10);
--rl-success-text: var(--rl-primitive-green-40);
--rl-success-surface-active: var(--rl-primitive-green-15);
--rl-success-border: var(--rl-primitive-green-30);
/* === PENDING === */
--rl-pending-surface: var(--rl-primitive-emerald-10);
/* === INFO === */
--rl-info-surface: var(--rl-primitive-blue-10);
--rl-info-surface-active: var(--rl-primitive-blue-15);
--rl-info-text: var(--rl-primitive-blue-50);
--rl-info-border: var(--rl-primitive-blue-30);
/* === SELECTED === */
--rl-selected-solid: var(--rl-primitive-teal-30);
--rl-selected-solid-hover: var(--rl-primitive-teal-40);
--rl-selected-solid-accent: var(--rl-primitive-teal-40);
--rl-selected-solid-accent-hover: var(--rl-primitive-teal-50);
--rl-selected-surface: var(--rl-primitive-teal-10);
--rl-selected-surface-active: var(--rl-primitive-teal-15);
--rl-selected-surface-hover: var(--rl-primitive-teal-20);
--rl-selected-surface-muted: var(--rl-primitive-teal-15);
--rl-selected-surface-subtle: var(--rl-primitive-teal-10);
--rl-selected-text: var(--rl-primitive-teal-60);
--rl-selected-text-on-muted: var(--rl-primitive-teal-60);
--rl-selected-solid-disabled: var(--rl-primitive-teal-20);
/* === HIGHLIGHT === */
--rl-highlight-solid: var(--rl-primitive-gold-30);
--rl-highlight-surface: var(--rl-primitive-gold-15);
--rl-highlight-text: var(--rl-primitive-gold-60);
--rl-highlight-text-secondary: var(--rl-primitive-gold-50);
--rl-highlight-on-solid: var(--rl-primitive-gold-20);
--rl-highlight-border: var(--rl-primitive-gold-30);
--rl-highlight-border-strong: var(--rl-primitive-gold-60);
--rl-highlight-surface-subtle: var(--rl-primitive-gold-10);
--rl-highlight-surface-muted: var(--rl-primitive-gold-10);
--rl-highlight-text-muted: var(--rl-primitive-gold-50);
--rl-highlight-solid-muted: var(--rl-primitive-gold-30);
/* === BADGE === */
--rl-badge-blue-bg: var(--rl-primitive-blue-10);
--rl-badge-blue-text: var(--rl-primitive-blue-50);
--rl-badge-blue-bg-strong: var(--rl-primitive-blue-20);
--rl-badge-blue-text-strong: var(--rl-primitive-blue-60);
/* purple */
--rl-badge-purple-bg: var(--rl-primitive-purple-10);
--rl-badge-purple-text: var(--rl-primitive-purple-50);
--rl-badge-purple-bg-strong: var(--rl-primitive-purple-20);
--rl-badge-purple-text-strong: var(--rl-primitive-purple-60);
/* gray */
--rl-badge-gray-bg: var(--rl-primitive-gray-10);
--rl-badge-gray-text: var(--rl-primitive-gray-50);
--rl-badge-gray-bg-strong: var(--rl-primitive-gray-20);
--rl-badge-gray-text-strong: var(--rl-primitive-gray-60);
/* green */
--rl-badge-green-bg: var(--rl-primitive-green-10);
--rl-badge-green-text: var(--rl-primitive-green-50);
--rl-badge-green-bg-strong: var(--rl-primitive-green-20);
--rl-badge-green-text-strong: var(--rl-primitive-green-60);
/* yellow */
--rl-badge-yellow-bg: var(--rl-primitive-yellow-10);
--rl-badge-yellow-text: var(--rl-primitive-yellow-50);
--rl-badge-yellow-bg-strong: var(--rl-primitive-yellow-20);
--rl-badge-yellow-text-strong: var(--rl-primitive-yellow-60);
/* orange */
--rl-badge-orange-bg: var(--rl-primitive-orange-10);
--rl-badge-orange-text: var(--rl-primitive-orange-50);
--rl-badge-orange-bg-strong: var(--rl-primitive-orange-20);
--rl-badge-orange-text-strong: var(--rl-primitive-orange-60);
/* red */
--rl-badge-red-bg: var(--rl-primitive-red-10);
--rl-badge-red-text: var(--rl-primitive-red-50);
--rl-badge-red-bg-strong: var(--rl-primitive-red-20);
--rl-badge-red-text-strong: var(--rl-primitive-red-60);
/* alert */
--rl-badge-alert-bg: var(--rl-primitive-white);
--rl-badge-alert-text: var(--rl-primitive-red-40);
--rl-badge-alert-border: var(--rl-primitive-red-40);
--rl-badge-alert-bg-strong: var(--rl-primitive-red-40);
--rl-badge-alert-text-strong: var(--rl-primitive-white);
/* teal */
--rl-badge-teal-bg: var(--rl-primitive-teal-10);
--rl-badge-teal-text: var(--rl-primitive-teal-50);
--rl-badge-teal-bg-strong: var(--rl-primitive-teal-20);
--rl-badge-teal-text-strong: var(--rl-primitive-teal-60);
/* navy */
--rl-badge-navy-bg: var(--rl-primitive-navy-10);
--rl-badge-navy-text: var(--rl-primitive-navy-50);
--rl-badge-navy-bg-strong: var(--rl-primitive-navy-20);
--rl-badge-navy-text-strong: var(--rl-primitive-navy-60);
/* emerald */
--rl-badge-emerald-bg: var(--rl-primitive-emerald-10);
--rl-badge-emerald-text: var(--rl-primitive-emerald-50);
--rl-badge-emerald-bg-strong: var(--rl-primitive-emerald-20);
--rl-badge-emerald-text-strong: var(--rl-primitive-emerald-60);
/* === NEUTRAL SURFACES === */
--rl-neutral-surface-default: var(--rl-primitive-white);
--rl-neutral-surface-subtle: var(--rl-primitive-wash);
--rl-neutral-surface-muted: var(--rl-primitive-gray-10);
--rl-neutral-surface-hover: var(--rl-primitive-gray-10);
--rl-neutral-surface-active: var(--rl-primitive-gray-15);
--rl-neutral-surface-disabled: var(--rl-primitive-gray-10);
--rl-neutral-surface-highlighted-accent: var(--rl-primitive-teal-20);
--rl-neutral-surface-highlighted: var(--rl-primitive-blue-15);
/* === RAISED / FLOATING SURFACES === */
--rl-neutral-surface-raised: var(--rl-primitive-black);
--rl-neutral-surface-floating: var(--rl-primitive-black);
/* === SHELL SURFACES === */
--rl-shell-surface: var(--rl-primitive-gray-50);
--rl-shell-surface-default: var(--rl-primitive-black); /* nav rail / app-chrome backdrop */
--rl-shell-surface-hover: var(--rl-primitive-gray-60);
--rl-shell-surface-secondary-hover: var(--rl-primitive-gray-40);
--rl-shell-surface-secondary-selected: var(--rl-primitive-gray-20);
--rl-shell-surface-selected: var(--rl-primitive-teal-60);
--rl-shell-surface-selected-default: var(--rl-primitive-gray-50);
--rl-shell-surface-selected-hover: var(--rl-primitive-teal-50);
--rl-shell-control: var(--rl-primitive-gray-40);
--rl-shell-control-hover: var(--rl-primitive-gray-30);
--rl-shell-inset: var(--rl-primitive-gray-60);
--rl-shell-inset-hover: var(--rl-primitive-gray-50);
/* === SHELL BORDERS === */
--rl-shell-border-inset-subtle: var(--rl-primitive-gray-60);
/* search-bar-shell border; split from --rl-neutral-border-secondary since dark doesn't match it mechanically */
--rl-shell-border-secondary: var(--rl-primitive-gray-40);
/* search-bar-shell hover border, same reason as above */
--rl-shell-border-secondary-hover: var(--rl-primitive-gray-30);
/* === SHELL INSET TEXT === */
--rl-shell-on-inset: var(--rl-primitive-white);
--rl-shell-on-inset-secondary: var(--rl-primitive-gray-20);
--rl-shell-on-inset-secondary-hover: var(--rl-primitive-white);
--rl-shell-on-inset-muted: var(--rl-primitive-gray-30);
--rl-shell-on-inset-muted-hover: var(--rl-primitive-white);
--rl-shell-on-inset-muted-secondary-hover: var(--rl-primitive-white);
/* === SHELL TEXT === */
--rl-shell-text: var(--rl-primitive-white);
--rl-shell-text-secondary-muted: var(--rl-primitive-gray-30);
--rl-shell-icon-secondary: var(--rl-primitive-gray-40);
--rl-shell-icon-active: var(--rl-primitive-teal-20);
--rl-shell-text-default-active: var(--rl-primitive-gray-50);
--rl-shell-icon-default-active: var(--rl-primitive-gray-20);
--rl-shell-icon: var(--rl-primitive-gray-40);
--rl-shell-icon-accent: var(--rl-primitive-teal-50);
/* === NEUTRAL TEXT === */
--rl-neutral-text-default: var(--rl-primitive-black);
--rl-neutral-text-default-hover: var(--rl-primitive-gray-60);
--rl-neutral-text-disabled: var(--rl-primitive-gray-20);
--rl-neutral-text-on-inverse: var(--rl-primitive-white);
--rl-neutral-text-on-floating: var(--rl-primitive-white);
--rl-neutral-text-subdued: var(--rl-primitive-gray-60);
--rl-neutral-text-subtle: var(--rl-primitive-gray-50);
--rl-neutral-text-emphasis: var(--rl-primitive-teal-40);
--rl-neutral-text-disabled-strong: var(--rl-primitive-gray-40);
--rl-info-icon: var(--rl-primitive-blue-40);
/* === NEUTRAL TEXT (TIERS) === */
--rl-neutral-text-secondary: var(--rl-primitive-gray-40);
--rl-neutral-text-secondary-hover: var(--rl-primitive-gray-50);
--rl-neutral-text-strong: var(--rl-primitive-gray-50);
--rl-neutral-text-muted: var(--rl-primitive-gray-30);
--rl-neutral-text-tertiary: var(--rl-primitive-gray-15);
/* === INSET === */
--rl-inset-surface-emphasis: var(--rl-primitive-gray-20);
--rl-inset-text-secondary: var(--rl-primitive-gray-50);
--rl-inset-text-muted: var(--rl-primitive-gray-40);
--rl-inset-border: var(--rl-primitive-gray-20);
--rl-inset-border-subtle: var(--rl-primitive-gray-15);
/* === BORDERS === */
--rl-neutral-border-default: var(--rl-primitive-gray-20);
--rl-neutral-border-strong: var(--rl-primitive-gray-50);
--rl-neutral-border-secondary: var(--rl-primitive-gray-40);
--rl-neutral-border-muted: var(--rl-primitive-gray-30);
--rl-neutral-border-muted-hover: var(--rl-primitive-gray-40);
--rl-neutral-border-subtle: var(--rl-primitive-gray-15);
--rl-neutral-border-divider: var(--rl-primitive-gray-10);
--rl-neutral-border-wash: var(--rl-primitive-wash);
--rl-focus-ring: var(--rl-primitive-blue-30);
--rl-focus-ring-strong: var(--rl-primitive-blue-50);
--rl-focus-ring-secondary: var(--rl-primitive-teal-30);
--rl-focus-ring-tertiary: var(--rl-primitive-gray-40);
--rl-focus-ring-hover: var(--rl-primitive-gray-20);
--rl-focus-ring-inner: var(--rl-primitive-white);
--rl-accent-border: var(--rl-primitive-teal-40);
--rl-accent-border-subtle: var(--rl-primitive-teal-20);
--rl-accent-border-hover: var(--rl-primitive-teal-50);
--rl-selected-border: var(--rl-primitive-teal-15);
/* === CONDITIONAL FORMATTING SWATCHES === */
--rl-swatch-0: var(--rl-primitive-white);
--rl-swatch-1: var(--rl-primitive-navy-10);
--rl-swatch-2: var(--rl-primitive-blue-10);
--rl-swatch-3: var(--rl-primitive-emerald-10);
--rl-swatch-4: var(--rl-primitive-green-10);
--rl-swatch-5: var(--rl-primitive-yellow-10);
--rl-swatch-6: var(--rl-primitive-orange-10);
--rl-swatch-7: var(--rl-primitive-red-10);
--rl-swatch-8: var(--rl-primitive-purple-10);
--rl-swatch-9: var(--rl-primitive-gray-20);
--rl-swatch-10: var(--rl-primitive-navy-20);
--rl-swatch-11: var(--rl-primitive-blue-20);
--rl-swatch-12: var(--rl-primitive-emerald-20);
--rl-swatch-13: var(--rl-primitive-green-20);
--rl-swatch-14: var(--rl-primitive-yellow-20);
--rl-swatch-15: var(--rl-primitive-orange-20);
--rl-swatch-16: var(--rl-primitive-red-20);
--rl-swatch-17: var(--rl-primitive-purple-20);
--rl-swatch-18: var(--rl-primitive-gray-10);
--rl-swatch-19: var(--rl-primitive-gray-40);
--rl-swatch-20: var(--rl-primitive-gray-30);
--rl-swatch-21: var(--rl-primitive-navy-30);
--rl-swatch-22: var(--rl-primitive-blue-30);
--rl-swatch-23: var(--rl-primitive-emerald-30);
--rl-swatch-24: var(--rl-primitive-green-30);
--rl-swatch-25: var(--rl-primitive-yellow-30);
--rl-swatch-26: var(--rl-primitive-orange-30);
--rl-swatch-27: var(--rl-primitive-red-30);
--rl-swatch-28: var(--rl-primitive-purple-30);
--rl-swatch-29: var(--rl-primitive-gray-50);
--rl-swatch-30: var(--rl-primitive-navy-50);
--rl-swatch-31: var(--rl-primitive-blue-50);
--rl-swatch-32: var(--rl-primitive-emerald-50);
--rl-swatch-33: var(--rl-primitive-green-50);
--rl-swatch-34: var(--rl-primitive-yellow-50);
--rl-swatch-35: var(--rl-primitive-orange-50);
--rl-swatch-36: var(--rl-primitive-red-50);
--rl-swatch-37: var(--rl-primitive-purple-50);
/* === CONDITIONAL FORMATTING SWATCHES (TEXT) === */
--rl-swatch-text-0: var(--rl-primitive-navy-50);
--rl-swatch-text-1: var(--rl-primitive-blue-50);
--rl-swatch-text-2: var(--rl-primitive-emerald-50);
--rl-swatch-text-3: var(--rl-primitive-green-50);
--rl-swatch-text-4: var(--rl-primitive-yellow-50);
--rl-swatch-text-5: var(--rl-primitive-orange-50);
--rl-swatch-text-6: var(--rl-primitive-red-50);
--rl-swatch-text-7: var(--rl-primitive-purple-50);
--rl-swatch-text-8: var(--rl-neutral-text-default);
--rl-swatch-text-9: var(--rl-primitive-white);
/* === CONDITIONAL FORMATTING SWATCHES (BORDER) === */
--rl-swatch-border-0: var(--rl-primitive-pure-black);
--rl-swatch-border-1: var(--rl-primitive-gray-30);
--rl-swatch-border-2: var(--rl-primitive-navy-30);
--rl-swatch-border-3: var(--rl-primitive-blue-30);
--rl-swatch-border-4: var(--rl-primitive-emerald-30);
--rl-swatch-border-5: var(--rl-primitive-green-30);
--rl-swatch-border-6: var(--rl-primitive-yellow-30);
--rl-swatch-border-7: var(--rl-primitive-orange-30);
--rl-swatch-border-8: var(--rl-primitive-red-30);
--rl-swatch-border-9: var(--rl-primitive-purple-30);
--rl-swatch-border-10: var(--rl-primitive-gray-20);
/* === EFFECTS === */
--rl-shadow-flat-subtle: var(--rl-primitive-gray-15);
--rl-shadow-flat-medium: var(--rl-primitive-gray-20);
/* === KEY HINT === */
--rl-key-surface-primary: var(--rl-primitive-teal-60);
--rl-key-on-surface-primary: var(--rl-primitive-white);
--rl-key-surface-secondary: var(--rl-primitive-gray-15);
--rl-key-on-surface-secondary: var(--rl-primitive-black);
/* === FORMULA === */
--rl-formula-keyword: var(--rl-primitive-black);
--rl-formula-function: var(--rl-primitive-blue-40);
--rl-formula-column: var(--rl-primitive-teal-40);
--rl-formula-value: var(--rl-primitive-green-40);
--rl-formula-text: var(--rl-primitive-orange-30);
/* === BRAND ===
* brand-teal/-navy are documented in Figma's "color Palette" (Brand group)
* but have no "-ext" companion there; the Dark mode block re-points them
* to their closest in-palette primitive's dark companion. */
--rl-brand-primary: var(--rl-primitive-brand-teal);
--rl-brand-secondary: var(--rl-primitive-brand-navy);
/* === ALIASES ===
* Declared explicitly for self-containment; each already resolves through
* the token it aliases (which has its own light/dark values) even without
* this, so these are a no-op restatement, not a new value. */
--rl-brand-mark-highlight: var(--rl-neutral-surface-default);
--rl-neutral-surface-page: var(--rl-neutral-surface-muted);
--rl-shell-border-divider: var(--rl-primitive-teal-60);
--rl-shell-surface-header: var(--rl-shell-surface);
/* === RADII & NON-COLOR EFFECTS ===
* Not colors, so identical in light and dark. */
--rl-radius-default: var(--rl-primitive-radius-none);
--rl-radius-pill: var(--rl-primitive-radius-pill);
--rl-elevation-overlay: none;
/* === EFFECTS (ink-based) === */
--rl-neutral-surface-scrim: rgb(var(--rl-primitive-ink-black) / 75%);
--rl-shadow-subtle: rgb(var(--rl-primitive-ink-black) / 3%);
--rl-shadow-soft: rgb(var(--rl-primitive-ink-black) / 8%);
--rl-shadow-medium: rgb(var(--rl-primitive-ink-black) / 10%);
--rl-shadow-strong: rgb(var(--rl-primitive-ink-black) / 15%);
--rl-shadow-selected-glow: rgb(var(--rl-primitive-ink-teal) / 10%);
--rl-shadow-floating-hairline: rgb(var(--rl-primitive-ink-black) / 20%);
--rl-shadow-floating-elevation: rgb(var(--rl-primitive-ink-black) / 30%);
--rl-shadow-floating-highlight: rgb(var(--rl-primitive-ink-white) / 5%);
--rl-elevation-high:
0 0 2px 1px var(--rl-shadow-subtle),
0 6px 10px 2px var(--rl-shadow-soft);
/* === QUARANTINE ===
* Off-palette pins and *-deprecated tokens, mirrored from adoption.css.
* See adoption.css for per-token consumer notes and design-review status. */
/* --- SELECTED wash --- */
--rl-deprecated-selected-wash: var(--rl-primitive-brilliant-white);
/* --- Navigation.scss / Navigation.module.scss / NavigationMenu.scss --- */
--rl-deprecated-accent-solid-active: var(--rl-primitive-scuba-blue);
/* --- icon.module.scss / typography.scss --- */
--rl-deprecated-neutral-text-default-emphasis: var(--rl-primitive-teal-30);
--rl-deprecated-info-icon: var(--rl-primitive-blue-30);
--rl-deprecated-accent-text-on-inverse: var(--rl-primitive-teal-20);
--rl-deprecated-neutral-text-dark-blue: var(--rl-primitive-dark-blue);
/* --- dropdownMenu.module.scss --- */
--rl-deprecated-neutral-text-wash: var(--rl-primitive-magenta);
/* --- fields.module.scss --- */
--rl-deprecated-neutral-border-default: var(--rl-primitive-sky-gray);
/* --- alertbar.module.scss --- */
--rl-deprecated-danger-on-container-hover: var(--rl-primitive-red-60);
--rl-deprecated-success-on-container-hover: var(--rl-primitive-green-60);
--rl-deprecated-warning-on-container-hover: var(--rl-primitive-orange-60);
--rl-deprecated-accent-on-container-hover: var(--rl-primitive-teal-60);
/* --- NotificationsDropdownMenu.scss --- */
--rl-deprecated-notifications-body: var(--rl-primitive-dove-gray);
--rl-deprecated-notifications-meta: var(--rl-primitive-dusty-gray);
/* --- charts.module.scss --- */
--rl-deprecated-neutral-text-chart-line: var(--rl-primitive-ship-cove);
--rl-deprecated-shadow-tooltip: var(--rl-primitive-ship-cove);
/* --- Main.css --- */
/* --- Multiple / various places --- */
--rl-deprecated-neutral-text-light-teal: var(--rl-primitive-hushed-green);
--rl-deprecated-neutral-surface-light-teal: var(--rl-primitive-star-white);
--rl-deprecated-neutral-border-divider: var(--rl-primitive-sky-gray);
--rl-deprecated-danger-on-container: var(--rl-primitive-red-50);
--rl-deprecated-success-container: var(--rl-primitive-green-40);
--rl-deprecated-success-on-container: var(--rl-primitive-green-50);
--rl-deprecated-warning-container: var(--rl-primitive-orange-40);
--rl-deprecated-warning-on-container: var(--rl-primitive-orange-50);
--rl-deprecated-neutral-text-default: rgb(var(--rl-primitive-ink-spruce));
/* --- DataGrid --- */
--rl-deprecated-neutral-surface-light-teal-subtle: var(--rl-primitive-hushed-green);
--rl-deprecated-neutral-surface-overlay-faint: var(--rl-primitive-wash);
--rl-deprecated-neutral-surface-overlay-subtle: var(--rl-primitive-gray-10);
--rl-deprecated-neutral-surface-overlay-medium: var(--rl-primitive-gray-30);
--rl-deprecated-neutral-surface-overlay-faint-alpha: var(--rl-primitive-wash);
--rl-deprecated-neutral-surface-selected-primary: var(--rl-primitive-brand-teal);
--rl-deprecated-neutral-surface-flash-changed: var(--rl-primitive-teal-15);
--rl-deprecated-neutral-surface-flash-increase: var(--rl-primitive-green-15);
--rl-deprecated-neutral-surface-flash-decrease: var(--rl-primitive-red-15);
--rl-deprecated-neutral-surface-flash-removed: var(--rl-primitive-gray-15);
--rl-deprecated-neutral-surface-flash-data-changed: var(--rl-primitive-blue-10);
--rl-deprecated-neutral-surface-active: var(--rl-primitive-sky-gray);
--rl-deprecated-neutral-surface-skeleton: var(--rl-primitive-sky-gray);
--rl-deprecated-neutral-surface-scrollbar: var(--rl-primitive-gray-20);
--rl-deprecated-neutral-surface-scrollbar-hover: var(--rl-primitive-gray-40);
--rl-deprecated-neutral-surface-loading-overlay: rgb(var(--rl-primitive-ink-white) / 85%);
--rl-deprecated-neutral-surface-scrim: rgb(var(--rl-primitive-ink-white) / 70%);
--rl-deprecated-neutral-text-overlay-medium: var(--rl-primitive-gray-30);
--rl-deprecated-neutral-text-overlay-bold: var(--rl-primitive-gray-50);
--rl-deprecated-accent-text: var(--rl-primitive-brand-teal);
--rl-deprecated-warning-text: var(--rl-primitive-orange-40);
--rl-deprecated-neutral-text-overlay-soft-alpha: var(--rl-primitive-sky-gray);
--rl-deprecated-neutral-border-overlay-subtle: var(--rl-primitive-gray-10);
--rl-deprecated-neutral-border-overlay-soft: var(--rl-primitive-gray-20);
--rl-deprecated-neutral-border-overlay-medium: var(--rl-primitive-gray-30);
--rl-deprecated-warning-border: var(--rl-primitive-orange-40);
--rl-deprecated-neutral-border-overlay-soft-alpha: var(--rl-primitive-sky-gray);
--rl-deprecated-shadow-overlay-faint: var(--rl-primitive-wash);
--rl-deprecated-shadow-overlay-subtle: var(--rl-primitive-gray-10);
--rl-deprecated-shadow-overlay-soft: var(--rl-primitive-gray-20);
--rl-deprecated-shadow-overlay-medium: var(--rl-primitive-gray-30);
--rl-deprecated-shadow-focus-primary: var(--rl-primitive-brand-teal);
--rl-deprecated-shadow-focus: var(--rl-primitive-blue-30);
--rl-deprecated-shadow-error: var(--rl-primitive-red-40);
--rl-deprecated-shadow-warning: var(--rl-primitive-orange-40);
--rl-deprecated-shadow-hint: var(--rl-primitive-gray-40);
--rl-deprecated-shadow-flat-medium: var(--rl-primitive-sky-gray);
--rl-deprecated-shadow-flat-divider: var(--rl-primitive-sky-gray);
--rl-deprecated-shadow-overlay-subtle-alpha: rgb(var(--rl-primitive-ink-spruce) / 10%);
--rl-deprecated-shadow-faint: rgb(var(--rl-primitive-ink-black) / 5%);
--rl-deprecated-neutral-surface-inverse: var(--rl-primitive-darkest-spruce);
--rl-deprecated-shell-text-default-hover: var(--rl-primitive-darkest-spruce);
--rl-deprecated-categorical-text: var(--rl-primitive-purple-40);
--rl-deprecated-warning-surface-active: var(--rl-primitive-orange-15);
--rl-deprecated-accent-surface-active: var(--rl-primitive-teal-15);
--rl-deprecated-skeleton-surface-dark: var(--rl-primitive-mallard-green);
--rl-deprecated-skeleton-surface-dark-shimmer: var(--rl-primitive-pine-grove);
--rl-deprecated-skeleton-surface-light: var(--rl-primitive-snow-white);
--rl-deprecated-skeleton-surface-light-shimmer: var(--rl-primitive-sky-gray);
/* --- accounting-ui (RLA-427015 / RLA-427016) --- */
/* --- data-ui (RLA-246622) --- */
/* --- fieldLockingSidePanel.scss --- */
--rl-deprecated-dataui-lock-icon-active: var(--rl-primitive-teal-30);
--rl-deprecated-dataui-lock-icon-inactive: var(--rl-primitive-gray-30);
/* --- DataMappingsDataTable.css / ConfigurableFinancialInstitutions.css /
RecordLogDataTable.css / TransmissionsHubDataTable.css --- */
--rl-deprecated-dataui-table-row-hover: var(--rl-primitive-athens-gray);
--rl-deprecated-dataui-table-border: var(--rl-primitive-gainsboro);
/* --- DataMappingsDataTable.css / ConfigurableFinancialInstitutions.css --- */
--rl-deprecated-dataui-table-row-divider: var(--rl-primitive-gallery-gray);
--rl-deprecated-dataui-table-head-background: var(--rl-primitive-lotion);
/* --- ProcessTables.scss / RecipesInfiniteScrollList.scss --- */
--rl-deprecated-dataui-text-secondary: var(--rl-primitive-nevada);
--rl-deprecated-dataui-text-error: var(--rl-primitive-persian-red);
/* --- ProcessRunDetailModal.scss --- */
--rl-deprecated-dataui-modal-text-secondary: var(--rl-primitive-granite-gray);
--rl-deprecated-dataui-copy-success-background: var(--rl-primitive-bubbles);
--rl-deprecated-dataui-copy-success-text: var(--rl-primitive-camarone);
--rl-deprecated-dataui-copy-error-background: var(--rl-primitive-tutu);
--rl-deprecated-dataui-copy-error-text: var(--rl-primitive-carnelian);
/* --- fontColor (gray keyword) --- */
/* --- tom-pc-ui migration (token targets audit, 2026-07-01) --- */
--rl-deprecated-tom-text-default: var(--rl-primitive-mine-shaft);
--rl-deprecated-tom-surface-dark: var(--rl-primitive-bunker);
--rl-deprecated-tom-surface-hover: var(--rl-primitive-white-smoke);
--rl-deprecated-tom-focus-ring: var(--rl-primitive-cerulean);
--rl-deprecated-tom-warning-solid: var(--rl-primitive-russet);
--rl-deprecated-tom-transparent: rgb(var(--rl-primitive-ink-black) / 0%);
--rl-deprecated-tom-surface-translucent: rgb(var(--rl-primitive-ink-white) / 53.3%);
--rl-deprecated-tom-border-translucent: rgb(var(--rl-primitive-ink-white) / 50%);
--rl-deprecated-tom-danger-text-strong: var(--rl-primitive-pure-red);
--rl-deprecated-tom-surface-scrim: rgb(var(--rl-primitive-ink-white) / 90%);
--rl-deprecated-tom-danger-surface-subtle: rgb(var(--rl-primitive-coral) / 8%);
--rl-deprecated-tom-danger-surface-strong: rgb(var(--rl-primitive-coral) / 25%);
}
/* ---------------------------------------------------------------------------
* Dark mode (explicit data-color-scheme='dark')
*
* Re-points tokens built on a chromatic hue, white, black, or wash to that
* primitive's "-ext" companion at the same shade number, e.g. teal-40 ->
* teal-40-ext. Gray has no "-ext"; Slate is used as Gray's dark-mode stand-in;
* gray-based tokens instead re-point to Slate -- a separate neutral ramp
* whose Figma shade numbers run the opposite direction from every other hue
* (slate-10 is darkest, slate-60 is lightest), which means it drops in as
* Gray's dark-mode stand-in at the SAME shade number, same as "-ext":
* gray-10 -> slate-10, gray-15 -> slate-15, and so on through gray-60 ->
* slate-60.
*
* Tokens on raw ink-* triplets (and --rl-deprecated-neutral-text-default,
* which is also ink-based) have no dark substitute yet and are left alone --
* see the EFFECTS & RADII note below. --rl-brand-* is intentionally not
* themed (brand identity stays constant across schemes).
*
* QUARANTINE/deprecated tokens (below) follow the same "-ext"/Slate rule as
* the tokens above where their primitive is in the color palette; where it
* isn't (one-off off-palette pins with no "-ext" of their own), each swaps to
* the closest in-palette primitive's dark companion instead, marked with a
* "closest palette match" comment.
* --------------------------------------------------------------------------- */
HTML[data-theme='refresh'][data-color-scheme='dark'] {
/* === CHART PALETTE === */
--rl-chart-categorical-1: var(--rl-primitive-navy-50-ext);
--rl-chart-categorical-2: var(--rl-primitive-blue-40-ext);
--rl-chart-categorical-3: var(--rl-primitive-teal-30-ext);
--rl-chart-categorical-4: var(--rl-primitive-emerald-20-ext);
--rl-chart-categorical-5: var(--rl-primitive-green-15-ext);
--rl-chart-negative-1: var(--rl-primitive-red-60-ext);
--rl-chart-negative-2: var(--rl-primitive-red-40-ext);
--rl-chart-negative-3: var(--rl-primitive-red-30-ext);
--rl-chart-negative-4: var(--rl-primitive-red-20-ext);
--rl-chart-negative-5: var(--rl-primitive-red-10-ext);
--rl-chart-positive-1: var(--rl-primitive-green-60-ext);
--rl-chart-positive-2: var(--rl-primitive-green-40-ext);
--rl-chart-positive-3: var(--rl-primitive-green-30-ext);
--rl-chart-positive-4: var(--rl-primitive-green-20-ext);
--rl-chart-positive-5: var(--rl-primitive-green-10-ext);
--rl-chart-extended-1: var(--rl-primitive-navy-50-ext);
--rl-chart-extended-2: var(--rl-primitive-blue-40-ext);
--rl-chart-extended-3: var(--rl-primitive-teal-30-ext);
--rl-chart-extended-4: var(--rl-primitive-emerald-20-ext);
--rl-chart-extended-5: var(--rl-primitive-green-15-ext);
--rl-chart-extended-6: var(--rl-primitive-green-30-ext);
--rl-chart-extended-7: var(--rl-primitive-emerald-40-ext);
--rl-chart-extended-8: var(--rl-primitive-teal-50-ext);
--rl-chart-extended-9: var(--rl-primitive-blue-30-ext);
--rl-chart-extended-10: var(--rl-primitive-blue-20-ext);
--rl-chart-extended-11: var(--rl-primitive-navy-40-ext);
--rl-chart-extended-12: var(--rl-primitive-navy-15-ext);
--rl-chart-status-1: var(--rl-primitive-green-20-ext);
--rl-chart-status-2: var(--rl-primitive-green-15-ext);
--rl-chart-status-3: var(--rl-primitive-orange-20-ext);
--rl-chart-status-4: var(--rl-primitive-orange-15-ext);
--rl-chart-status-5: var(--rl-primitive-slate-20);
--rl-chart-status-6: var(--rl-primitive-slate-15);
--rl-chart-status-7: var(--rl-primitive-blue-20-ext);
--rl-chart-status-8: var(--rl-primitive-blue-15-ext);
--rl-chart-status-9: var(--rl-primitive-red-30-ext);
--rl-chart-status-10: var(--rl-primitive-red-20-ext);
/* === ACCENT === */
--rl-accent-solid: var(--rl-primitive-teal-40-ext);
--rl-accent-solid-hover: var(--rl-primitive-teal-50-ext);
--rl-accent-solid-active: var(--rl-primitive-teal-60-ext);
--rl-accent-solid-disabled: var(--rl-primitive-teal-10-ext);
--rl-accent-on-solid: var(--rl-primitive-black-ext);
--rl-accent-on-solid-disabled: var(--rl-primitive-slate-30);
--rl-accent-surface: var(--rl-primitive-teal-10-ext);
--rl-accent-surface-active: var(--rl-primitive-teal-15-ext);
--rl-accent-text: var(--rl-primitive-teal-50-ext);
/* === ACCENT (SECONDARY) === */
--rl-accent-secondary: var(--rl-primitive-teal-50-ext);
--rl-accent-on-secondary: var(--rl-primitive-white-ext);
/* === FOCUS & INDICATORS === */
--rl-focus-ring-emphasis: var(--rl-primitive-blue-40-ext);
--rl-accent-indicator: var(--rl-primitive-teal-30-ext);
/* === DANGER === */
--rl-danger-solid: var(--rl-primitive-red-40-ext);
--rl-danger-solid-hover: var(--rl-primitive-red-50-ext);
--rl-danger-solid-active: var(--rl-primitive-red-60-ext);
--rl-danger-on-solid: var(--rl-primitive-black-ext);
--rl-danger-surface: var(--rl-primitive-red-10-ext);
--rl-danger-text: var(--rl-primitive-red-40-ext);
--rl-danger-text-strong: var(--rl-primitive-red-60-ext);
--rl-danger-surface-active: var(--rl-primitive-red-15-ext);
--rl-danger-border: var(--rl-primitive-red-30-ext);
--rl-danger-border-strong: var(--rl-primitive-red-40-ext);
/* === WARNING === */
--rl-warning-surface: var(--rl-primitive-orange-10-ext);
--rl-warning-text: var(--rl-primitive-orange-40-ext);
--rl-warning-line: var(--rl-primitive-orange-30-ext);
--rl-warning-border: var(--rl-primitive-orange-30-ext);
/* === CAUTION === */
--rl-caution-surface: var(--rl-primitive-yellow-10-ext);
--rl-caution-border: var(--rl-primitive-yellow-30-ext);
/* === SUCCESS === */
--rl-success-surface: var(--rl-primitive-green-10-ext);
--rl-success-text: var(--rl-primitive-green-40-ext);
--rl-success-surface-active: var(--rl-primitive-green-15-ext);
--rl-success-border: var(--rl-primitive-green-30-ext);
/* === PENDING === */
--rl-pending-surface: var(--rl-primitive-emerald-10-ext);
/* === INFO === */
--rl-info-surface: var(--rl-primitive-blue-10-ext);
--rl-info-surface-active: var(--rl-primitive-blue-15-ext);
--rl-info-text: var(--rl-primitive-blue-50-ext);
--rl-info-border: var(--rl-primitive-blue-30-ext);
/* === SELECTED === */
--rl-selected-solid: var(--rl-primitive-teal-30-ext);
--rl-selected-solid-hover: var(--rl-primitive-teal-40-ext);
--rl-selected-solid-accent: var(--rl-primitive-slate-40);
--rl-selected-solid-accent-hover: var(--rl-primitive-slate-50);
--rl-selected-surface: var(--rl-primitive-slate-15);
--rl-selected-surface-active: var(--rl-primitive-slate-20);
--rl-selected-surface-hover: var(--rl-primitive-slate-30);
--rl-selected-surface-muted: var(--rl-primitive-slate-15);
--rl-selected-surface-subtle: var(--rl-primitive-slate-15);
--rl-selected-text: var(--rl-primitive-teal-60-ext);
--rl-selected-text-on-muted: var(--rl-primitive-white-ext);
--rl-selected-solid-disabled: var(--rl-primitive-teal-20-ext);
/* === HIGHLIGHT === */
--rl-highlight-solid: var(--rl-primitive-gold-30-ext);
--rl-highlight-surface: var(--rl-primitive-gold-15-ext);
--rl-highlight-text: var(--rl-primitive-gold-60-ext);
--rl-highlight-text-secondary: var(--rl-primitive-gold-50-ext);
--rl-highlight-on-solid: var(--rl-primitive-gold-20-ext);
--rl-highlight-border: var(--rl-primitive-gold-30-ext);
--rl-highlight-border-strong: var(--rl-primitive-gold-60-ext);
--rl-highlight-surface-subtle: var(--rl-primitive-navy-15-ext); /* navy-15 */
/* Deliberately gold, not navy like -surface-subtle above. */
--rl-highlight-surface-muted: var(--rl-primitive-gold-10-ext);
/* Deliberately the same value despite different light-mode sources. */
--rl-highlight-text-muted: var(--rl-primitive-gold-40-ext);
--rl-highlight-solid-muted: var(--rl-primitive-gold-40-ext);
/* === BADGE === */
--rl-badge-blue-bg: var(--rl-primitive-blue-10-ext);
--rl-badge-blue-text: var(--rl-primitive-blue-50-ext);
--rl-badge-blue-bg-strong: var(--rl-primitive-blue-20-ext);
--rl-badge-blue-text-strong: var(--rl-primitive-blue-60-ext); /* Figma is slightly off-ramp here */
/* purple */
--rl-badge-purple-bg: var(--rl-primitive-purple-10-ext);
--rl-badge-purple-text: var(--rl-primitive-purple-50-ext);
--rl-badge-purple-bg-strong: var(--rl-primitive-purple-20-ext);
--rl-badge-purple-text-strong: var(--rl-primitive-purple-60-ext);
/* gray has no "-ext"; Slate stands in, same shade number (see Dark mode note above) */
--rl-badge-gray-bg: var(--rl-primitive-slate-10);
--rl-badge-gray-text: var(--rl-primitive-slate-50);
--rl-badge-gray-bg-strong: var(--rl-primitive-slate-20); /* Figma is slightly off-ramp here */
--rl-badge-gray-text-strong: var(--rl-primitive-slate-60);
/* green */
--rl-badge-green-bg: var(--rl-primitive-green-10-ext);
--rl-badge-green-text: var(--rl-primitive-green-50-ext);
--rl-badge-green-bg-strong: var(--rl-primitive-green-20-ext);
--rl-badge-green-text-strong: var(--rl-primitive-green-60-ext);
/* yellow */
--rl-badge-yellow-bg: var(--rl-primitive-yellow-10-ext);
--rl-badge-yellow-text: var(--rl-primitive-yellow-50-ext);
--rl-badge-yellow-bg-strong: var(--rl-primitive-yellow-20-ext);
--rl-badge-yellow-text-strong: var(--rl-primitive-yellow-60-ext);
/* orange */
--rl-badge-orange-bg: var(--rl-primitive-orange-10-ext);
--rl-badge-orange-text: var(--rl-primitive-orange-50-ext);
--rl-badge-orange-bg-strong: var(--rl-primitive-orange-20-ext);
--rl-badge-orange-text-strong: var(--rl-primitive-orange-60-ext);
/* red */
--rl-badge-red-bg: var(--rl-primitive-red-10-ext);
--rl-badge-red-text: var(--rl-primitive-red-50-ext);
--rl-badge-red-bg-strong: var(--rl-primitive-red-20-ext);
--rl-badge-red-text-strong: var(--rl-primitive-red-60-ext);
/* alert */
--rl-badge-alert-bg: var(--rl-primitive-black-ext);
--rl-badge-alert-text: var(--rl-primitive-red-50-ext);
--rl-badge-alert-border: var(--rl-primitive-red-40-ext);
--rl-badge-alert-bg-strong: var(--rl-primitive-red-40-ext);
--rl-badge-alert-text-strong: var(--rl-primitive-white-ext);
/* teal */
--rl-badge-teal-bg: var(--rl-primitive-teal-10-ext);
--rl-badge-teal-text: var(--rl-primitive-teal-50-ext);
--rl-badge-teal-bg-strong: var(--rl-primitive-teal-20-ext);
--rl-badge-teal-text-strong: var(--rl-primitive-teal-60-ext);
/* navy */
--rl-badge-navy-bg: var(--rl-primitive-navy-10-ext);
--rl-badge-navy-text: var(--rl-primitive-navy-50-ext);
--rl-badge-navy-bg-strong: var(--rl-primitive-navy-20-ext);
--rl-badge-navy-text-strong: var(--rl-primitive-navy-60-ext); /* Figma is slightly off-ramp here */
/* emerald */
--rl-badge-emerald-bg: var(--rl-primitive-emerald-10-ext);
--rl-badge-emerald-text: var(--rl-primitive-emerald-50-ext);
--rl-badge-emerald-bg-strong: var(--rl-primitive-emerald-20-ext);
--rl-badge-emerald-text-strong: var(--rl-primitive-emerald-60-ext);
/* === NEUTRAL SURFACES === */
/* white has no inverted "-ext" (white-ext is still near-white). This is
* the one place white is a surface role rather than text/icon-on-color,
* so it inverts to black-ext instead. Gray has no "-ext" of its own (see
* the Gray comment above); gray-based tokens below use Slate instead, at
* the SAME shade number (gray-10 -> slate-10, gray-15 -> slate-15, etc.),
* since Slate's Figma shade numbers already run dark-to-light -- the
* opposite direction from Gray -- so no flipping is needed to use it as
* Gray's inverted dark-mode stand-in. */
--rl-neutral-surface-default: var(--rl-primitive-black-ext);
--rl-neutral-surface-subtle: var(--rl-primitive-wash-ext);
--rl-neutral-surface-muted: var(--rl-primitive-slate-10);
--rl-neutral-surface-hover: var(--rl-primitive-slate-10);
--rl-neutral-surface-active: var(--rl-primitive-slate-15);
--rl-neutral-surface-disabled: var(--rl-primitive-slate-10);
--rl-neutral-surface-highlighted-accent: var(--rl-primitive-slate-20);
--rl-neutral-surface-highlighted: var(--rl-primitive-blue-15-ext);
/* === RAISED / FLOATING SURFACES === */
--rl-neutral-surface-raised: var(--rl-primitive-black-ext);
--rl-neutral-surface-floating: var(--rl-primitive-slate-30);
/* === SHELL SURFACES ===
* Shell chrome (ApplicationHeader, ai-assistant-ui panels) stays dark
* regardless of app theme -- its light-mode value (gray-50) is already
* dark, matching the same "shell stays dark even in light mode" pattern
* as --rl-shell-surface-default. So these don't invert through
* Slate; hover picks a darker slate than the resting surface, mirroring
* the light-mode direction (gray-50 resting -> gray-60 hover, i.e. hover
* darkens further). */
--rl-shell-surface: var(--rl-primitive-slate-20);
--rl-shell-surface-default: var(--rl-primitive-slate-15); /* nav rail / app-chrome backdrop */
--rl-shell-surface-hover: var(--rl-primitive-slate-15);
--rl-shell-surface-secondary-hover: var(--rl-primitive-slate-40);
--rl-shell-surface-secondary-selected: var(--rl-primitive-slate-20);
/* Unlike the rest of this block, --rl-shell-surface-selected(-default,-hover) does NOT follow the
* "-ext" rule: its light value (teal-60/teal-50, RL-Refresh nav "Light Mode") is a chosen
* brand color, not a neutral that should invert -- teal-*-ext is a bright cyan, not a dark-
* mode counterpart of that same nav identity. RL-Refresh nav "Dark Mode" (Figma node
* 182:36916) specs slate-30/slate-20 instead. No other consumer exists yet, so re-pointing
* this carries no other blast radius. */
--rl-shell-surface-selected: var(--rl-primitive-slate-30);
--rl-shell-surface-selected-default: var(--rl-primitive-slate-30);
--rl-shell-surface-selected-hover: var(--rl-primitive-slate-20);
/* Nav key-hint badge fill -- Figma "Navigation" (node 182:36916) dark: non-active
* pill slate-40, active/current item slate-50 (brighter). Split from
* --rl-shell-surface-selected(-hover) so the badge doesn't inherit the row colors. */
--rl-shell-surface-emphasis: var(--rl-primitive-slate-40);
--rl-shell-surface-emphasis-strong: var(--rl-primitive-slate-50);
--rl-shell-on-emphasis: var(--rl-primitive-black-ext); /* text on the key-hint badge (dark) */
--rl-shell-control: var(--rl-primitive-slate-40);
--rl-shell-control-hover: var(--rl-primitive-slate-30);
--rl-shell-inset: var(--rl-primitive-slate-10);
--rl-shell-inset-hover: var(--rl-primitive-slate-20);
/* === SHELL BORDERS === */
--rl-shell-border-inset-subtle: var(--rl-primitive-slate-60);
--rl-shell-border-secondary: var(--rl-primitive-slate-30);
--rl-shell-border-secondary-hover: var(--rl-primitive-slate-40);
/* === SHELL INSET TEXT === */
--rl-shell-on-inset: var(--rl-primitive-white-ext);
--rl-shell-on-inset-secondary: var(--rl-primitive-slate-20);
--rl-shell-on-inset-secondary-hover: var(--rl-primitive-white-ext);
--rl-shell-on-inset-muted: var(--rl-primitive-slate-40);
--rl-shell-on-inset-muted-hover: var(--rl-primitive-white-ext);
--rl-shell-on-inset-muted-secondary-hover: var(--rl-primitive-slate-50);
/* === SHELL TEXT === */
--rl-shell-text: var(--rl-primitive-white-ext);
/* RL-Refresh nav dark: icons + muted labels ride the slate ramp.
* --rl-shell-text-secondary stays gray-30; it's the disabled-item color, which the nav refresh does not restyle.
* --rl-neutral-text-tertiary-hover's mechanical slate-20, Dark/Hover diverts from it mechanically */
--rl-shell-text-secondary-muted: var(--rl-primitive-slate-40);
--rl-shell-icon-secondary: var(--rl-primitive-slate-40);
--rl-shell-icon-active: var(--rl-primitive-slate-50); /* dark hover-icon accent (Figma 2290:9040) */
--rl-shell-text-default-active: var(--rl-primitive-slate-50);
--rl-shell-icon-default-active: var(--rl-primitive-slate-50);
--rl-shell-icon: var(--rl-primitive-slate-40);
--rl-shell-icon-accent: var(--rl-primitive-slate-40);
/* === NEUTRAL TEXT === */
/* black-ext stays dark too (see surface-default note above). This is a
* TEXT role, so it needs to go light for contrast, not black-ext. */
--rl-neutral-text-default: var(--rl-primitive-white-ext);
--rl-neutral-text-default-hover: var(--rl-primitive-slate-60);
--rl-neutral-text-disabled: var(--rl-primitive-slate-30);
--rl-neutral-text-on-inverse: var(--rl-primitive-white-ext);
--rl-neutral-text-on-floating: var(--rl-primitive-white-ext);
--rl-neutral-text-subdued: var(--rl-primitive-slate-60);
--rl-neutral-text-subtle: var(--rl-primitive-slate-50);
--rl-neutral-text-emphasis: var(--rl-primitive-teal-40-ext);
--rl-neutral-text-disabled-strong: var(--rl-primitive-slate-40);
--rl-info-icon: var(--rl-primitive-blue-40-ext);
/* === NEUTRAL TEXT (TIERS) === */
--rl-neutral-text-secondary: var(--rl-primitive-slate-40);
--rl-neutral-text-secondary-hover: var(--rl-primitive-slate-50);
--rl-neutral-text-strong: var(--rl-primitive-slate-50);
--rl-neutral-text-muted: var(--rl-primitive-slate-30);
--rl-neutral-text-tertiary: var(--rl-primitive-slate-15);
/* === INSET === */
--rl-inset-surface-emphasis: var(--rl-primitive-slate-20);
--rl-inset-text-secondary: var(--rl-primitive-slate-50);
--rl-inset-text-muted: var(--rl-primitive-slate-40);
--rl-inset-border: var(--rl-primitive-slate-20);
--rl-inset-border-subtle: var(--rl-primitive-slate-15);
/* === BORDERS === */
--rl-neutral-border-default: var(--rl-primitive-slate-20);
--rl-neutral-border-strong: var(--rl-primitive-slate-50);
--rl-neutral-border-secondary: var(--rl-primitive-slate-40);
--rl-neutral-border-muted: var(--rl-primitive-slate-30);
--rl-neutral-border-muted-hover: var(--rl-primitive-slate-40);
--rl-neutral-border-subtle: var(--rl-primitive-slate-15);
--rl-neutral-border-divider: var(--rl-primitive-slate-10);
--rl-neutral-border-wash: var(--rl-primitive-wash-ext);
--rl-focus-ring: var(--rl-primitive-blue-30-ext);
--rl-focus-ring-strong: var(--rl-primitive-blue-50-ext);
--rl-focus-ring-secondary: var(--rl-primitive-teal-30-ext);
--rl-focus-ring-tertiary: var(--rl-primitive-slate-40);
--rl-focus-ring-hover: var(--rl-primitive-slate-20);
--rl-focus-ring-inner: var(--rl-primitive-white-ext);
--rl-accent-border: var(--rl-primitive-teal-40-ext);
--rl-accent-border-subtle: var(--rl-primitive-teal-20-ext);
--rl-accent-border-hover: var(--rl-primitive-teal-50-ext);
--rl-selected-border: var(--rl-primitive-teal-15-ext);
/* === CONDITIONAL FORMATTING SWATCHES === */
--rl-swatch-0: var(--rl-primitive-slate-10);
--rl-swatch-1: var(--rl-primitive-navy-10-ext);
--rl-swatch-2: var(--rl-primitive-blue-10-ext);
--rl-swatch-3: var(--rl-primitive-emerald-10-ext);
--rl-swatch-4: var(--rl-primitive-green-10-ext);
--rl-swatch-5: var(--rl-primitive-yellow-10-ext);
--rl-swatch-6: var(--rl-primitive-orange-10-ext);
--rl-swatch-7: var(--rl-primitive-red-10-ext);
--rl-swatch-8: var(--rl-primitive-purple-10-ext);
--rl-swatch-9: var(--rl-primitive-slate-20);
--rl-swatch-10: var(--rl-primitive-navy-20-ext);
--rl-swatch-11: var(--rl-primitive-blue-20-ext);
--rl-swatch-12: var(--rl-primitive-emerald-20-ext);
--rl-swatch-13: var(--rl-primitive-green-20-ext);
--rl-swatch-14: var(--rl-primitive-yellow-20-ext);
--rl-swatch-15: var(--rl-primitive-orange-20-ext);
--rl-swatch-16: var(--rl-primitive-red-20-ext);
--rl-swatch-17: var(--rl-primitive-purple-20-ext);
--rl-swatch-18: var(--rl-primitive-slate-10);
--rl-swatch-19: var(--rl-primitive-slate-40);
/* UI_EXTENDED_SWATCH_COLORS: same-step -ext, matching swatch-10..17 above. */
--rl-swatch-20: var(--rl-primitive-slate-30);
--rl-swatch-21: var(--rl-primitive-navy-30-ext);
--rl-swatch-22: var(--rl-primitive-blue-30-ext);
--rl-swatch-23: var(--rl-primitive-emerald-30-ext);
--rl-swatch-24: var(--rl-primitive-green-30-ext);
--rl-swatch-25: var(--rl-primitive-yellow-30-ext);
--rl-swatch-26: var(--rl-primitive-orange-30-ext);
--rl-swatch-27: var(--rl-primitive-red-30-ext);
--rl-swatch-28: var(--rl-primitive-purple-30-ext);
--rl-swatch-29: var(--rl-primitive-slate-50);
--rl-swatch-30: var(--rl-primitive-navy-50-ext);
--rl-swatch-31: var(--rl-primitive-blue-50-ext);
--rl-swatch-32: var(--rl-primitive-emerald-50-ext);
--rl-swatch-33: var(--rl-primitive-green-50-ext);
--rl-swatch-34: var(--rl-primitive-yellow-50-ext);
--rl-swatch-35: var(--rl-primitive-orange-50-ext);
--rl-swatch-36: var(--rl-primitive-red-50-ext);
--rl-swatch-37: var(--rl-primitive-purple-50-ext);
/* === CONDITIONAL FORMATTING SWATCHES (TEXT) === */
--rl-swatch-text-0: var(--rl-primitive-navy-50-ext);
--rl-swatch-text-1: var(--rl-primitive-blue-50-ext);
--rl-swatch-text-2: var(--rl-primitive-emerald-50-ext);
--rl-swatch-text-3: var(--rl-primitive-green-50-ext);
--rl-swatch-text-4: var(--rl-primitive-yellow-50-ext);
--rl-swatch-text-5: var(--rl-primitive-orange-50-ext);
--rl-swatch-text-6: var(--rl-primitive-red-50-ext);
--rl-swatch-text-7: var(--rl-primitive-purple-50-ext);
--rl-swatch-text-8: var(--rl-neutral-text-default);
/* UI_EXTENDED_SWATCH_COLORS: flips to black-ext, since step-50 backgrounds lighten in dark mode. */
--rl-swatch-text-9: var(--rl-primitive-black-ext);
/* === CONDITIONAL FORMATTING SWATCHES (BORDER) ===
* swatch-border-10 is gray-20, and Gray has no "-ext" of its own, so it
* re-points to Slate at the SAME shade number, slate-20 — the same rule
* swatch-9 follows above, since the two are the same colour in two slots. */
--rl-swatch-border-0: var(--rl-primitive-white-ext);
--rl-swatch-border-1: var(--rl-primitive-slate-30);
--rl-swatch-border-2: var(--rl-primitive-navy-30-ext);
--rl-swatch-border-3: var(--rl-primitive-blue-30-ext);
--rl-swatch-border-4: var(--rl-primitive-emerald-30-ext);
--rl-swatch-border-5: var(--rl-primitive-green-30-ext);
--rl-swatch-border-6: var(--rl-primitive-yellow-30-ext);
--rl-swatch-border-7: var(--rl-primitive-orange-30-ext);
--rl-swatch-border-8: var(--rl-primitive-red-30-ext);
--rl-swatch-border-9: var(--rl-primitive-purple-30-ext);
--rl-swatch-border-10: var(--rl-primitive-slate-20);
/* === EFFECTS & RADII === */
--rl-shadow-flat-subtle: var(--rl-primitive-slate-15);
--rl-shadow-flat-medium: var(--rl-primitive-slate-20);
/* === BRAND ===
* brand-teal/-navy have no "-ext" in Figma; re-pointed to their closest
* in-palette primitive's dark companion (same rule as QUARANTINE below). */
--rl-brand-primary: var(--rl-primitive-teal-30-ext); /* closest: teal-30 */
--rl-brand-secondary: var(--rl-primitive-navy-60-ext); /* closest: navy-60 */
/* === ALIASES ===
* No-op restatement; each resolves through the token it aliases, which
* already has its own dark value above. */
--rl-brand-mark-highlight: var(--rl-neutral-surface-default);
--rl-neutral-surface-page: var(--rl-neutral-surface-muted);
--rl-shell-border-divider: var(--rl-primitive-slate-30);
--rl-shell-surface-header: var(--rl-shell-surface);
/* === RADII & NON-COLOR EFFECTS ===
* Not colors, so identical in light and dark. */
--rl-radius-default: var(--rl-primitive-radius-none);
--rl-radius-pill: var(--rl-primitive-radius-pill);
--rl-elevation-overlay: none;
/* === EFFECTS (ink-based) ===
* These are bare RGB triplets at a chosen alpha, not primitives with an
* "-ext" companion, so there's no mechanical swap. Instead: shadow tokens
* already built on black stay black (a dark shadow reads fine on either
* scheme); ink-white inverts to ink-black, mirroring how
* --rl-neutral-surface-default inverts white -> black-ext above; opacity
* is bumped where a black shadow would otherwise all but disappear against
* a dark surface (same technique catppuccin.css uses for its dark shadow
* scale -- rl-shadow-subtle/-soft/-medium/-strong there jump from
* 5/10/14/20% to 25/35/45/60%; borrowed directly here since these are the
* same tokens). */
--rl-neutral-surface-scrim: color-mix(in sRGB, var(--rl-primitive-slate-10) 75%, transparent);
--rl-shadow-subtle: rgb(var(--rl-primitive-ink-black) / 25%);
--rl-shadow-soft: rgb(var(--rl-primitive-ink-black) / 35%);
--rl-shadow-medium: rgb(var(--rl-primitive-ink-black) / 45%);
--rl-shadow-strong: rgb(var(--rl-primitive-ink-black) / 60%);
--rl-shadow-selected-glow: rgb(var(--rl-primitive-ink-teal) / 18%);
--rl-shadow-floating-hairline: rgb(var(--rl-primitive-ink-black) / 30%);
--rl-shadow-floating-elevation: rgb(var(--rl-primitive-ink-black) / 50%);
--rl-shadow-floating-highlight: rgb(var(--rl-primitive-ink-white) / 15%);
/* Dark reuses the floating-* colours -- the same recipe Toast already uses. */
--rl-elevation-high:
0 0 2px 0 var(--rl-shadow-floating-hairline),
0 8px 24px 2px var(--rl-shadow-floating-elevation);
/* === KEY HINT === */
--rl-key-surface-primary: var(--rl-primitive-slate-50);
--rl-key-on-surface-primary: var(--rl-primitive-black-ext);
--rl-key-surface-secondary: var(--rl-primitive-slate-40);
--rl-key-on-surface-secondary: var(--rl-primitive-black);
/* === FORMULA === */
--rl-formula-keyword: var(--rl-primitive-white-ext);
--rl-formula-function: var(--rl-primitive-blue-40-ext);
--rl-formula-column: var(--rl-primitive-teal-40-ext);
--rl-formula-value: var(--rl-primitive-green-40-ext);
--rl-formula-text: var(--rl-primitive-orange-30-ext);
/* === QUARANTINE ===
* Re-pointed using the same rule as the tokens above: in-palette hues
* swap to their "-ext" companion (Gray swaps to Slate); off-palette
* one-off pins (no "-ext" of their own) swap to the closest in-palette
* primitive's dark companion instead, marked below with a comment. The
* ink-based ones follow the EFFECTS (ink-based) rule above: black stays
* black, white inverts to black, opacity is bumped where a black shadow
* would otherwise disappear against a dark surface, and
* --rl-deprecated-neutral-text-default (a TEXT role) inverts to white. */
/* --- SELECTED wash --- */
--rl-deprecated-selected-wash: var(--rl-primitive-navy-10-ext); /* closest: navy-10 */
/* --- Navigation.scss / Navigation.module.scss / NavigationMenu.scss --- */
--rl-deprecated-accent-solid-active: var(--rl-primitive-teal-30-ext); /* closest: teal-30 */
/* --- icon.module.scss / typography.scss --- */
--rl-deprecated-neutral-text-default-emphasis: var(--rl-primitive-teal-30-ext);
--rl-deprecated-info-icon: var(--rl-primitive-blue-30-ext);
--rl-deprecated-accent-text-on-inverse: var(--rl-primitive-teal-20-ext);
--rl-deprecated-neutral-text-dark-blue: var(--rl-primitive-navy-50-ext); /* closest: navy-50 */
/* --- dropdownMenu.module.scss --- */
--rl-deprecated-neutral-text-wash: var(--rl-primitive-purple-50-ext); /* closest: purple-50 */
/* --- fields.module.scss --- */
--rl-deprecated-neutral-border-default: var(--rl-primitive-slate-20); /* closest: gray-20 */
/* --- alertbar.module.scss --- */
--rl-deprecated-danger-on-container-hover: var(--rl-primitive-red-60-ext);
--rl-deprecated-success-on-container-hover: var(--rl-primitive-green-60-ext);
--rl-deprecated-warning-on-container-hover: var(--rl-primitive-orange-60-ext);
--rl-deprecated-accent-on-container-hover: var(--rl-primitive-teal-60-ext);
/* --- NotificationsDropdownMenu.scss --- */
--rl-deprecated-notifications-body: var(--rl-primitive-slate-40); /* closest: gray-40 */
--rl-deprecated-notifications-meta: var(--rl-primitive-slate-30); /* closest: gray-30 */
/* --- charts.module.scss --- */
--rl-deprecated-neutral-text-chart-line: var(--rl-primitive-navy-30-ext); /* closest: navy-30 */
--rl-deprecated-shadow-tooltip: var(--rl-primitive-navy-30-ext); /* closest: navy-30 */
/* --- Main.css --- */
/* --- Multiple / various places --- */
--rl-deprecated-neutral-text-light-teal: var(--rl-primitive-teal-10-ext); /* closest: teal-10 */
--rl-deprecated-neutral-surface-light-teal: var(--rl-primitive-slate-15); /* selected-surface */
--rl-deprecated-neutral-border-divider: var(--rl-primitive-slate-20); /* closest: gray-20 */
--rl-deprecated-danger-on-container: var(--rl-primitive-red-50-ext);
--rl-deprecated-success-container: var(--rl-primitive-green-40-ext);
--rl-deprecated-success-on-container: var(--rl-primitive-green-50-ext);
--rl-deprecated-warning-container: var(--rl-primitive-orange-40-ext);
--rl-deprecated-warning-on-container: var(--rl-primitive-orange-50-ext);
--rl-deprecated-neutral-text-default: var(--rl-primitive-white-ext); /* TEXT role; ink-spruce -> white */
/* --- DataGrid --- */
--rl-deprecated-neutral-surface-light-teal-subtle: var(--rl-primitive-slate-15); /* selected-surface */
--rl-deprecated-neutral-surface-overlay-faint: var(--rl-primitive-wash-ext);
--rl-deprecated-neutral-surface-overlay-subtle: var(--rl-primitive-slate-10);
--rl-deprecated-neutral-surface-overlay-medium: var(--rl-primitive-slate-30);
--rl-deprecated-neutral-surface-overlay-faint-alpha: var(--rl-primitive-wash-ext);
--rl-deprecated-neutral-surface-selected-primary: var(--rl-primitive-teal-30-ext); /* closest: teal-30 */
--rl-deprecated-neutral-surface-flash-changed: var(--rl-primitive-teal-15-ext);
--rl-deprecated-neutral-surface-flash-increase: var(--rl-primitive-green-15-ext);
--rl-deprecated-neutral-surface-flash-decrease: var(--rl-primitive-red-15-ext);
--rl-deprecated-neutral-surface-flash-removed: var(--rl-primitive-slate-15);
--rl-deprecated-neutral-surface-flash-data-changed: var(--rl-primitive-blue-10-ext);
--rl-deprecated-neutral-surface-active: var(--rl-primitive-slate-15); /* matches neutral-surface-active */
--rl-deprecated-neutral-surface-skeleton: var(--rl-primitive-slate-20); /* closest: gray-20 */
--rl-deprecated-neutral-surface-scrollbar: var(--rl-primitive-slate-20);
--rl-deprecated-neutral-surface-scrollbar-hover: var(--rl-primitive-slate-40);
--rl-deprecated-neutral-text-overlay-medium: var(--rl-primitive-slate-30);
--rl-deprecated-neutral-text-overlay-bold: var(--rl-primitive-slate-50);
--rl-deprecated-accent-text: var(--rl-primitive-teal-50-ext); /* matches accent-text */
--rl-deprecated-warning-text: var(--rl-primitive-orange-40-ext);
--rl-deprecated-neutral-text-overlay-soft-alpha: var(--rl-primitive-slate-20); /* closest: gray-20 */
--rl-deprecated-neutral-border-overlay-subtle: var(--rl-primitive-slate-10);
--rl-deprecated-neutral-border-overlay-soft: var(--rl-primitive-slate-20);
--rl-deprecated-neutral-border-overlay-medium: var(--rl-primitive-slate-30);
--rl-deprecated-warning-border: var(--rl-primitive-orange-40-ext);
--rl-deprecated-neutral-border-overlay-soft-alpha: var(--rl-primitive-slate-20); /* closest: gray-20 */
--rl-deprecated-shadow-overlay-faint: var(--rl-primitive-wash-ext);
--rl-deprecated-shadow-overlay-subtle: var(--rl-primitive-slate-10);
--rl-deprecated-shadow-overlay-soft: var(--rl-primitive-slate-20);
--rl-deprecated-shadow-overlay-medium: var(--rl-primitive-slate-30);
--rl-deprecated-shadow-focus-primary: var(--rl-primitive-teal-30-ext); /* closest: teal-30 */
--rl-deprecated-shadow-focus: var(--rl-primitive-blue-30-ext);
--rl-deprecated-shadow-error: var(--rl-primitive-red-40-ext);
--rl-deprecated-shadow-warning: var(--rl-primitive-orange-40-ext);
--rl-deprecated-shadow-hint: var(--rl-primitive-slate-40);
--rl-deprecated-shadow-flat-medium: var(--rl-primitive-slate-20); /* closest: gray-20 */
--rl-deprecated-shadow-flat-divider: var(--rl-primitive-slate-20); /* closest: gray-20 */
--rl-deprecated-neutral-surface-loading-overlay: rgb(var(--rl-primitive-ink-black) / 85%); /* inverted */
--rl-deprecated-neutral-surface-scrim: rgb(var(--rl-primitive-ink-black) / 70%); /* inverted */
--rl-deprecated-shadow-overlay-subtle-alpha: rgb(var(--rl-primitive-ink-spruce) / 20%);
--rl-deprecated-shadow-faint: rgb(var(--rl-primitive-ink-black) / 25%);
/* --- NavigationDrawer.scss & AI-Assistant --- */
--rl-deprecated-neutral-surface-inverse: var(--rl-primitive-slate-60); /* closest: gray-60 */
/* --- AI-Assistant --- */
/* despite the "text" name, this is a nav-item hover background-color (see
NavigationMenu.module.scss et al.) -- the same role --rl-shell-surface-
hover plays for the newer shell surfaces (ApplicationHeader,
FavoriteToggle), just for the legacy/deprecated nav. Referencing it
instead of duplicating a value keeps both hover fills in sync. */
--rl-deprecated-shell-text-default-hover: var(--rl-shell-surface-hover);
--rl-deprecated-categorical-text: var(--rl-primitive-purple-40-ext);
--rl-deprecated-warning-surface-active: var(--rl-primitive-orange-15-ext);
--rl-deprecated-accent-surface-active: var(--rl-primitive-teal-15-ext);
--rl-deprecated-skeleton-surface-dark: var(--rl-primitive-slate-50); /* closest: gray-50 */
--rl-deprecated-skeleton-surface-dark-shimmer: var(--rl-primitive-slate-60); /* closest: gray-60 */
--rl-deprecated-skeleton-surface-light: var(--rl-primitive-wash-ext); /* closest: wash */
--rl-deprecated-skeleton-surface-light-shimmer: var(--rl-primitive-slate-20); /* closest: gray-20 */
/* --- accounting-ui (RLA-427015 / RLA-427016) --- */
/* --- data-ui (RLA-246622) --- */
/* --- fieldLockingSidePanel.scss --- */
--rl-deprecated-dataui-lock-icon-active: var(--rl-primitive-teal-30-ext);
--rl-deprecated-dataui-lock-icon-inactive: var(--rl-primitive-slate-30);
/* --- DataMappingsDataTable.css / ConfigurableFinancialInstitutions.css /
RecordLogDataTable.css / TransmissionsHubDataTable.css --- */
--rl-deprecated-dataui-table-row-hover: var(--rl-primitive-white-ext); /* closest: white */
--rl-deprecated-dataui-table-border: var(--rl-primitive-green-10-ext); /* closest: green-10 */
/* --- DataMappingsDataTable.css / ConfigurableFinancialInstitutions.css --- */
--rl-deprecated-dataui-table-row-divider: var(--rl-primitive-wash-ext); /* closest: wash */
--rl-deprecated-dataui-table-head-background: var(--rl-primitive-white-ext); /* closest: white */
/* --- ProcessTables.scss / RecipesInfiniteScrollList.scss --- */
--rl-deprecated-dataui-text-secondary: var(--rl-primitive-slate-50); /* closest: gray-50 */
--rl-deprecated-dataui-text-error: var(--rl-primitive-red-40-ext); /* closest: red-40 */
/* --- ProcessRunDetailModal.scss --- */
--rl-deprecated-dataui-modal-text-secondary: var(--rl-primitive-slate-50); /* closest: gray-50 */
--rl-deprecated-dataui-copy-success-background: var(--rl-primitive-emerald-10-ext); /* closest: emerald-10 */
--rl-deprecated-dataui-copy-success-text: var(--rl-primitive-green-40-ext); /* closest: green-40 */
--rl-deprecated-dataui-copy-error-background: var(--rl-primitive-red-10-ext); /* closest: red-10 */
--rl-deprecated-dataui-copy-error-text: var(--rl-primitive-red-50-ext); /* closest: red-50 */
/* --- fontColor (gray keyword) --- */
/* --- tom-pc-ui migration (token targets audit, 2026-07-01) --- */
--rl-deprecated-tom-text-default: var(--rl-primitive-white-ext); /* TEXT role; mine-shaft -> white-ext */
--rl-deprecated-tom-surface-dark: var(--rl-primitive-slate-10); /* closest: gray-10 */
--rl-deprecated-tom-surface-hover: var(--rl-primitive-slate-10); /* closest: gray-10 */
--rl-deprecated-tom-focus-ring: var(--rl-primitive-blue-40-ext); /* closest: blue-40 */
--rl-deprecated-tom-warning-solid: var(--rl-primitive-orange-40-ext); /* closest: orange-40 */
--rl-deprecated-tom-transparent: rgb(var(--rl-primitive-ink-black) / 0%);
--rl-deprecated-tom-surface-translucent: rgb(var(--rl-primitive-ink-black) / 53.3%); /* inverted */
--rl-deprecated-tom-border-translucent: rgb(var(--rl-primitive-ink-black) / 50%); /* inverted */
--rl-deprecated-tom-danger-text-strong: var(--rl-primitive-red-40-ext); /* closest: red-40 */
--rl-deprecated-tom-surface-scrim: rgb(var(--rl-primitive-ink-black) / 90%); /* inverted */
--rl-deprecated-tom-danger-surface-subtle: rgb(var(--rl-primitive-coral) / 16%);
--rl-deprecated-tom-danger-surface-strong: rgb(var(--rl-primitive-coral) / 50%);
}
/* Layer 3: IconBase writes raw primitive colors straight into `--icon-color-*` inline, bypassing
* the semantic-token re-pointing above. `--icon-color-*` can't be redeclared here directly (a
* custom property can't reference itself), so this redeclares the `-themed` indirection
* IconBase.scss paints from, preferring the "-ext" companion IconBase.tsx computed.
* TODO(UI-7812): remove this override once IconBase moves to variant/intent-based tokens
* instead of runtime derivation. */
HTML[data-theme='refresh'][data-color-scheme='dark'] .icon.component {
--icon-color-background-themed: var(--icon-color-background-ext, var(--icon-color-background, transparent));
--icon-color-border-themed: var(--icon-color-border-ext, var(--icon-color-border, transparent));
/* stylelint-disable-next-line max-line-length */
--icon-color-primary-themed: var(--icon-color-primary-ext, var(--icon-color-primary, var(--rl-shell-icon-unset, currentColor)));
/* stylelint-disable-next-line max-line-length */
--icon-color-secondary-themed: var(--icon-color-secondary-ext, var(--icon-color-secondary, var(--icon-color-primary-themed)));
}
/**
* Catppuccin Theme - "Gold Standard" Reference Implementation
*
* Light mode: Catppuccin Latte
* Dark mode: Catppuccin Mocha
*
* ----------------------------------------------------------------------------
* How a theme should be authored at Ridgeline
*
* Ridgeline's token system has three tiers:
*
* 1. Primitives -- raw palette values (--rl-primitive-*) in primitives.css.
* Do NOT hijack these from a theme; the primitive layer
* encodes Ridgeline's shade scales (10..60) and palettes
* like Catppuccin don't share that scale, so wholesale
* remapping flattens hover/active/disabled hierarchy.
*
* 2. Semantics -- role mappings (--rl-color-*), component tokens, and any
* other intent-driven tokens defined in adoption.css. This
* is the default tier for theming and where 95% of a
* theme's work lives.
*
* 3. Overrides -- targeted, high-specificity CSS rules that style specific
* elements or classes when the semantic layer doesn't yet
* expose the knob you need (e.g. a component that bypasses
* tokens by writing inline `style` from JavaScript). Each
* rule is scoped to the theme selector and is paired with
* a comment naming the consumer it targets.
*
* Concretely this file does three things:
*
* 1. Defines the full Latte and Mocha palettes as --catppuccin-latte-* /
* --catppuccin-mocha-* custom properties at the top. These are the
* authoritative source of truth -- grep them when you need to know
* "which exact Catppuccin color is this token using?"
*
* 2. Overrides every --rl-color-* semantic token, twice -- once for Latte
* under [data-theme='catppuccin'], once for Mocha under
* [data-theme='catppuccin'][data-color-scheme='dark']. Each override
* points at a palette var defined in step 1.
*
* 3. Adds tier-3 targeted overrides at the bottom of the file for specific
* elements that bypass the semantic layer (D3 charts, etc.).
*
* color-mix() is used throughout to derive hover/active/container shades from
* palette colors. Catppuccin has no shade scales, so where Ridgeline's design
* system expects a continuous ladder (resting -> hover -> active), color-mix
* is the cleanest way to preserve hierarchy without inventing new palette
* entries.
*
* Palette reference: https://catppuccin.com/palette
* Activate via: window.rlTheme.setTheme('catppuccin')
*/
/* ============================================================================
* App-shell theming blueprint
*
* How and why the navigation sidebar, the application header, and the surfaces
* that sit on them were themed -- written down so the same approach can be
* reused for other surfaces and other themes.
*
* 1. Prominence hierarchy. The app shell reads as three stacked layers:
*
* NavigationMenu (sidebar) -> the strong, most-pronounced color
* .application-header -> same family, recessed darker so it sits "lower"
* main content (page) -> the lowest layer: a deep, neutral negative
* space (Crust) that all content sits on top of
*
* Each layer should be clearly distinguishable from the one above it.
* "Prominence" here means how far a layer's lightness sits from the content
* base: the nav is furthest, the header is closer, content is the baseline.
*
* 2. One family per mode. Light (Latte) uses TEAL (Ridgeline's brand); dark
* (Mocha) uses MAUVE (Catppuccin's signature accent). Everything on the
* sidebar is a member of that family -- the fill, its hover/active item
* states, the key-hint chip, the loading skeleton, and the divider are all
* tints of the one hue, so the chrome reads as a single set.
*
* 3. Derive, don't hand-pick. Every shade is built from a palette var with
* color-mix (black/white only as darken/lighten anchors). No raw rgb -- the
* colors stay palette-true, and a new theme can re-author by swapping the
* anchor hue (teal -> its brand color, mauve -> its accent).
*
* 4. Validate, don't eyeball. Each value was checked with a throwaway probe for
* hue (actually in-family?), prominence (does the layer ordering hold?), and
* contrast (does text/glyph clear WCAG AA on its surface?).
*
* 5. Split shared tokens before theming. Some elements borrowed a token shared
* with unrelated surfaces -- the sidebar divider and the header both used
* surface-shell-secondary, which also paints ~50 AI-chat surfaces. Each got
* its own role in adoption.css (outline-shell-divider, surface-shell-header),
* aliased to the old token by default, so a theme can recolor one without
* disturbing the rest. If you can't target a thing on its own, that is a
* missing semantic token, not a reason for a tier-3 override.
*
* Constraints worth knowing next time:
* - The header sits DARKER than the sidebar so it reads as a recessed, "lower"
* layer, and the bright nav text (on-surface-shell) pops on the dark header.
* - In dark mode the Mocha shadow range is tight (the sidebar is already near
* the floor), so the header's recession reads as depth more than as a large
* luminance gap from the nav. Lean on darkness, not a big contrast ratio.
* ============================================================================ */
/* ============================================================================
* Palette definitions
*
* Both blocks live on the root catppuccin selector so they inherit into both
* the light and dark override blocks. Each palette is the complete set of
* named colors from https://catppuccin.com/palette.
* ============================================================================ */
HTML[data-theme='catppuccin'] {
/* Catppuccin Latte (light) */
--catppuccin-latte-rosewater: rgb(220 138 120);
--catppuccin-latte-flamingo: rgb(221 120 120);
--catppuccin-latte-pink: rgb(234 118 203);
--catppuccin-latte-mauve: rgb(136 57 239);
--catppuccin-latte-red: rgb(210 15 57);
--catppuccin-latte-maroon: rgb(230 69 83);
--catppuccin-latte-peach: rgb(254 100 11);
--catppuccin-latte-yellow: rgb(223 142 29);
--catppuccin-latte-green: rgb(64 160 43);
--catppuccin-latte-teal: rgb(23 146 153);
--catppuccin-latte-sky: rgb(4 165 229);
--catppuccin-latte-sapphire: rgb(32 159 181);
--catppuccin-latte-blue: rgb(30 102 245);
--catppuccin-latte-lavender: rgb(114 135 253);
--catppuccin-latte-text: rgb(76 79 105);
--catppuccin-latte-subtext1: rgb(92 95 119);
--catppuccin-latte-subtext0: rgb(108 111 133);
--catppuccin-latte-overlay2: rgb(124 127 147);
--catppuccin-latte-overlay1: rgb(140 143 161);
--catppuccin-latte-overlay0: rgb(156 160 176);
--catppuccin-latte-surface2: rgb(172 176 190);
--catppuccin-latte-surface1: rgb(188 192 204);
--catppuccin-latte-surface0: rgb(204 208 218);
--catppuccin-latte-base: rgb(239 241 245);
--catppuccin-latte-mantle: rgb(230 233 239);
--catppuccin-latte-crust: rgb(220 224 232);
/* Catppuccin Mocha (dark) */
--catppuccin-mocha-rosewater: rgb(245 224 220);
--catppuccin-mocha-flamingo: rgb(242 205 205);
--catppuccin-mocha-pink: rgb(245 194 231);
--catppuccin-mocha-mauve: rgb(203 166 247);
--catppuccin-mocha-red: rgb(243 139 168);
--catppuccin-mocha-maroon: rgb(235 160 172);
--catppuccin-mocha-peach: rgb(250 179 135);
--catppuccin-mocha-yellow: rgb(249 226 175);
--catppuccin-mocha-green: rgb(166 227 161);
--catppuccin-mocha-teal: rgb(148 226 213);
--catppuccin-mocha-sky: rgb(137 220 235);
--catppuccin-mocha-sapphire: rgb(116 199 236);
--catppuccin-mocha-blue: rgb(137 180 250);
--catppuccin-mocha-lavender: rgb(180 190 254);
--catppuccin-mocha-text: rgb(205 214 244);
--catppuccin-mocha-subtext1: rgb(186 194 222);
--catppuccin-mocha-subtext0: rgb(166 173 200);
--catppuccin-mocha-overlay2: rgb(147 153 178);
--catppuccin-mocha-overlay1: rgb(127 132 156);
--catppuccin-mocha-overlay0: rgb(108 112 134);
--catppuccin-mocha-surface2: rgb(88 91 112);
--catppuccin-mocha-surface1: rgb(69 71 90);
--catppuccin-mocha-surface0: rgb(49 50 68);
--catppuccin-mocha-base: rgb(30 30 46);
--catppuccin-mocha-mantle: rgb(24 24 37);
--catppuccin-mocha-crust: rgb(17 17 27);
/* App-shell accent scale -- the strong-color sidebar (Layer 1), its hover, and
* the key-hint chip that sits on it. Light (Latte) = teal (Ridgeline brand);
* dark (Mocha) = mauve (Catppuccin's signature). All derived from the
* Catppuccin palette via color-mix -- no hand-written rgb. black/white are used
* only as shade anchors to darken/lighten, the same pattern the rest of this
* file uses. The key-hint chip is a lighter tint of the sidebar's own hue, so
* the two read as one family. Validated: each fill is in-family, the nav stays
* the most pronounced layer, and every text/glyph pair clears WCAG AA. */
--catppuccin-latte-nav-fill: color-mix(in sRGB, var(--catppuccin-latte-teal) 70%, rgb(0 0 0));
--catppuccin-latte-nav-hover: color-mix(in sRGB, var(--catppuccin-latte-teal) 82%, rgb(0 0 0));
--catppuccin-latte-nav-active: color-mix(in sRGB, var(--catppuccin-latte-teal) 58%, rgb(0 0 0));
--catppuccin-latte-nav-muted: color-mix(in sRGB, var(--catppuccin-latte-teal) 30%, rgb(255 255 255));
--catppuccin-latte-shell-hover: color-mix(in sRGB, var(--catppuccin-latte-teal) 78%, rgb(0 0 0));
--catppuccin-latte-key-fill: color-mix(in sRGB, var(--catppuccin-latte-teal) 45%, rgb(255 255 255));
--catppuccin-latte-key-glyph: color-mix(in sRGB, var(--catppuccin-latte-teal) 45%, rgb(0 0 0));
--catppuccin-mocha-nav-fill: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 22%, var(--catppuccin-mocha-crust));
--catppuccin-mocha-nav-hover: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 34%, var(--catppuccin-mocha-crust));
--catppuccin-mocha-nav-active: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 46%, var(--catppuccin-mocha-crust));
--catppuccin-mocha-nav-muted: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 40%, var(--catppuccin-mocha-subtext0));
--catppuccin-mocha-shell-hover: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 30%, var(--catppuccin-mocha-crust));
--catppuccin-mocha-key-fill: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 55%, var(--catppuccin-mocha-surface2));
--catppuccin-mocha-key-glyph: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 12%, var(--catppuccin-mocha-crust));
}
/* ============================================================================
* Font -- Catppuccin adopts the Mona-led stack from the primitives inventory,
* with the same Mona design declarations and font-width capability as Refresh.
* These are typographic choices, not palette or semantics, so they live in
* their own block on the theme root and inherit into both light and dark.
* ============================================================================ */
/* stylelint-disable-next-line no-duplicate-selectors */
HTML[data-theme='catppuccin'] {
--rl-font-family-sans: var(--rl-font-family-mona);
--rl-font-family-mono: var(--rl-font-family-mona-mono);
/* Mona design declarations -- the same set Refresh applies. */
font-feature-settings: 'ss05' 1, 'ss06' 1;
font-optical-sizing: auto;
font-stretch: var(--rl-mona-width, 100%);
font-variant-numeric: tabular-nums;
/* stylelint-disable-next-line order/properties-alphabetical-order */
-webkit-font-smoothing: antialiased;
}
/* The theme declares which widths it supports. Absent = unsupported. */
HTML[data-theme='catppuccin'][data-font-width='compact'] {
--rl-mona-width: 85%;
}
/* ============================================================================
* Light mode -- Catppuccin Latte semantic overrides
*
* Reading order matches adoption.css.
*
* `max-line-length` is disabled for this file because many of the semantic
* overrides chain a `color-mix(in sRGB, var(--catppuccin-*) NN%, rgb(...))`
* expression that comfortably exceeds 120 characters. Breaking those into
* multiple lines hurts readability more than it helps.
* ============================================================================ */
/* stylelint-disable max-line-length */
/* stylelint-disable-next-line no-duplicate-selectors */
HTML[data-theme='catppuccin'] {
/* Action -- filled interactive elements */
--rl-accent-solid: var(--catppuccin-latte-teal);
--rl-accent-solid-hover: var(--catppuccin-latte-sapphire);
--rl-accent-solid-active: color-mix(in sRGB, var(--catppuccin-latte-teal) 80%, rgb(0 0 0));
--rl-deprecated-accent-solid-active: color-mix(in sRGB, var(--catppuccin-latte-teal) 80%, rgb(0 0 0));
--rl-deprecated-accent-solid-legacy: var(--catppuccin-latte-teal);
--rl-deprecated-accent-solid-legacy-hover: var(--catppuccin-latte-sapphire);
--rl-deprecated-accent-on-solid-legacy: var(--catppuccin-latte-base);
--rl-accent-solid-disabled: color-mix(in sRGB, var(--catppuccin-latte-teal) 35%, var(--catppuccin-latte-base));
--rl-accent-on-solid: var(--catppuccin-latte-base);
--rl-accent-on-solid-disabled: var(--catppuccin-latte-base);
--rl-accent-secondary: var(--catppuccin-latte-sapphire);
--rl-accent-on-secondary: var(--catppuccin-latte-base);
/* Action -- danger */
--rl-danger-solid: var(--catppuccin-latte-red);
--rl-danger-text: var(--catppuccin-latte-red);
--rl-danger-solid-hover: var(--catppuccin-latte-maroon);
--rl-danger-solid-active: color-mix(in sRGB, var(--catppuccin-latte-red) 80%, rgb(0 0 0));
--rl-danger-on-solid: var(--catppuccin-latte-base);
/* Action -- focus */
--rl-focus-ring-emphasis: var(--catppuccin-latte-blue);
/* Surface ladder -- light to deeper */
--rl-neutral-surface-default: var(--catppuccin-latte-base);
--rl-neutral-surface-subtle: var(--catppuccin-latte-mantle);
--rl-neutral-surface-muted: var(--catppuccin-latte-mantle);
/* Page canvas (.main-content): the lowest layer -- the deepest Latte surface
* (Crust), a soft grey negative space; cards (surface = Base, white) raise above it. */
--rl-neutral-surface-page: var(--catppuccin-latte-crust);
--rl-neutral-surface-hover: var(--catppuccin-latte-mantle);
--rl-deprecated-neutral-surface-hover-legacy: var(--catppuccin-latte-mantle);
/* Row/item hover + active. The Latte ramp top is compressed, so crust as the
* hover was barely visible (1.15:1). Shift the pair down the ramp so the hover
* reads (surface1, ~1.6:1, matching the dark hover) and active stays stronger. */
--rl-neutral-surface-active: var(--catppuccin-latte-surface2);
--rl-neutral-surface-disabled: var(--catppuccin-latte-mantle);
--rl-deprecated-neutral-surface-inverse: var(--catppuccin-latte-text);
--rl-neutral-surface-raised: var(--catppuccin-latte-crust);
/* Floating callout (tooltip) surface. Light mode keeps the deep crust -- a light
* box reads on both light pages and the dark nav, and the overlay shadow handles
* same-luminance pages. (Dark mode lifts this; see the Mocha override.) */
--rl-neutral-surface-floating: var(--catppuccin-latte-crust);
/* Loading overlay = the active surface at 85% (whitens content in Latte, darkens it
* in Mocha). Defined once -- surface resolves per scheme at the use site. */
--rl-neutral-surface-highlighted-accent: color-mix(in sRGB, var(--catppuccin-latte-yellow) 18%, var(--catppuccin-latte-base));
--rl-neutral-surface-highlighted: color-mix(in sRGB, var(--catppuccin-latte-sky) 18%, var(--catppuccin-latte-base));
/* Shell tier -- the nav rail / app header.
* IDE convention: shell stays dark even in light mode. We use Latte's
* darkest text tones for the surface so the shell reads as a distinct
* region from the main content. */
--rl-shell-surface-default: var(--catppuccin-latte-nav-fill);
--rl-shell-surface: var(--catppuccin-latte-subtext1);
/* Header: a deep teal, darker than the sidebar so it reads as a recessed,
* "lower" layer. Same family; the bright nav text (on-surface-shell) pops on it. */
--rl-shell-surface-header: color-mix(in sRGB, var(--catppuccin-latte-teal) 40%, rgb(0 0 0));
--rl-shell-border-divider: var(--catppuccin-latte-base);
/* Sidebar loading skeleton (Dark variant) -- teal-family bars on the dark teal
* sidebar, so the loading state matches the shell instead of the legacy spruce. */
--rl-deprecated-skeleton-surface-dark: color-mix(in sRGB, var(--catppuccin-latte-teal) 50%, rgb(255 255 255));
--rl-deprecated-skeleton-surface-dark-shimmer: var(--catppuccin-latte-teal);
--rl-shell-surface-hover: var(--catppuccin-latte-shell-hover);
/* On Surface -- content color on light surfaces */
--rl-neutral-text-default: var(--catppuccin-latte-text);
--rl-neutral-text-default-hover: var(--catppuccin-latte-subtext1);
--rl-neutral-text-subdued: var(--catppuccin-latte-subtext0);
--rl-neutral-text-secondary-hover: var(--catppuccin-latte-subtext1);
--rl-neutral-text-secondary: var(--catppuccin-latte-subtext0);
--rl-neutral-text-strong: var(--catppuccin-latte-subtext1);
--rl-neutral-text-muted: var(--catppuccin-latte-overlay1);
--rl-neutral-text-tertiary: var(--catppuccin-latte-overlay2);
--rl-neutral-text-disabled: var(--catppuccin-latte-overlay0);
--rl-neutral-text-on-inverse: var(--catppuccin-latte-base);
--rl-neutral-text-on-floating: var(--catppuccin-latte-text);
/* On Surface -- content on the shell (light text on dark shell).
*
* Contrast hierarchy against the Latte shell (text #4c4f69, slate):
* - shell: base — max contrast, primary nav labels
* - shell-secondary: surface1 — AppHeader text + icons + breadcrumbs
* - shell-muted: surface1 — intentionally matches -secondary so the
* AppHeader reads as a single tone family
* - *-muted (-2 set): overlay2 — when something *should* feel dimmer
*
* overlay0/overlay1 (the earlier choices) sit too close to the slate shell
* for WCAG AA. surface1 (#bcc0cc) clears 4.5:1 comfortably. */
--rl-shell-text: var(--catppuccin-latte-base);
--rl-deprecated-shell-text-default-hover: var(--catppuccin-latte-nav-hover);
--rl-shell-text-default-active: var(--catppuccin-latte-nav-active);
--rl-shell-icon: var(--catppuccin-latte-nav-muted);
/* Specialized fg */
--rl-neutral-text-subtle: var(--catppuccin-latte-subtext0);
--rl-neutral-text-emphasis: var(--catppuccin-latte-teal);
--rl-info-icon: var(--catppuccin-latte-blue);
--rl-deprecated-categorical-text: var(--catppuccin-latte-mauve);
/* Icon legacy variants */
--rl-deprecated-neutral-text-default-emphasis: var(--catppuccin-latte-teal);
--rl-deprecated-info-icon: var(--catppuccin-latte-blue);
--rl-deprecated-accent-text-on-inverse: var(--catppuccin-latte-teal);
--rl-deprecated-neutral-text-light-teal: var(--catppuccin-latte-sapphire);
--rl-deprecated-neutral-text-dark-blue: var(--catppuccin-latte-blue);
/* Debug sentinel -- pink is hard to miss in a Latte-tinted UI */
--rl-deprecated-neutral-text-wash: var(--catppuccin-latte-pink);
/* Brand -- preserves identity across themes.
* Primary = teal (overlaps Catppuccin teal with Ridgeline mark teal).
* Secondary = lavender for a distinctly Catppuccin touch on the wordmark. */
--rl-brand-primary: var(--catppuccin-latte-teal);
--rl-brand-secondary: var(--catppuccin-latte-lavender);
--rl-brand-mark-highlight: var(--rl-neutral-surface-default);
/* Outline -- borders, dividers, focus rings */
--rl-neutral-border-default: var(--catppuccin-latte-surface1);
--rl-neutral-border-strong: var(--catppuccin-latte-overlay1);
--rl-neutral-border-secondary: var(--catppuccin-latte-surface2);
--rl-deprecated-neutral-border-secondary-legacy: var(--catppuccin-latte-surface2);
--rl-neutral-border-muted: var(--catppuccin-latte-surface2);
--rl-neutral-border-muted-hover: var(--catppuccin-latte-overlay1);
--rl-neutral-border-subtle: var(--catppuccin-latte-surface0);
--rl-neutral-border-divider: var(--catppuccin-latte-mantle);
--rl-neutral-border-wash: var(--catppuccin-latte-mantle);
--rl-focus-ring: var(--catppuccin-latte-blue);
--rl-focus-ring-secondary: var(--catppuccin-latte-teal);
--rl-focus-ring-tertiary: var(--catppuccin-latte-surface2);
--rl-focus-ring-hover: var(--catppuccin-latte-surface1);
--rl-focus-ring-inner: var(--catppuccin-latte-base);
--rl-accent-border: var(--catppuccin-latte-teal);
--rl-accent-border-subtle: color-mix(in sRGB, var(--catppuccin-latte-teal) 35%, var(--catppuccin-latte-base));
--rl-selected-border: color-mix(in sRGB, var(--catppuccin-latte-teal) 25%, var(--catppuccin-latte-base));
--rl-danger-border-strong: var(--catppuccin-latte-red);
/* Status containers -- subtle tints over the base surface */
--rl-danger-surface: color-mix(in sRGB, var(--catppuccin-latte-red) 12%, var(--catppuccin-latte-base));
--rl-danger-surface-active: color-mix(in sRGB, var(--catppuccin-latte-red) 18%, var(--catppuccin-latte-base));
--rl-danger-border: var(--catppuccin-latte-red);
--rl-deprecated-danger-on-container: var(--catppuccin-latte-red);
--rl-success-surface: color-mix(in sRGB, var(--catppuccin-latte-green) 12%, var(--catppuccin-latte-base));
--rl-deprecated-success-container: var(--catppuccin-latte-green);
--rl-success-border: var(--catppuccin-latte-green);
--rl-success-text: var(--catppuccin-latte-green);
--rl-deprecated-success-on-container: color-mix(in sRGB, var(--catppuccin-latte-green) 80%, rgb(0 0 0));
--rl-warning-surface: color-mix(in sRGB, var(--catppuccin-latte-peach) 12%, var(--catppuccin-latte-base));
--rl-deprecated-warning-container: var(--catppuccin-latte-peach);
--rl-warning-line: var(--catppuccin-latte-peach);
--rl-warning-text: var(--catppuccin-latte-peach);
--rl-deprecated-warning-on-container: var(--catppuccin-latte-peach);
--rl-caution-surface: color-mix(in sRGB, var(--catppuccin-latte-yellow) 12%, var(--catppuccin-latte-base));
--rl-caution-border: var(--catppuccin-latte-yellow);
--rl-pending-surface: color-mix(in sRGB, var(--catppuccin-latte-sapphire) 12%, var(--catppuccin-latte-base));
--rl-accent-surface: color-mix(in sRGB, var(--catppuccin-latte-teal) 12%, var(--catppuccin-latte-base));
--rl-accent-indicator: var(--catppuccin-latte-teal);
--rl-accent-text: color-mix(in sRGB, var(--catppuccin-latte-teal) 80%, rgb(0 0 0));
--rl-info-surface: color-mix(in sRGB, var(--catppuccin-latte-blue) 12%, var(--catppuccin-latte-base));
--rl-info-border: var(--catppuccin-latte-blue);
--rl-info-text: color-mix(in sRGB, var(--catppuccin-latte-blue) 80%, rgb(0 0 0));
/* Selected -- checked form controls, progress fills */
--rl-selected-solid: var(--catppuccin-latte-teal);
--rl-selected-solid-hover: var(--catppuccin-latte-sapphire);
--rl-selected-solid-accent: var(--catppuccin-latte-teal);
--rl-selected-solid-accent-hover: var(--catppuccin-latte-sapphire);
--rl-selected-surface: color-mix(in sRGB, var(--catppuccin-latte-teal) 12%, var(--catppuccin-latte-base));
--rl-selected-surface-active: color-mix(in sRGB, var(--catppuccin-latte-teal) 20%, var(--catppuccin-latte-base));
--rl-selected-surface-subtle: color-mix(in sRGB, var(--catppuccin-latte-teal) 12%, var(--catppuccin-latte-base));
--rl-selected-text: color-mix(in sRGB, var(--catppuccin-latte-teal) 80%, rgb(0 0 0));
--rl-selected-solid-disabled: var(--catppuccin-latte-overlay0);
/* AI Assistant additions -- shell-tier variants + control surfaces */
--rl-shell-surface-secondary-hover: var(--catppuccin-latte-subtext0);
--rl-shell-surface-secondary-selected: var(--catppuccin-latte-overlay1);
--rl-shell-surface-selected: var(--catppuccin-latte-teal);
--rl-shell-surface-selected-default: var(--catppuccin-latte-subtext1);
--rl-shell-surface-selected-hover: var(--catppuccin-latte-sapphire);
/* AI Assistant chat history dropdown -- Latte gives it a light popover (dark text on a
light surface); the selected row is a soft teal tint so the primary text stays legible. */
--rl-shell-control: var(--catppuccin-latte-overlay1);
--rl-shell-control-hover: var(--catppuccin-latte-overlay0);
--rl-shell-icon-active: var(--catppuccin-latte-teal);
--rl-shell-icon-default-active: var(--catppuccin-latte-surface1);
--rl-shell-text-secondary-muted: var(--catppuccin-latte-overlay2);
--rl-shell-icon-secondary: var(--catppuccin-latte-surface1);
--rl-neutral-text-disabled-strong: var(--catppuccin-latte-overlay1);
--rl-accent-border-hover: var(--catppuccin-latte-sapphire);
/* Highlight (gold/AI) */
--rl-highlight-solid: var(--catppuccin-latte-yellow);
--rl-highlight-surface: color-mix(in sRGB, var(--catppuccin-latte-yellow) 25%, var(--catppuccin-latte-base));
/* Foreground on the saturated gold coin -- a dark amber, mixed heavily toward black
* (25%, not the 80% the -secondary/-subtle on-colors use: those sit on pale washes,
* but the full coin needs a much darker glyph). Clears 5.6:1 on the Latte coin. */
--rl-highlight-text: color-mix(in sRGB, var(--catppuccin-latte-yellow) 25%, rgb(0 0 0));
--rl-highlight-text-secondary: color-mix(in sRGB, var(--catppuccin-latte-yellow) 80%, rgb(0 0 0));
--rl-highlight-on-solid: color-mix(in sRGB, var(--catppuccin-latte-yellow) 80%, rgb(0 0 0));
--rl-highlight-border: var(--catppuccin-latte-yellow);
--rl-highlight-border-strong: color-mix(in sRGB, var(--catppuccin-latte-yellow) 35%, var(--catppuccin-latte-base));
--rl-highlight-text-muted: color-mix(in sRGB, var(--catppuccin-latte-yellow) 80%, rgb(0 0 0));
--rl-highlight-solid-muted: var(--catppuccin-latte-yellow);
/* Formula -- formula/code highlighting. Mapped to the Latte palette by grammar
* role (keyword = default text, then the blue/teal/green/peach hues that echo
* adoption.css's blue/teal/green/orange). Each reads on the Latte base. */
--rl-formula-keyword: var(--catppuccin-latte-text);
--rl-formula-function: var(--catppuccin-latte-blue);
--rl-formula-column: var(--catppuccin-latte-teal);
--rl-formula-value: var(--catppuccin-latte-green);
--rl-formula-text: var(--catppuccin-latte-peach);
/* Inset -- recessed content panels on light parents */
--rl-inset-surface-emphasis: var(--catppuccin-latte-surface0);
--rl-inset-text-secondary: var(--catppuccin-latte-subtext0);
--rl-inset-text-muted: var(--catppuccin-latte-overlay1);
--rl-inset-border: var(--catppuccin-latte-surface1);
--rl-inset-border-subtle: var(--catppuccin-latte-surface0);
/* Inset -- recessed content panels on shell (dark) parents */
--rl-shell-inset: var(--catppuccin-latte-subtext1);
--rl-shell-on-inset: var(--catppuccin-latte-base);
--rl-shell-on-inset-secondary: var(--catppuccin-latte-surface2);
--rl-shell-on-inset-secondary-hover: var(--catppuccin-latte-base);
--rl-shell-on-inset-muted: var(--catppuccin-latte-overlay1);
--rl-shell-on-inset-muted-hover: var(--catppuccin-latte-base);
--rl-shell-border-inset-subtle: var(--catppuccin-latte-subtext1);
/* Notifications dropdown -- off-palette legacy values, mapped to nearest Latte tones */
--rl-deprecated-notifications-body: var(--catppuccin-latte-subtext0);
--rl-deprecated-notifications-meta: var(--catppuccin-latte-overlay1);
/* Key Hint -- badge surfaces that sit ON other surfaces.
* key-light sits on surface-default (light) -> badge must be slightly darker than base.
* key-dark sits on surface-shell-default (dark slate in Latte) -> badge must be
* visibly LIGHTER than shell, otherwise it disappears into the shell color. */
--rl-key-surface-secondary: var(--catppuccin-latte-surface0);
--rl-key-surface-primary: var(--catppuccin-latte-key-fill);
--rl-key-on-surface-secondary: var(--catppuccin-latte-text);
--rl-key-on-surface-primary: var(--catppuccin-latte-key-glyph);
/* Shadow -- tint with Latte's text color so shadows feel native to the palette */
--rl-shadow-subtle: color-mix(in sRGB, var(--catppuccin-latte-text) 5%, transparent);
--rl-shadow-soft: color-mix(in sRGB, var(--catppuccin-latte-text) 10%, transparent);
--rl-shadow-medium: color-mix(in sRGB, var(--catppuccin-latte-text) 14%, transparent);
--rl-shadow-strong: color-mix(in sRGB, var(--catppuccin-latte-text) 20%, transparent);
--rl-shadow-selected-glow: color-mix(in sRGB, var(--catppuccin-latte-teal) 12%, transparent);
--rl-shadow-flat-subtle: var(--catppuccin-latte-surface0);
--rl-shadow-flat-medium: var(--catppuccin-latte-surface1);
/* tom-pc-ui migration (token targets audit) -- mapped to Latte tones by role */
--rl-deprecated-tom-text-default: var(--catppuccin-latte-text);
--rl-deprecated-tom-surface-dark: var(--catppuccin-latte-nav-fill);
--rl-deprecated-tom-surface-hover: var(--catppuccin-latte-mantle);
--rl-deprecated-tom-focus-ring: var(--catppuccin-latte-blue);
--rl-deprecated-tom-warning-solid: var(--catppuccin-latte-peach);
--rl-deprecated-tom-transparent: transparent;
--rl-deprecated-tom-surface-translucent: color-mix(in sRGB, var(--catppuccin-latte-base) 53.3%, transparent);
--rl-deprecated-tom-border-translucent: color-mix(in sRGB, var(--catppuccin-latte-base) 50%, transparent);
--rl-deprecated-tom-danger-text-strong: var(--catppuccin-latte-red);
--rl-deprecated-tom-surface-scrim: color-mix(in sRGB, var(--catppuccin-latte-base) 90%, transparent);
--rl-deprecated-tom-danger-surface-subtle: color-mix(in sRGB, var(--catppuccin-latte-red) 8%, transparent);
--rl-deprecated-tom-danger-surface-strong: color-mix(in sRGB, var(--catppuccin-latte-red) 25%, transparent);
/* Legacy chart values */
--rl-deprecated-neutral-text-default: var(--catppuccin-latte-text);
--rl-deprecated-neutral-text-chart-line: var(--catppuccin-latte-overlay2);
--rl-deprecated-shadow-tooltip: var(--catppuccin-latte-overlay2);
/* Chart palette -- categorical (5 stops, multi-hue) */
--rl-chart-categorical-1: var(--catppuccin-latte-blue);
--rl-chart-categorical-2: var(--catppuccin-latte-teal);
--rl-chart-categorical-3: var(--catppuccin-latte-mauve);
--rl-chart-categorical-4: var(--catppuccin-latte-peach);
--rl-chart-categorical-5: var(--catppuccin-latte-green);
/* Chart palette -- negative (red scale dark to light, derived) */
--rl-chart-negative-1: color-mix(in sRGB, var(--catppuccin-latte-red) 100%, rgb(0 0 0) 35%);
--rl-chart-negative-2: var(--catppuccin-latte-red);
--rl-chart-negative-3: var(--catppuccin-latte-maroon);
--rl-chart-negative-4: var(--catppuccin-latte-flamingo);
--rl-chart-negative-5: color-mix(in sRGB, var(--catppuccin-latte-flamingo) 30%, var(--catppuccin-latte-base));
/* Chart palette -- positive (green scale dark to light, derived) */
--rl-chart-positive-1: color-mix(in sRGB, var(--catppuccin-latte-green) 100%, rgb(0 0 0) 35%);
--rl-chart-positive-2: color-mix(in sRGB, var(--catppuccin-latte-green) 100%, rgb(0 0 0) 15%);
--rl-chart-positive-3: var(--catppuccin-latte-green);
--rl-chart-positive-4: color-mix(in sRGB, var(--catppuccin-latte-green) 55%, var(--catppuccin-latte-base));
--rl-chart-positive-5: color-mix(in sRGB, var(--catppuccin-latte-green) 25%, var(--catppuccin-latte-base));
/* Chart palette -- extended (12 stops, the full Catppuccin accent spread) */
--rl-chart-extended-1: var(--catppuccin-latte-blue);
--rl-chart-extended-2: var(--catppuccin-latte-sky);
--rl-chart-extended-3: var(--catppuccin-latte-sapphire);
--rl-chart-extended-4: var(--catppuccin-latte-teal);
--rl-chart-extended-5: var(--catppuccin-latte-green);
--rl-chart-extended-6: var(--catppuccin-latte-yellow);
--rl-chart-extended-7: var(--catppuccin-latte-peach);
--rl-chart-extended-8: var(--catppuccin-latte-maroon);
--rl-chart-extended-9: var(--catppuccin-latte-pink);
--rl-chart-extended-10: var(--catppuccin-latte-mauve);
--rl-chart-extended-11: var(--catppuccin-latte-lavender);
--rl-chart-extended-12: var(--catppuccin-latte-flamingo);
/* Chart palette -- status (5 intent groups x 2 shades) */
--rl-chart-status-1: var(--catppuccin-latte-green);
--rl-chart-status-2: color-mix(in sRGB, var(--catppuccin-latte-green) 40%, var(--catppuccin-latte-base));
--rl-chart-status-3: var(--catppuccin-latte-peach);
--rl-chart-status-4: color-mix(in sRGB, var(--catppuccin-latte-peach) 40%, var(--catppuccin-latte-base));
--rl-chart-status-5: var(--catppuccin-latte-overlay1);
--rl-chart-status-6: var(--catppuccin-latte-surface1);
--rl-chart-status-7: var(--catppuccin-latte-sky);
--rl-chart-status-8: color-mix(in sRGB, var(--catppuccin-latte-sky) 35%, var(--catppuccin-latte-base));
--rl-chart-status-9: var(--catppuccin-latte-red);
--rl-chart-status-10: var(--catppuccin-latte-flamingo);
/* --------------------------------------------------------------------------
* Tier-3 theme exceptions: bespoke values this theme opts into, beyond the
* semantic contract. Defined once here (both schemes) -- the inner token
* references resolve per scheme at the use site, so Mocha needs no override.
* -------------------------------------------------------------------------- */
/* Overlay elevation: lifts a floating layer (e.g. a tooltip) off Catppuccin's
* clustered surfaces, where a flat overlay blends in. The tight halo carries
* dark mode (a light edge on the dark page); the soft shadow carries light mode. */
--rl-elevation-overlay:
drop-shadow(0 0 1px var(--rl-neutral-border-default))
drop-shadow(0 2px 6px var(--rl-shadow-strong));
/* Chat accent surfaces: the assistant chat opts into a vibrant, multi-hue look
* under Catppuccin. Absent these, the chat falls back to neutral surfaces. */
--rl-chat-user-surface: var(--rl-info-surface);
--rl-chat-cot-surface: var(--rl-neutral-surface-highlighted);
}
/* ============================================================================
* Dark mode -- Catppuccin Mocha semantic overrides
* ============================================================================ */
HTML[data-theme='catppuccin'][data-color-scheme='dark'] {
/* Action -- filled interactive elements */
--rl-accent-solid: var(--catppuccin-mocha-teal);
--rl-accent-solid-hover: var(--catppuccin-mocha-sapphire);
--rl-accent-solid-active: color-mix(in sRGB, var(--catppuccin-mocha-teal) 75%, rgb(255 255 255));
--rl-deprecated-accent-solid-active: color-mix(in sRGB, var(--catppuccin-mocha-teal) 75%, rgb(255 255 255));
--rl-deprecated-accent-solid-legacy: var(--catppuccin-mocha-teal);
--rl-deprecated-accent-solid-legacy-hover: var(--catppuccin-mocha-sapphire);
--rl-deprecated-accent-on-solid-legacy: var(--catppuccin-mocha-crust);
--rl-accent-solid-disabled: color-mix(in sRGB, var(--catppuccin-mocha-teal) 35%, var(--catppuccin-mocha-base));
--rl-accent-on-solid: var(--catppuccin-mocha-crust);
--rl-accent-on-solid-disabled: var(--catppuccin-mocha-crust);
--rl-accent-secondary: var(--catppuccin-mocha-sapphire);
--rl-accent-on-secondary: var(--catppuccin-mocha-crust);
/* Action -- danger */
--rl-danger-solid: var(--catppuccin-mocha-red);
--rl-danger-text: var(--catppuccin-mocha-red);
--rl-danger-solid-hover: var(--catppuccin-mocha-maroon);
--rl-danger-solid-active: color-mix(in sRGB, var(--catppuccin-mocha-red) 80%, rgb(255 255 255));
--rl-danger-on-solid: var(--catppuccin-mocha-crust);
/* Action -- focus */
--rl-focus-ring-emphasis: var(--catppuccin-mocha-blue);
/* Surface ladder -- deeper to lighter */
--rl-neutral-surface-default: var(--catppuccin-mocha-base);
--rl-neutral-surface-subtle: var(--catppuccin-mocha-mantle);
--rl-neutral-surface-muted: var(--catppuccin-mocha-surface0);
/* Page canvas (.main-content): the lowest layer -- the deepest Mocha surface
* (Crust), a near-black negative space; cards (surface = Base) raise above it.
* Fixes the old inversion where the canvas sat lighter than the cards. */
--rl-neutral-surface-page: var(--catppuccin-mocha-crust);
--rl-neutral-surface-hover: var(--catppuccin-mocha-surface0);
--rl-deprecated-neutral-surface-hover-legacy: var(--catppuccin-mocha-surface0);
--rl-neutral-surface-active: var(--catppuccin-mocha-surface2);
--rl-neutral-surface-disabled: var(--catppuccin-mocha-surface0);
--rl-deprecated-neutral-surface-inverse: var(--catppuccin-mocha-text);
--rl-neutral-surface-raised: var(--catppuccin-mocha-crust);
/* Floating callout (tooltip) surface. surface-raised resolves to crust here -- the
* darkest surface -- so a flat tooltip is near-black on the dark mauve shell. Lift it
* to surface2, a properly elevated tone that reads against every dark background; the
* light on-surface-floating text clears 4.5:1 on it. */
--rl-neutral-surface-floating: var(--catppuccin-mocha-surface2);
--rl-neutral-surface-highlighted-accent: color-mix(in sRGB, var(--catppuccin-mocha-yellow) 18%, var(--catppuccin-mocha-base));
--rl-neutral-surface-highlighted: color-mix(in sRGB, var(--catppuccin-mocha-sapphire) 18%, var(--catppuccin-mocha-base));
/* Shell tier */
--rl-shell-surface-default: var(--catppuccin-mocha-nav-fill);
--rl-shell-surface: var(--catppuccin-mocha-mantle);
/* Header: a deep mauve, darker than the sidebar so it recedes below it. The
* dark Mocha range is tight (the sidebar is already near the floor), so the
* "lower" feel comes from depth more than a big luminance gap; bright nav text pops. */
--rl-shell-surface-header: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 12%, var(--catppuccin-mocha-crust));
--rl-shell-border-divider: var(--catppuccin-mocha-text);
/* Sidebar loading skeleton (Dark variant) -- mauve-family bars on the mauve
* sidebar, so the loading state matches the shell instead of the legacy spruce. */
--rl-deprecated-skeleton-surface-dark: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 36%, var(--catppuccin-mocha-crust));
--rl-deprecated-skeleton-surface-dark-shimmer: color-mix(in sRGB, var(--catppuccin-mocha-mauve) 68%, var(--catppuccin-mocha-crust));
--rl-shell-surface-hover: var(--catppuccin-mocha-shell-hover);
/* On Surface */
--rl-neutral-text-default: var(--catppuccin-mocha-text);
--rl-neutral-text-default-hover: var(--catppuccin-mocha-subtext1);
--rl-neutral-text-subdued: var(--catppuccin-mocha-subtext0);
--rl-neutral-text-secondary-hover: var(--catppuccin-mocha-subtext1);
--rl-neutral-text-secondary: var(--catppuccin-mocha-subtext0);
--rl-neutral-text-strong: var(--catppuccin-mocha-subtext1);
--rl-neutral-text-muted: var(--catppuccin-mocha-overlay1);
--rl-neutral-text-tertiary: var(--catppuccin-mocha-overlay2);
--rl-neutral-text-disabled: var(--catppuccin-mocha-overlay0);
--rl-neutral-text-on-inverse: var(--catppuccin-mocha-base);
--rl-neutral-text-on-floating: var(--catppuccin-mocha-text);
/* On Surface -- shell. Same approach as Latte: lift secondary/muted/icon to a
* single shared brighter tone so the AppHeader reads as one consistent
* surface and clears WCAG AA against the deep shell. */
--rl-shell-text: var(--catppuccin-mocha-text);
--rl-deprecated-shell-text-default-hover: var(--catppuccin-mocha-nav-hover);
--rl-shell-text-default-active: var(--catppuccin-mocha-nav-active);
--rl-shell-icon: var(--catppuccin-mocha-nav-muted);
/* Specialized fg */
--rl-neutral-text-subtle: var(--catppuccin-mocha-subtext0);
--rl-neutral-text-emphasis: var(--catppuccin-mocha-teal);
--rl-info-icon: var(--catppuccin-mocha-blue);
--rl-deprecated-categorical-text: var(--catppuccin-mocha-mauve);
/* Icon legacy variants */
--rl-deprecated-neutral-text-default-emphasis: var(--catppuccin-mocha-teal);
--rl-deprecated-info-icon: var(--catppuccin-mocha-blue);
--rl-deprecated-accent-text-on-inverse: var(--catppuccin-mocha-teal);
--rl-deprecated-neutral-text-light-teal: var(--catppuccin-mocha-sapphire);
--rl-deprecated-neutral-text-dark-blue: var(--catppuccin-mocha-blue);
/* Debug sentinel */
--rl-deprecated-neutral-text-wash: var(--catppuccin-mocha-pink);
/* Brand */
--rl-brand-primary: var(--catppuccin-mocha-teal);
--rl-brand-secondary: var(--catppuccin-mocha-lavender);
--rl-brand-mark-highlight: var(--rl-neutral-surface-default);
/* Outline */
--rl-neutral-border-default: var(--catppuccin-mocha-surface1);
--rl-neutral-border-strong: var(--catppuccin-mocha-overlay1);
--rl-neutral-border-secondary: var(--catppuccin-mocha-surface2);
--rl-deprecated-neutral-border-secondary-legacy: var(--catppuccin-mocha-surface2);
--rl-neutral-border-muted: var(--catppuccin-mocha-surface2);
--rl-neutral-border-muted-hover: var(--catppuccin-mocha-overlay1);
--rl-neutral-border-subtle: var(--catppuccin-mocha-surface0);
--rl-neutral-border-divider: var(--catppuccin-mocha-mantle);
--rl-neutral-border-wash: var(--catppuccin-mocha-mantle);
--rl-focus-ring: var(--catppuccin-mocha-blue);
--rl-focus-ring-secondary: var(--catppuccin-mocha-teal);
--rl-focus-ring-tertiary: var(--catppuccin-mocha-surface2);
--rl-focus-ring-hover: var(--catppuccin-mocha-surface1);
--rl-focus-ring-inner: var(--catppuccin-mocha-base);
--rl-accent-border: var(--catppuccin-mocha-teal);
--rl-accent-border-subtle: color-mix(in sRGB, var(--catppuccin-mocha-teal) 35%, var(--catppuccin-mocha-base));
--rl-selected-border: color-mix(in sRGB, var(--catppuccin-mocha-teal) 25%, var(--catppuccin-mocha-base));
--rl-danger-border-strong: var(--catppuccin-mocha-red);
/* Status containers */
--rl-danger-surface: color-mix(in sRGB, var(--catppuccin-mocha-red) 18%, var(--catppuccin-mocha-base));
--rl-danger-surface-active: color-mix(in sRGB, var(--catppuccin-mocha-red) 25%, var(--catppuccin-mocha-base));
--rl-danger-border: var(--catppuccin-mocha-red);
--rl-deprecated-danger-on-container: var(--catppuccin-mocha-red);
--rl-success-surface: color-mix(in sRGB, var(--catppuccin-mocha-green) 18%, var(--catppuccin-mocha-base));
--rl-deprecated-success-container: var(--catppuccin-mocha-green);
--rl-success-border: var(--catppuccin-mocha-green);
--rl-success-text: var(--catppuccin-mocha-green);
--rl-deprecated-success-on-container: color-mix(in sRGB, var(--catppuccin-mocha-green) 80%, rgb(255 255 255));
--rl-warning-surface: color-mix(in sRGB, var(--catppuccin-mocha-peach) 18%, var(--catppuccin-mocha-base));
--rl-deprecated-warning-container: var(--catppuccin-mocha-peach);
--rl-warning-line: var(--catppuccin-mocha-peach);
--rl-warning-text: var(--catppuccin-mocha-peach);
--rl-deprecated-warning-on-container: var(--catppuccin-mocha-peach);
--rl-caution-surface: color-mix(in sRGB, var(--catppuccin-mocha-yellow) 18%, var(--catppuccin-mocha-base));
--rl-caution-border: var(--catppuccin-mocha-yellow);
--rl-pending-surface: color-mix(in sRGB, var(--catppuccin-mocha-sapphire) 18%, var(--catppuccin-mocha-base));
--rl-accent-surface: color-mix(in sRGB, var(--catppuccin-mocha-teal) 18%, var(--catppuccin-mocha-base));
--rl-accent-indicator: var(--catppuccin-mocha-teal);
--rl-accent-text: color-mix(in sRGB, var(--catppuccin-mocha-teal) 80%, rgb(255 255 255));
--rl-info-surface: color-mix(in sRGB, var(--catppuccin-mocha-blue) 18%, var(--catppuccin-mocha-base));
--rl-info-border: var(--catppuccin-mocha-blue);
--rl-info-text: color-mix(in sRGB, var(--catppuccin-mocha-blue) 80%, rgb(255 255 255));
/* Selected */
--rl-selected-solid: var(--catppuccin-mocha-teal);
--rl-selected-solid-hover: var(--catppuccin-mocha-sapphire);
--rl-selected-solid-accent: var(--catppuccin-mocha-teal);
--rl-selected-solid-accent-hover: var(--catppuccin-mocha-sapphire);
--rl-selected-surface: color-mix(in sRGB, var(--catppuccin-mocha-teal) 18%, var(--catppuccin-mocha-base));
--rl-selected-surface-active: color-mix(in sRGB, var(--catppuccin-mocha-teal) 25%, var(--catppuccin-mocha-base));
--rl-selected-surface-subtle: color-mix(in sRGB, var(--catppuccin-mocha-teal) 25%, var(--catppuccin-mocha-base));
--rl-selected-text: var(--catppuccin-mocha-teal);
--rl-selected-solid-disabled: var(--catppuccin-mocha-overlay0);
/* AI Assistant additions */
--rl-shell-surface-secondary-hover: var(--catppuccin-mocha-surface1);
--rl-shell-surface-secondary-selected: var(--catppuccin-mocha-surface2);
--rl-shell-surface-selected: var(--catppuccin-mocha-teal);
--rl-shell-surface-selected-default: var(--catppuccin-mocha-teal);
--rl-shell-surface-selected-hover: var(--catppuccin-mocha-sapphire);
/* AI Assistant chat history dropdown -- Mocha keeps it a dark popover (light text on a
dark surface); the selected row is a soft teal tint so the primary text stays legible. */
--rl-shell-control: var(--catppuccin-mocha-surface2);
--rl-shell-control-hover: var(--catppuccin-mocha-overlay0);
--rl-shell-icon-active: var(--catppuccin-mocha-teal);
--rl-shell-icon-default-active: var(--catppuccin-mocha-nav-active);
--rl-shell-text-secondary-muted: var(--catppuccin-mocha-overlay2);
--rl-shell-icon-secondary: var(--catppuccin-mocha-subtext0);
--rl-neutral-text-disabled-strong: var(--catppuccin-mocha-overlay1);
--rl-accent-border-hover: var(--catppuccin-mocha-sapphire);
/* Highlight (gold/AI) */
--rl-highlight-solid: var(--catppuccin-mocha-yellow);
/* Gold hover step -- a lighter dark gold than -subtle. Mixed toward black (not
* the blue base) to stay gold rather than washing out to grey. */
--rl-highlight-surface: color-mix(in sRGB, var(--catppuccin-mocha-yellow) 44%, rgb(0 0 0));
/* Mix toward black, not the blue-tinted Mocha base -- mixing the pale Mocha
* yellow into base washes the gold out to a cold grey. Black keeps it a warm
* dark gold so highlight surfaces (e.g. the AI workstreams button) read as gold. */
/* Foreground on the saturated gold coin. Mix the pale Mocha yellow heavily toward
* black (25%) for a dark glyph -- deliberately the opposite of the -secondary/-subtle
* on-colors below, which stay light yellow for dark washes. The saturated coin needs a
* dark glyph in dark mode too. Clears 9:1 on the Mocha coin. See adoption.css. */
--rl-highlight-text: color-mix(in sRGB, var(--catppuccin-mocha-yellow) 25%, rgb(0 0 0));
--rl-highlight-text-secondary: var(--catppuccin-mocha-yellow);
--rl-highlight-on-solid: var(--catppuccin-mocha-yellow);
--rl-highlight-border: var(--catppuccin-mocha-yellow);
--rl-highlight-border-strong: color-mix(in sRGB, var(--catppuccin-mocha-yellow) 35%, var(--catppuccin-mocha-base));
--rl-highlight-text-muted: var(--catppuccin-mocha-yellow);
--rl-highlight-solid-muted: var(--catppuccin-mocha-yellow);
/* Palest gold surface -- the AI workstreams ("Market Digest") pill. The :root default
* (gold-10) is a fixed light primitive, so in dark mode it leaves the pill light-on-light:
* the label is --rl-neutral-text-default, which inverts to a light color here. This dark,
* low-saturation gold keeps the pill in-theme and lets the light label read. Mixed toward
* black (not the blue Mocha base) to stay warm gold, and subtler/darker than
* --rl-highlight-surface above, per the -subtle < -surface ordering. */
--rl-highlight-surface-subtle: color-mix(in sRGB, var(--catppuccin-mocha-yellow) 22%, rgb(0 0 0));
--rl-highlight-surface-muted: color-mix(in sRGB, var(--catppuccin-mocha-yellow) 22%, rgb(0 0 0));
/* Formula -- formula/code highlighting. Same role mapping as Latte, on the
* brighter Mocha tones. keyword = mocha text (a light slate) so it stays
* visible on the dark base, unlike the adoption.css black default. */
--rl-formula-keyword: var(--catppuccin-mocha-text);
--rl-formula-function: var(--catppuccin-mocha-blue);
--rl-formula-column: var(--catppuccin-mocha-teal);
--rl-formula-value: var(--catppuccin-mocha-green);
--rl-formula-text: var(--catppuccin-mocha-peach);
/* Inset -- on default parent */
--rl-inset-surface-emphasis: var(--catppuccin-mocha-surface1);
--rl-inset-text-secondary: var(--catppuccin-mocha-subtext0);
--rl-inset-text-muted: var(--catppuccin-mocha-overlay1);
--rl-inset-border: var(--catppuccin-mocha-surface1);
--rl-inset-border-subtle: var(--catppuccin-mocha-surface0);
/* Inset -- on shell parent */
--rl-shell-inset: var(--catppuccin-mocha-mantle);
--rl-shell-on-inset: var(--catppuccin-mocha-text);
--rl-shell-on-inset-secondary: var(--catppuccin-mocha-overlay2);
--rl-shell-on-inset-secondary-hover: var(--catppuccin-mocha-text);
--rl-shell-on-inset-muted: var(--catppuccin-mocha-overlay1);
--rl-shell-on-inset-muted-hover: var(--catppuccin-mocha-text);
--rl-shell-border-inset-subtle: var(--catppuccin-mocha-mantle);
/* Notifications dropdown */
--rl-deprecated-notifications-body: var(--catppuccin-mocha-subtext0);
--rl-deprecated-notifications-meta: var(--catppuccin-mocha-overlay1);
/* Key Hint -- badge surfaces that sit ON other surfaces.
* Mocha shell is `crust` (deepest), so the dark badge needs to be at least
* one full step up to register as a distinct surface. `surface1` gives
* clean contrast without competing with the shell. */
--rl-key-surface-secondary: var(--catppuccin-mocha-surface1);
--rl-key-surface-primary: var(--catppuccin-mocha-key-fill);
--rl-key-on-surface-secondary: var(--catppuccin-mocha-text);
--rl-key-on-surface-primary: var(--catppuccin-mocha-key-glyph);
/* Shadow -- darker base for dark mode */
--rl-shadow-subtle: rgb(0 0 0 / 25%);
--rl-shadow-soft: rgb(0 0 0 / 35%);
--rl-shadow-medium: rgb(0 0 0 / 45%);
--rl-shadow-strong: rgb(0 0 0 / 60%);
--rl-shadow-selected-glow: color-mix(in sRGB, var(--catppuccin-mocha-teal) 18%, transparent);
--rl-shadow-flat-subtle: var(--catppuccin-mocha-surface0);
--rl-shadow-flat-medium: var(--catppuccin-mocha-surface1);
/* tom-pc-ui migration (token targets audit) -- mapped to Mocha tones by role */
--rl-deprecated-tom-text-default: var(--catppuccin-mocha-text);
--rl-deprecated-tom-surface-dark: var(--catppuccin-mocha-crust);
--rl-deprecated-tom-surface-hover: var(--catppuccin-mocha-surface0);
--rl-deprecated-tom-focus-ring: var(--catppuccin-mocha-blue);
--rl-deprecated-tom-warning-solid: var(--catppuccin-mocha-peach);
--rl-deprecated-tom-transparent: transparent;
--rl-deprecated-tom-surface-translucent: color-mix(in sRGB, var(--catppuccin-mocha-crust) 53.3%, transparent);
--rl-deprecated-tom-border-translucent: color-mix(in sRGB, var(--catppuccin-mocha-crust) 50%, transparent);
--rl-deprecated-tom-danger-text-strong: var(--catppuccin-mocha-red);
--rl-deprecated-tom-surface-scrim: color-mix(in sRGB, var(--catppuccin-mocha-crust) 90%, transparent);
--rl-deprecated-tom-danger-surface-subtle: color-mix(in sRGB, var(--catppuccin-mocha-red) 8%, transparent);
--rl-deprecated-tom-danger-surface-strong: color-mix(in sRGB, var(--catppuccin-mocha-red) 25%, transparent);
/* Legacy chart values */
--rl-deprecated-neutral-text-default: var(--catppuccin-mocha-text);
--rl-deprecated-neutral-text-chart-line: var(--catppuccin-mocha-overlay1);
--rl-deprecated-shadow-tooltip: var(--catppuccin-mocha-overlay1);
/* dataGrid27 overlay-alpha family -- adoption.css's dark-teal/white fallbacks are
* invisible on the Mocha surface, so re-derive them from the brand teal
* and Base at the same alpha steps the surfaces variant uses. */
--rl-deprecated-neutral-border-overlay-soft-alpha: color-mix(in sRGB, var(--catppuccin-mocha-teal) 70%, transparent); /* drop/filter border */
--rl-deprecated-neutral-text-overlay-soft-alpha: color-mix(in sRGB, var(--catppuccin-mocha-teal) 25%, transparent); /* drop-zone hint text */
--rl-deprecated-shadow-overlay-subtle-alpha: color-mix(in sRGB, var(--catppuccin-mocha-teal) 10%, transparent); /* side-bar/popover drop shadow */
--rl-deprecated-neutral-surface-overlay-faint-alpha: color-mix(in sRGB, var(--catppuccin-mocha-teal) 5%, transparent); /* highlighted/group row wash */
--rl-deprecated-neutral-surface-loading-overlay: color-mix(in sRGB, var(--catppuccin-mocha-base) 85%, transparent); /* loading veil over grid */
--rl-deprecated-neutral-surface-scrim: color-mix(in sRGB, var(--catppuccin-mocha-base) 70%, transparent); /* overlay scrim */
/* Chart palette -- categorical */
--rl-chart-categorical-1: var(--catppuccin-mocha-blue);
--rl-chart-categorical-2: var(--catppuccin-mocha-teal);
--rl-chart-categorical-3: var(--catppuccin-mocha-mauve);
--rl-chart-categorical-4: var(--catppuccin-mocha-peach);
--rl-chart-categorical-5: var(--catppuccin-mocha-green);
/* Chart palette -- negative */
--rl-chart-negative-1: var(--catppuccin-mocha-red);
--rl-chart-negative-2: var(--catppuccin-mocha-maroon);
--rl-chart-negative-3: var(--catppuccin-mocha-flamingo);
--rl-chart-negative-4: color-mix(in sRGB, var(--catppuccin-mocha-flamingo) 60%, var(--catppuccin-mocha-base));
--rl-chart-negative-5: color-mix(in sRGB, var(--catppuccin-mocha-flamingo) 30%, var(--catppuccin-mocha-base));
/* Chart palette -- positive */
--rl-chart-positive-1: color-mix(in sRGB, var(--catppuccin-mocha-green) 100%, rgb(255 255 255) 20%);
--rl-chart-positive-2: var(--catppuccin-mocha-green);
--rl-chart-positive-3: color-mix(in sRGB, var(--catppuccin-mocha-green) 75%, var(--catppuccin-mocha-base));
--rl-chart-positive-4: color-mix(in sRGB, var(--catppuccin-mocha-green) 50%, var(--catppuccin-mocha-base));
--rl-chart-positive-5: color-mix(in sRGB, var(--catppuccin-mocha-green) 25%, var(--catppuccin-mocha-base));
/* Chart palette -- extended */
--rl-chart-extended-1: var(--catppuccin-mocha-blue);
--rl-chart-extended-2: var(--catppuccin-mocha-sky);
--rl-chart-extended-3: var(--catppuccin-mocha-sapphire);
--rl-chart-extended-4: var(--catppuccin-mocha-teal);
--rl-chart-extended-5: var(--catppuccin-mocha-green);
--rl-chart-extended-6: var(--catppuccin-mocha-yellow);
--rl-chart-extended-7: var(--catppuccin-mocha-peach);
--rl-chart-extended-8: var(--catppuccin-mocha-maroon);
--rl-chart-extended-9: var(--catppuccin-mocha-pink);
--rl-chart-extended-10: var(--catppuccin-mocha-mauve);
--rl-chart-extended-11: var(--catppuccin-mocha-lavender);
--rl-chart-extended-12: var(--catppuccin-mocha-flamingo);
/* Chart palette -- status */
--rl-chart-status-1: var(--catppuccin-mocha-green);
--rl-chart-status-2: color-mix(in sRGB, var(--catppuccin-mocha-green) 50%, var(--catppuccin-mocha-base));
--rl-chart-status-3: var(--catppuccin-mocha-peach);
--rl-chart-status-4: color-mix(in sRGB, var(--catppuccin-mocha-peach) 50%, var(--catppuccin-mocha-base));
--rl-chart-status-5: var(--catppuccin-mocha-overlay1);
--rl-chart-status-6: var(--catppuccin-mocha-surface1);
--rl-chart-status-7: var(--catppuccin-mocha-sapphire);
--rl-chart-status-8: color-mix(in sRGB, var(--catppuccin-mocha-sapphire) 45%, var(--catppuccin-mocha-base));
--rl-chart-status-9: var(--catppuccin-mocha-red);
--rl-chart-status-10: var(--catppuccin-mocha-flamingo);
}
/* ============================================================================
* Tier 3 -- Targeted element overrides
*
* High-specificity rules that paint specific elements when the semantic layer
* doesn't expose the knob. Each rule:
* - is scoped under the theme selector (won't leak to other themes)
* - documents WHICH consumer it targets and WHY a tier-2 fix isn't possible
* - prefers presentation-attribute selectors (no !important) when possible
*
* Long-term fix for every entry below: migrate the consumer to read a semantic
* token instead of writing primitives inline. When that lands, the matching
* rule here can be removed.
* ============================================================================ */
/* `!important` is required throughout tier 3 to outrank inline `style` attributes
* set by React on chart primitives, and to win specificity battles against
* react-datepicker's stock CSS. Each use is paired with a comment explaining
* the consumer and the long-term fix. */
/* stylelint-disable declaration-no-important */
/* ----------------------------------------------------------------------------
* libraries/sapling/charts/LineChart: the chart tooltip group renders four
* shapes via inline `style="fill: var(--rl-primitive-*)"` written by React.
* Inline styles outrank CSS without !important, so we use !important here.
*
* Tooltip group structure:
*
* <- vertical guide bar, primitive-gray-15 @ 0.4
* <- ring dot, no fill set
* <- arrow, primitive-black
* <- label background, primitive-black
* <- label text, primitive-white (presentation attr)
*
* ----------------------------------------------------------------------------- */
HTML[data-theme='catppuccin'] [data-id='tooltip-bar'] {
fill: var(--catppuccin-latte-surface1) !important;
}
HTML[data-theme='catppuccin'][data-color-scheme='dark'] [data-id='tooltip-bar'] {
fill: var(--catppuccin-mocha-surface2) !important;
}
/* The unnamed arrow and the second (the label bg) both use
* primitive-black via inline style. Selecting via parent + child element name
* keeps this scoped to this specific tooltip and avoids targeting the bar.
*
* `polygon` is in the SVG namespace and must stay lowercase to match the actual
* DOM. The stylelint `selector-type-case` rule wants uppercase here and the
* `ignoreTypes` config for that rule does not include `polygon`. Disabling
* inline rather than expanding the shared stylelint config keeps this PR scoped
* to catppuccin; widening the config is a separate follow-up. */
/* stylelint-disable-next-line selector-type-case */
HTML[data-theme='catppuccin'] [data-id='tooltip'] > polygon,
HTML[data-theme='catppuccin'] [data-id='tooltip'] > rect:not([data-id='tooltip-bar']) {
fill: var(--catppuccin-latte-text) !important;
}
/* stylelint-disable-next-line selector-type-case */
HTML[data-theme='catppuccin'][data-color-scheme='dark'] [data-id='tooltip'] > polygon,
HTML[data-theme='catppuccin'][data-color-scheme='dark'] [data-id='tooltip'] > rect:not([data-id='tooltip-bar']) {
fill: var(--catppuccin-mocha-text) !important;
}
/* The uses fill="..." as a presentation
* attribute (not inline style), so regular CSS specificity wins -- no
* !important needed. */
HTML[data-theme='catppuccin'] [data-id='tooltip-text'] {
fill: var(--catppuccin-latte-base);
}
HTML[data-theme='catppuccin'][data-color-scheme='dark'] [data-id='tooltip-text'] {
fill: var(--catppuccin-mocha-crust);
}
/* ----------------------------------------------------------------------------
* react-datepicker -- imported from node_modules at
* libraries/sapling/scss/react-datepicker.scss line 8. The library's stock CSS
* sets `.react-datepicker__day { color: #000 }` and
* `.react-datepicker__day--selected { color: #fff }` as hardcoded literals.
* Our wrapper sets text color on the parent `.popper-calendar` (which would
* normally cascade) but the library's per-day color rule overrides it via
* equal-specificity-later-in-cascade. We never set color on the day cells
* themselves, so the literals leak through.
*
* In dark mode this produces:
* - resting day: #000 on mocha-base (dark on dark)
* - selected day: #fff on mocha-teal (pastel teal -- light on light)
*
* Tier 3 fix: theme-scoped color rules with higher specificity than the
* library's single-class selectors. Long-term fix is to add `color:
* var(--rl-neutral-text-default)` to `.react-datepicker__day` in the
* wrapper SCSS so every theme inherits it for free.
* ----------------------------------------------------------------------------- */
HTML[data-theme='catppuccin'] .react-datepicker__day {
color: var(--rl-neutral-text-default);
}
/* Selected day sits on action-primary, so foreground must be on-action-primary. */
HTML[data-theme='catppuccin'] .react-datepicker__day--selected {
color: var(--rl-accent-on-solid);
}
/* ----------------------------------------------------------------------------
* DateRangePickerFilter popover -- month grid min-height.
*
* The react-datepicker month container reserves vertical space for 6 weeks even
* when the current month only has 4-5 visible. In the DateRangePickerFilter
* popover that produces a tall blank row at the bottom. Setting min-height: auto
* collapses the container to its actual content height.
*
* Long-term fix: figure out which rule (library or wrapper) is reserving the
* min-height and either remove it or scope it to the inline calendar only.
* ----------------------------------------------------------------------------- */
HTML[data-theme='catppuccin'] .date-range-picker-filter.popover.component.content .react-datepicker__month {
min-height: auto !important;
}
/**
* Red Debug Theme
*
* Sets every surface token, text token, and primitive to red. Anything that
* does not turn red is either hardcoded or bypassing the token system entirely.
* This is the most aggressive of the three red debug themes.
*
* Light mode: bright red (rgb(255 0 0))
* Dark mode: dark red (rgb(139 0 0)) -- add data-color-scheme="dark"
*
* Activate via: window.rlTheme.setTheme('red')
*
* See also:
* red-surfaces -- semantic surface tokens only (readable)
* red-primitives -- primitive overrides only (cascades through semantic layer)
*/
/* Light mode */
HTML[data-theme='red'] {
/* Surface */
--rl-neutral-surface-default: rgb(255 0 0);
--rl-neutral-surface-subtle: rgb(255 0 0);
--rl-neutral-surface-muted: rgb(255 0 0);
--rl-neutral-surface-hover: rgb(255 0 0);
--rl-selected-surface: rgb(255 0 0);
--rl-neutral-surface-active: rgb(255 0 0);
--rl-neutral-surface-disabled: rgb(255 0 0);
--rl-deprecated-neutral-surface-inverse: rgb(255 0 0);
--rl-neutral-surface-raised: rgb(255 0 0);
--rl-shell-surface-default: rgb(255 0 0);
--rl-shell-surface: rgb(255 0 0);
--rl-key-surface-secondary: rgb(255 0 0);
--rl-key-surface-primary: rgb(255 0 0);
/* On Surface */
--rl-accent-on-solid: rgb(255 0 0);
--rl-accent-on-secondary: rgb(255 0 0);
--rl-danger-on-solid: rgb(255 0 0);
--rl-neutral-text-default: rgb(255 0 0);
--rl-neutral-text-default-hover: rgb(255 0 0);
--rl-danger-text: rgb(255 0 0);
--rl-neutral-text-emphasis: rgb(255 0 0);
--rl-info-icon: rgb(255 0 0);
--rl-success-text: rgb(255 0 0);
--rl-neutral-text-secondary: rgb(255 0 0);
--rl-neutral-text-secondary-hover: rgb(255 0 0);
--rl-neutral-text-muted: rgb(255 0 0);
--rl-neutral-text-disabled: rgb(255 0 0);
--rl-neutral-text-on-inverse: rgb(255 0 0);
--rl-neutral-text-on-floating: rgb(255 0 0);
--rl-shell-text: rgb(255 0 0);
--rl-deprecated-shell-text-default-hover: rgb(255 0 0);
--rl-shell-text-default-active: rgb(255 0 0);
--rl-shell-icon-default-active: rgb(255 0 0);
--rl-shell-icon: rgb(255 0 0);
--rl-deprecated-neutral-text-wash: rgb(255 0 0);
--rl-key-on-surface-secondary: rgb(255 0 0);
--rl-key-on-surface-primary: rgb(255 0 0);
--rl-warning-text: rgb(255 0 0);
--rl-deprecated-warning-on-container: rgb(255 0 0);
--rl-deprecated-danger-on-container-hover: rgb(255 0 0);
--rl-deprecated-success-on-container-hover: rgb(255 0 0);
--rl-deprecated-warning-on-container-hover: rgb(255 0 0);
--rl-deprecated-accent-on-container-hover: rgb(255 0 0);
--rl-info-text: rgb(255 0 0);
--rl-selected-text: rgb(255 0 0);
/* Outline */
--rl-neutral-border-default: rgb(255 0 0);
--rl-neutral-border-strong: rgb(255 0 0);
--rl-neutral-border-secondary: rgb(255 0 0);
--rl-neutral-border-muted: rgb(255 0 0);
--rl-neutral-border-muted-hover: rgb(255 0 0);
--rl-neutral-border-subtle: rgb(255 0 0);
--rl-neutral-border-divider: rgb(255 0 0);
--rl-focus-ring: rgb(255 0 0);
--rl-focus-ring-secondary: rgb(255 0 0);
--rl-focus-ring-tertiary: rgb(255 0 0);
--rl-focus-ring-hover: rgb(255 0 0);
--rl-focus-ring-inner: rgb(255 0 0);
--rl-accent-border: rgb(255 0 0);
--rl-accent-border-subtle: rgb(255 0 0);
--rl-selected-border: rgb(255 0 0);
--rl-danger-border-strong: rgb(255 0 0);
/* Badge */
--rl-badge-blue-bg: rgb(255 0 0);
--rl-badge-blue-text: rgb(255 0 0);
--rl-badge-blue-bg-strong: rgb(255 0 0);
--rl-badge-blue-text-strong: rgb(255 0 0);
--rl-badge-purple-bg: rgb(255 0 0);
--rl-badge-purple-text: rgb(255 0 0);
--rl-badge-purple-bg-strong: rgb(255 0 0);
--rl-badge-purple-text-strong: rgb(255 0 0);
--rl-badge-gray-bg: rgb(255 0 0);
--rl-badge-gray-text: rgb(255 0 0);
--rl-badge-gray-bg-strong: rgb(255 0 0);
--rl-badge-gray-text-strong: rgb(255 0 0);
--rl-badge-green-bg: rgb(255 0 0);
--rl-badge-green-text: rgb(255 0 0);
--rl-badge-green-bg-strong: rgb(255 0 0);
--rl-badge-green-text-strong: rgb(255 0 0);
--rl-badge-yellow-bg: rgb(255 0 0);
--rl-badge-yellow-text: rgb(255 0 0);
--rl-badge-yellow-bg-strong: rgb(255 0 0);
--rl-badge-yellow-text-strong: rgb(255 0 0);
--rl-badge-orange-bg: rgb(255 0 0);
--rl-badge-orange-text: rgb(255 0 0);
--rl-badge-orange-bg-strong: rgb(255 0 0);
--rl-badge-orange-text-strong: rgb(255 0 0);
--rl-badge-red-bg: rgb(255 0 0);
--rl-badge-red-text: rgb(255 0 0);
--rl-badge-red-bg-strong: rgb(255 0 0);
--rl-badge-red-text-strong: rgb(255 0 0);
--rl-badge-alert-bg: rgb(255 0 0);
--rl-badge-alert-text: rgb(255 0 0);
--rl-badge-alert-border: rgb(255 0 0);
--rl-badge-alert-bg-strong: rgb(255 0 0);
--rl-badge-alert-text-strong: rgb(255 0 0);
--rl-badge-teal-bg: rgb(255 0 0);
--rl-badge-teal-text: rgb(255 0 0);
--rl-badge-teal-bg-strong: rgb(255 0 0);
--rl-badge-teal-text-strong: rgb(255 0 0);
--rl-badge-navy-bg: rgb(255 0 0);
--rl-badge-navy-text: rgb(255 0 0);
--rl-badge-navy-bg-strong: rgb(255 0 0);
--rl-badge-navy-text-strong: rgb(255 0 0);
--rl-badge-emerald-bg: rgb(255 0 0);
--rl-badge-emerald-text: rgb(255 0 0);
--rl-badge-emerald-bg-strong: rgb(255 0 0);
--rl-badge-emerald-text-strong: rgb(255 0 0);
/* AI Assistant — RLA-415454 tokenization additions */
--rl-shell-surface-secondary-hover: rgb(255 0 0);
--rl-shell-surface-secondary-selected: rgb(255 0 0);
--rl-shell-surface-selected: rgb(255 0 0);
--rl-shell-surface-selected-default: rgb(255 0 0);
--rl-shell-surface-selected-hover: rgb(255 0 0);
--rl-shell-control: rgb(255 0 0);
--rl-shell-control-hover: rgb(255 0 0);
--rl-shell-icon-active: rgb(255 0 0);
--rl-highlight-solid: rgb(255 0 0);
--rl-highlight-solid-muted: rgb(255 0 0);
--rl-highlight-surface: rgb(255 0 0);
--rl-highlight-surface-subtle: rgb(255 0 0);
--rl-highlight-surface-muted: rgb(255 0 0);
--rl-highlight-text-secondary: rgb(255 0 0);
--rl-highlight-text-muted: rgb(255 0 0);
--rl-highlight-on-solid: rgb(255 0 0);
--rl-neutral-border-wash: rgb(255 0 0);
--rl-highlight-border: rgb(255 0 0);
--rl-highlight-border-strong: rgb(255 0 0);
--rl-accent-border-hover: rgb(255 0 0);
--rl-shell-text-secondary-muted: rgb(255 0 0);
--rl-shell-icon-secondary: rgb(255 0 0);
--rl-neutral-text-disabled-strong: rgb(255 0 0);
--rl-inset-surface-emphasis: rgb(255 0 0);
--rl-inset-text-secondary: rgb(255 0 0);
--rl-inset-text-muted: rgb(255 0 0);
--rl-inset-border: rgb(255 0 0);
--rl-inset-border-subtle: rgb(255 0 0);
--rl-shell-inset: rgb(255 0 0);
--rl-shell-on-inset: rgb(255 0 0);
--rl-shell-on-inset-secondary: rgb(255 0 0);
--rl-shell-on-inset-secondary-hover: rgb(255 0 0);
--rl-shell-on-inset-muted: rgb(255 0 0);
--rl-shell-on-inset-muted-hover: rgb(255 0 0);
--rl-shell-border-inset-subtle: rgb(255 0 0);
/* Shadow (solid-color legacy only — canonical shadows are alpha-black and skipped) */
--rl-shadow-flat-subtle: rgb(255 0 0);
--rl-shadow-flat-medium: rgb(255 0 0);
/* dataGrid27 legacy tokens — overlay / flash / selection / focus / validation */
--rl-deprecated-neutral-surface-overlay-subtle: rgb(255 0 0);
--rl-deprecated-neutral-surface-overlay-medium: rgb(255 0 0);
--rl-deprecated-neutral-text-overlay-medium: rgb(255 0 0);
--rl-deprecated-neutral-text-overlay-bold: rgb(255 0 0);
--rl-deprecated-neutral-border-overlay-subtle: rgb(255 0 0);
--rl-deprecated-neutral-border-overlay-soft: rgb(255 0 0);
--rl-deprecated-neutral-border-overlay-medium: rgb(255 0 0);
--rl-deprecated-shadow-overlay-faint: rgb(255 0 0);
--rl-deprecated-shadow-overlay-subtle: rgb(255 0 0);
--rl-deprecated-shadow-overlay-soft: rgb(255 0 0);
--rl-deprecated-shadow-overlay-medium: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-changed: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-increase: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-decrease: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-removed: rgb(255 0 0);
--rl-deprecated-neutral-surface-selected-primary: rgb(255 0 0);
--rl-deprecated-accent-text: rgb(255 0 0);
--rl-deprecated-shadow-focus-primary: rgb(255 0 0);
--rl-deprecated-shadow-focus: rgb(255 0 0);
--rl-deprecated-warning-text: rgb(255 0 0);
--rl-deprecated-warning-border: rgb(255 0 0);
--rl-deprecated-shadow-error: rgb(255 0 0);
--rl-deprecated-shadow-warning: rgb(255 0 0);
--rl-deprecated-shadow-hint: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-data-changed: rgb(255 0 0);
--rl-deprecated-shadow-flat-divider: rgb(255 0 0);
--rl-deprecated-neutral-surface-skeleton: rgb(255 0 0);
--rl-deprecated-skeleton-surface-dark: rgb(255 0 0);
--rl-deprecated-skeleton-surface-dark-shimmer: rgb(255 0 0);
--rl-deprecated-skeleton-surface-light: rgb(255 0 0);
--rl-deprecated-skeleton-surface-light-shimmer: rgb(255 0 0);
--rl-deprecated-neutral-surface-scrollbar: rgb(255 0 0);
--rl-deprecated-neutral-surface-scrollbar-hover: rgb(255 0 0);
--rl-deprecated-neutral-text-default: rgb(255 0 0);
--rl-deprecated-neutral-surface-light-teal: rgb(255 0 0);
/* Alpha-valued dataGrid27 legacy tokens — red tint at the original opacity */
--rl-deprecated-neutral-border-overlay-soft-alpha: rgb(255 0 0 / 25%);
--rl-deprecated-neutral-text-overlay-soft-alpha: rgb(255 0 0 / 25%);
--rl-deprecated-shadow-overlay-subtle-alpha: rgb(255 0 0 / 10%);
--rl-deprecated-neutral-surface-overlay-faint-alpha: rgb(255 0 0 / 5%);
--rl-deprecated-neutral-surface-loading-overlay: rgb(255 0 0 / 85%);
--rl-deprecated-neutral-surface-scrim: rgb(255 0 0 / 70%);
/* tom-pc-ui migration tokens */
--rl-deprecated-tom-text-default: rgb(255 0 0);
--rl-deprecated-tom-surface-dark: rgb(255 0 0);
--rl-deprecated-tom-surface-hover: rgb(255 0 0);
--rl-deprecated-tom-focus-ring: rgb(255 0 0);
--rl-deprecated-tom-warning-solid: rgb(255 0 0);
--rl-deprecated-tom-transparent: rgb(255 0 0 / 0%);
--rl-deprecated-tom-surface-translucent: rgb(255 0 0 / 53.3%);
--rl-deprecated-tom-border-translucent: rgb(255 0 0 / 50%);
--rl-deprecated-tom-danger-text-strong: rgb(255 0 0);
--rl-deprecated-tom-surface-scrim: rgb(255 0 0 / 90%);
--rl-deprecated-tom-danger-surface-subtle: rgb(255 0 0 / 8%);
--rl-deprecated-tom-danger-surface-strong: rgb(255 0 0 / 25%);
/* Primitives */
--rl-primitive-white: rgb(255 0 0);
/* Blue */
--rl-primitive-blue-10: rgb(255 0 0);
--rl-primitive-blue-15: rgb(255 0 0);
--rl-primitive-blue-20: rgb(255 0 0);
--rl-primitive-blue-30: rgb(255 0 0);
--rl-primitive-blue-40: rgb(255 0 0);
--rl-primitive-blue-50: rgb(255 0 0);
--rl-primitive-blue-55: rgb(255 0 0);
--rl-primitive-blue-60: rgb(255 0 0);
/* Emerald */
--rl-primitive-emerald-10: rgb(255 0 0);
--rl-primitive-emerald-15: rgb(255 0 0);
--rl-primitive-emerald-20: rgb(255 0 0);
--rl-primitive-emerald-30: rgb(255 0 0);
--rl-primitive-emerald-40: rgb(255 0 0);
--rl-primitive-emerald-50: rgb(255 0 0);
--rl-primitive-emerald-55: rgb(255 0 0);
--rl-primitive-emerald-60: rgb(255 0 0);
/* Gold */
--rl-primitive-gold-10: rgb(255 0 0);
--rl-primitive-gold-15: rgb(255 0 0);
--rl-primitive-gold-20: rgb(255 0 0);
--rl-primitive-gold-30: rgb(255 0 0);
--rl-primitive-gold-40: rgb(255 0 0);
--rl-primitive-gold-50: rgb(255 0 0);
--rl-primitive-gold-55: rgb(255 0 0);
--rl-primitive-gold-60: rgb(255 0 0);
/* Gray */
--rl-primitive-gray-10: rgb(255 0 0);
--rl-primitive-gray-15: rgb(255 0 0);
--rl-primitive-gray-20: rgb(255 0 0);
--rl-primitive-gray-30: rgb(255 0 0);
--rl-primitive-gray-40: rgb(255 0 0);
--rl-primitive-gray-50: rgb(255 0 0);
--rl-primitive-gray-55: rgb(255 0 0);
--rl-primitive-gray-60: rgb(255 0 0);
/* Green */
--rl-primitive-green-10: rgb(255 0 0);
--rl-primitive-green-15: rgb(255 0 0);
--rl-primitive-green-20: rgb(255 0 0);
--rl-primitive-green-30: rgb(255 0 0);
--rl-primitive-green-40: rgb(255 0 0);
--rl-primitive-green-50: rgb(255 0 0);
--rl-primitive-green-55: rgb(255 0 0);
--rl-primitive-green-60: rgb(255 0 0);
/* Navy */
--rl-primitive-navy-10: rgb(255 0 0);
--rl-primitive-navy-15: rgb(255 0 0);
--rl-primitive-navy-20: rgb(255 0 0);
--rl-primitive-navy-30: rgb(255 0 0);
--rl-primitive-navy-40: rgb(255 0 0);
--rl-primitive-navy-50: rgb(255 0 0);
--rl-primitive-navy-55: rgb(255 0 0);
--rl-primitive-navy-60: rgb(255 0 0);
/* Orange */
--rl-primitive-orange-10: rgb(255 0 0);
--rl-primitive-orange-15: rgb(255 0 0);
--rl-primitive-orange-20: rgb(255 0 0);
--rl-primitive-orange-30: rgb(255 0 0);
--rl-primitive-orange-40: rgb(255 0 0);
--rl-primitive-orange-50: rgb(255 0 0);
--rl-primitive-orange-55: rgb(255 0 0);
--rl-primitive-orange-60: rgb(255 0 0);
/* Purple */
--rl-primitive-purple-10: rgb(255 0 0);
--rl-primitive-purple-15: rgb(255 0 0);
--rl-primitive-purple-20: rgb(255 0 0);
--rl-primitive-purple-30: rgb(255 0 0);
--rl-primitive-purple-40: rgb(255 0 0);
--rl-primitive-purple-50: rgb(255 0 0);
--rl-primitive-purple-55: rgb(255 0 0);
--rl-primitive-purple-60: rgb(255 0 0);
/* Red */
--rl-primitive-red-10: rgb(255 0 0);
--rl-primitive-red-15: rgb(255 0 0);
--rl-primitive-red-20: rgb(255 0 0);
--rl-primitive-red-30: rgb(255 0 0);
--rl-primitive-red-40: rgb(255 0 0);
--rl-primitive-red-50: rgb(255 0 0);
--rl-primitive-red-55: rgb(255 0 0);
--rl-primitive-red-60: rgb(255 0 0);
/* Teal */
--rl-primitive-teal-10: rgb(255 0 0);
--rl-primitive-teal-15: rgb(255 0 0);
--rl-primitive-teal-20: rgb(255 0 0);
--rl-primitive-teal-30: rgb(255 0 0);
--rl-primitive-teal-40: rgb(255 0 0);
--rl-primitive-teal-50: rgb(255 0 0);
--rl-primitive-teal-55: rgb(255 0 0);
--rl-primitive-teal-60: rgb(255 0 0);
/* Yellow */
--rl-primitive-yellow-10: rgb(255 0 0);
--rl-primitive-yellow-15: rgb(255 0 0);
--rl-primitive-yellow-20: rgb(255 0 0);
--rl-primitive-yellow-30: rgb(255 0 0);
--rl-primitive-yellow-40: rgb(255 0 0);
--rl-primitive-yellow-50: rgb(255 0 0);
--rl-primitive-yellow-55: rgb(255 0 0);
--rl-primitive-yellow-60: rgb(255 0 0);
/* Deviations */
--rl-primitive-black: rgb(255 0 0);
--rl-primitive-wash: rgb(255 0 0);
--rl-primitive-brand-navy: rgb(255 0 0);
--rl-primitive-brand-teal: rgb(255 0 0);
--rl-primitive-darkest-spruce: rgb(255 0 0);
--rl-primitive-barely-blue: rgb(255 0 0);
--rl-primitive-ponderosa-pine: rgb(255 0 0);
--rl-primitive-oyster-mushroom: rgb(255 0 0);
}
/* Dark mode */
HTML[data-theme='red'][data-color-scheme='dark'] {
/* Surface */
--rl-neutral-surface-default: rgb(139 0 0);
--rl-neutral-surface-subtle: rgb(139 0 0);
--rl-neutral-surface-muted: rgb(139 0 0);
--rl-neutral-surface-hover: rgb(139 0 0);
--rl-selected-surface: rgb(139 0 0);
--rl-neutral-surface-active: rgb(139 0 0);
--rl-neutral-surface-disabled: rgb(139 0 0);
--rl-deprecated-neutral-surface-inverse: rgb(139 0 0);
--rl-neutral-surface-raised: rgb(139 0 0);
--rl-shell-surface-default: rgb(139 0 0);
--rl-shell-surface: rgb(139 0 0);
--rl-key-surface-secondary: rgb(139 0 0);
--rl-key-surface-primary: rgb(139 0 0);
/* On Surface */
--rl-accent-on-solid: rgb(139 0 0);
--rl-accent-on-secondary: rgb(139 0 0);
--rl-danger-on-solid: rgb(139 0 0);
--rl-neutral-text-default: rgb(139 0 0);
--rl-neutral-text-default-hover: rgb(139 0 0);
--rl-danger-text: rgb(139 0 0);
--rl-neutral-text-emphasis: rgb(139 0 0);
--rl-info-icon: rgb(139 0 0);
--rl-success-text: rgb(139 0 0);
--rl-neutral-text-secondary: rgb(139 0 0);
--rl-neutral-text-secondary-hover: rgb(139 0 0);
--rl-neutral-text-muted: rgb(139 0 0);
--rl-neutral-text-disabled: rgb(139 0 0);
--rl-neutral-text-on-inverse: rgb(139 0 0);
--rl-neutral-text-on-floating: rgb(139 0 0);
--rl-shell-text: rgb(139 0 0);
--rl-deprecated-shell-text-default-hover: rgb(139 0 0);
--rl-shell-text-default-active: rgb(139 0 0);
--rl-shell-icon-default-active: rgb(139 0 0);
--rl-shell-icon: rgb(139 0 0);
--rl-deprecated-neutral-text-wash: rgb(139 0 0);
--rl-key-on-surface-secondary: rgb(139 0 0);
--rl-key-on-surface-primary: rgb(139 0 0);
--rl-warning-text: rgb(139 0 0);
--rl-deprecated-warning-on-container: rgb(139 0 0);
--rl-deprecated-danger-on-container-hover: rgb(139 0 0);
--rl-deprecated-success-on-container-hover: rgb(139 0 0);
--rl-deprecated-warning-on-container-hover: rgb(139 0 0);
--rl-deprecated-accent-on-container-hover: rgb(139 0 0);
--rl-info-text: rgb(139 0 0);
--rl-selected-text: rgb(139 0 0);
/* Outline */
--rl-neutral-border-default: rgb(139 0 0);
--rl-neutral-border-strong: rgb(139 0 0);
--rl-neutral-border-secondary: rgb(139 0 0);
--rl-neutral-border-muted: rgb(139 0 0);
--rl-neutral-border-muted-hover: rgb(139 0 0);
--rl-neutral-border-subtle: rgb(139 0 0);
--rl-neutral-border-divider: rgb(139 0 0);
--rl-focus-ring: rgb(139 0 0);
--rl-focus-ring-secondary: rgb(139 0 0);
--rl-focus-ring-tertiary: rgb(139 0 0);
--rl-focus-ring-hover: rgb(139 0 0);
--rl-focus-ring-inner: rgb(139 0 0);
--rl-accent-border: rgb(139 0 0);
--rl-accent-border-subtle: rgb(139 0 0);
--rl-selected-border: rgb(139 0 0);
--rl-danger-border-strong: rgb(139 0 0);
/* Badge */
--rl-badge-blue-bg: rgb(139 0 0);
--rl-badge-blue-text: rgb(139 0 0);
--rl-badge-blue-bg-strong: rgb(139 0 0);
--rl-badge-blue-text-strong: rgb(139 0 0);
--rl-badge-purple-bg: rgb(139 0 0);
--rl-badge-purple-text: rgb(139 0 0);
--rl-badge-purple-bg-strong: rgb(139 0 0);
--rl-badge-purple-text-strong: rgb(139 0 0);
--rl-badge-gray-bg: rgb(139 0 0);
--rl-badge-gray-text: rgb(139 0 0);
--rl-badge-gray-bg-strong: rgb(139 0 0);
--rl-badge-gray-text-strong: rgb(139 0 0);
--rl-badge-green-bg: rgb(139 0 0);
--rl-badge-green-text: rgb(139 0 0);
--rl-badge-green-bg-strong: rgb(139 0 0);
--rl-badge-green-text-strong: rgb(139 0 0);
--rl-badge-yellow-bg: rgb(139 0 0);
--rl-badge-yellow-text: rgb(139 0 0);
--rl-badge-yellow-bg-strong: rgb(139 0 0);
--rl-badge-yellow-text-strong: rgb(139 0 0);
--rl-badge-orange-bg: rgb(139 0 0);
--rl-badge-orange-text: rgb(139 0 0);
--rl-badge-orange-bg-strong: rgb(139 0 0);
--rl-badge-orange-text-strong: rgb(139 0 0);
--rl-badge-red-bg: rgb(139 0 0);
--rl-badge-red-text: rgb(139 0 0);
--rl-badge-red-bg-strong: rgb(139 0 0);
--rl-badge-red-text-strong: rgb(139 0 0);
--rl-badge-alert-bg: rgb(139 0 0);
--rl-badge-alert-text: rgb(139 0 0);
--rl-badge-alert-border: rgb(139 0 0);
--rl-badge-alert-bg-strong: rgb(139 0 0);
--rl-badge-alert-text-strong: rgb(139 0 0);
--rl-badge-teal-bg: rgb(139 0 0);
--rl-badge-teal-text: rgb(139 0 0);
--rl-badge-teal-bg-strong: rgb(139 0 0);
--rl-badge-teal-text-strong: rgb(139 0 0);
--rl-badge-navy-bg: rgb(139 0 0);
--rl-badge-navy-text: rgb(139 0 0);
--rl-badge-navy-bg-strong: rgb(139 0 0);
--rl-badge-navy-text-strong: rgb(139 0 0);
--rl-badge-emerald-bg: rgb(139 0 0);
--rl-badge-emerald-text: rgb(139 0 0);
--rl-badge-emerald-bg-strong: rgb(139 0 0);
--rl-badge-emerald-text-strong: rgb(139 0 0);
/* AI Assistant — RLA-415454 tokenization additions */
--rl-shell-surface-secondary-hover: rgb(139 0 0);
--rl-shell-surface-secondary-selected: rgb(139 0 0);
--rl-shell-surface-selected: rgb(139 0 0);
--rl-shell-surface-selected-default: rgb(139 0 0);
--rl-shell-surface-selected-hover: rgb(139 0 0);
--rl-shell-control: rgb(139 0 0);
--rl-shell-control-hover: rgb(139 0 0);
--rl-shell-icon-active: rgb(139 0 0);
--rl-highlight-solid: rgb(139 0 0);
--rl-highlight-solid-muted: rgb(139 0 0);
--rl-highlight-surface: rgb(139 0 0);
--rl-highlight-surface-subtle: rgb(139 0 0);
--rl-highlight-surface-muted: rgb(139 0 0);
--rl-highlight-text-secondary: rgb(139 0 0);
--rl-highlight-text-muted: rgb(139 0 0);
--rl-highlight-on-solid: rgb(139 0 0);
--rl-neutral-border-wash: rgb(139 0 0);
--rl-highlight-border: rgb(139 0 0);
--rl-highlight-border-strong: rgb(139 0 0);
--rl-accent-border-hover: rgb(139 0 0);
--rl-shell-text-secondary-muted: rgb(139 0 0);
--rl-shell-icon-secondary: rgb(139 0 0);
--rl-neutral-text-disabled-strong: rgb(139 0 0);
--rl-inset-surface-emphasis: rgb(139 0 0);
--rl-inset-text-secondary: rgb(139 0 0);
--rl-inset-text-muted: rgb(139 0 0);
--rl-inset-border: rgb(139 0 0);
--rl-inset-border-subtle: rgb(139 0 0);
--rl-shell-inset: rgb(139 0 0);
--rl-shell-on-inset: rgb(139 0 0);
--rl-shell-on-inset-secondary: rgb(139 0 0);
--rl-shell-on-inset-secondary-hover: rgb(139 0 0);
--rl-shell-on-inset-muted: rgb(139 0 0);
--rl-shell-on-inset-muted-hover: rgb(139 0 0);
--rl-shell-border-inset-subtle: rgb(139 0 0);
/* Shadow (solid-color legacy only — canonical shadows are alpha-black and skipped) */
--rl-shadow-flat-subtle: rgb(139 0 0);
--rl-shadow-flat-medium: rgb(139 0 0);
/* dataGrid27 legacy tokens — overlay / flash / selection / focus / validation */
--rl-deprecated-neutral-surface-overlay-subtle: rgb(139 0 0);
--rl-deprecated-neutral-surface-overlay-medium: rgb(139 0 0);
--rl-deprecated-neutral-text-overlay-medium: rgb(139 0 0);
--rl-deprecated-neutral-text-overlay-bold: rgb(139 0 0);
--rl-deprecated-neutral-border-overlay-subtle: rgb(139 0 0);
--rl-deprecated-neutral-border-overlay-soft: rgb(139 0 0);
--rl-deprecated-neutral-border-overlay-medium: rgb(139 0 0);
--rl-deprecated-shadow-overlay-faint: rgb(139 0 0);
--rl-deprecated-shadow-overlay-subtle: rgb(139 0 0);
--rl-deprecated-shadow-overlay-soft: rgb(139 0 0);
--rl-deprecated-shadow-overlay-medium: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-changed: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-increase: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-decrease: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-removed: rgb(139 0 0);
--rl-deprecated-neutral-surface-selected-primary: rgb(139 0 0);
--rl-deprecated-accent-text: rgb(139 0 0);
--rl-deprecated-shadow-focus-primary: rgb(139 0 0);
--rl-deprecated-shadow-focus: rgb(139 0 0);
--rl-deprecated-warning-text: rgb(139 0 0);
--rl-deprecated-warning-border: rgb(139 0 0);
--rl-deprecated-shadow-error: rgb(139 0 0);
--rl-deprecated-shadow-warning: rgb(139 0 0);
--rl-deprecated-shadow-hint: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-data-changed: rgb(139 0 0);
--rl-deprecated-shadow-flat-divider: rgb(139 0 0);
--rl-deprecated-neutral-surface-skeleton: rgb(139 0 0);
--rl-deprecated-skeleton-surface-dark: rgb(139 0 0);
--rl-deprecated-skeleton-surface-dark-shimmer: rgb(139 0 0);
--rl-deprecated-skeleton-surface-light: rgb(139 0 0);
--rl-deprecated-skeleton-surface-light-shimmer: rgb(139 0 0);
--rl-deprecated-neutral-surface-scrollbar: rgb(139 0 0);
--rl-deprecated-neutral-surface-scrollbar-hover: rgb(139 0 0);
--rl-deprecated-neutral-text-default: rgb(139 0 0);
--rl-deprecated-neutral-surface-light-teal: rgb(139 0 0);
/* Alpha-valued dataGrid27 legacy tokens — dark-red tint at the original opacity */
--rl-deprecated-neutral-border-overlay-soft-alpha: rgb(139 0 0 / 25%);
--rl-deprecated-neutral-text-overlay-soft-alpha: rgb(139 0 0 / 25%);
--rl-deprecated-shadow-overlay-subtle-alpha: rgb(139 0 0 / 10%);
--rl-deprecated-neutral-surface-overlay-faint-alpha: rgb(139 0 0 / 5%);
--rl-deprecated-neutral-surface-loading-overlay: rgb(139 0 0 / 85%);
--rl-deprecated-neutral-surface-scrim: rgb(139 0 0 / 70%);
/* tom-pc-ui migration tokens */
--rl-deprecated-tom-text-default: rgb(139 0 0);
--rl-deprecated-tom-surface-dark: rgb(139 0 0);
--rl-deprecated-tom-surface-hover: rgb(139 0 0);
--rl-deprecated-tom-focus-ring: rgb(139 0 0);
--rl-deprecated-tom-warning-solid: rgb(139 0 0);
--rl-deprecated-tom-transparent: rgb(139 0 0 / 0%);
--rl-deprecated-tom-surface-translucent: rgb(139 0 0 / 53.3%);
--rl-deprecated-tom-border-translucent: rgb(139 0 0 / 50%);
--rl-deprecated-tom-danger-text-strong: rgb(139 0 0);
--rl-deprecated-tom-surface-scrim: rgb(139 0 0 / 90%);
--rl-deprecated-tom-danger-surface-subtle: rgb(139 0 0 / 8%);
--rl-deprecated-tom-danger-surface-strong: rgb(139 0 0 / 25%);
/* Primitives */
--rl-primitive-white: rgb(139 0 0);
/* Blue */
--rl-primitive-blue-10: rgb(139 0 0);
--rl-primitive-blue-15: rgb(139 0 0);
--rl-primitive-blue-20: rgb(139 0 0);
--rl-primitive-blue-30: rgb(139 0 0);
--rl-primitive-blue-40: rgb(139 0 0);
--rl-primitive-blue-50: rgb(139 0 0);
--rl-primitive-blue-55: rgb(139 0 0);
--rl-primitive-blue-60: rgb(139 0 0);
/* Emerald */
--rl-primitive-emerald-10: rgb(139 0 0);
--rl-primitive-emerald-15: rgb(139 0 0);
--rl-primitive-emerald-20: rgb(139 0 0);
--rl-primitive-emerald-30: rgb(139 0 0);
--rl-primitive-emerald-40: rgb(139 0 0);
--rl-primitive-emerald-50: rgb(139 0 0);
--rl-primitive-emerald-55: rgb(139 0 0);
--rl-primitive-emerald-60: rgb(139 0 0);
/* Gold */
--rl-primitive-gold-10: rgb(139 0 0);
--rl-primitive-gold-15: rgb(139 0 0);
--rl-primitive-gold-20: rgb(139 0 0);
--rl-primitive-gold-30: rgb(139 0 0);
--rl-primitive-gold-40: rgb(139 0 0);
--rl-primitive-gold-50: rgb(139 0 0);
--rl-primitive-gold-55: rgb(139 0 0);
--rl-primitive-gold-60: rgb(139 0 0);
/* Gray */
--rl-primitive-gray-10: rgb(139 0 0);
--rl-primitive-gray-15: rgb(139 0 0);
--rl-primitive-gray-20: rgb(139 0 0);
--rl-primitive-gray-30: rgb(139 0 0);
--rl-primitive-gray-40: rgb(139 0 0);
--rl-primitive-gray-50: rgb(139 0 0);
--rl-primitive-gray-55: rgb(139 0 0);
--rl-primitive-gray-60: rgb(139 0 0);
/* Green */
--rl-primitive-green-10: rgb(139 0 0);
--rl-primitive-green-15: rgb(139 0 0);
--rl-primitive-green-20: rgb(139 0 0);
--rl-primitive-green-30: rgb(139 0 0);
--rl-primitive-green-40: rgb(139 0 0);
--rl-primitive-green-50: rgb(139 0 0);
--rl-primitive-green-55: rgb(139 0 0);
--rl-primitive-green-60: rgb(139 0 0);
/* Navy */
--rl-primitive-navy-10: rgb(139 0 0);
--rl-primitive-navy-15: rgb(139 0 0);
--rl-primitive-navy-20: rgb(139 0 0);
--rl-primitive-navy-30: rgb(139 0 0);
--rl-primitive-navy-40: rgb(139 0 0);
--rl-primitive-navy-50: rgb(139 0 0);
--rl-primitive-navy-55: rgb(139 0 0);
--rl-primitive-navy-60: rgb(139 0 0);
/* Orange */
--rl-primitive-orange-10: rgb(139 0 0);
--rl-primitive-orange-15: rgb(139 0 0);
--rl-primitive-orange-20: rgb(139 0 0);
--rl-primitive-orange-30: rgb(139 0 0);
--rl-primitive-orange-40: rgb(139 0 0);
--rl-primitive-orange-50: rgb(139 0 0);
--rl-primitive-orange-55: rgb(139 0 0);
--rl-primitive-orange-60: rgb(139 0 0);
/* Purple */
--rl-primitive-purple-10: rgb(139 0 0);
--rl-primitive-purple-15: rgb(139 0 0);
--rl-primitive-purple-20: rgb(139 0 0);
--rl-primitive-purple-30: rgb(139 0 0);
--rl-primitive-purple-40: rgb(139 0 0);
--rl-primitive-purple-50: rgb(139 0 0);
--rl-primitive-purple-55: rgb(139 0 0);
--rl-primitive-purple-60: rgb(139 0 0);
/* Red */
--rl-primitive-red-10: rgb(139 0 0);
--rl-primitive-red-15: rgb(139 0 0);
--rl-primitive-red-20: rgb(139 0 0);
--rl-primitive-red-30: rgb(139 0 0);
--rl-primitive-red-40: rgb(139 0 0);
--rl-primitive-red-50: rgb(139 0 0);
--rl-primitive-red-55: rgb(139 0 0);
--rl-primitive-red-60: rgb(139 0 0);
/* Teal */
--rl-primitive-teal-10: rgb(139 0 0);
--rl-primitive-teal-15: rgb(139 0 0);
--rl-primitive-teal-20: rgb(139 0 0);
--rl-primitive-teal-30: rgb(139 0 0);
--rl-primitive-teal-40: rgb(139 0 0);
--rl-primitive-teal-50: rgb(139 0 0);
--rl-primitive-teal-55: rgb(139 0 0);
--rl-primitive-teal-60: rgb(139 0 0);
/* Yellow */
--rl-primitive-yellow-10: rgb(139 0 0);
--rl-primitive-yellow-15: rgb(139 0 0);
--rl-primitive-yellow-20: rgb(139 0 0);
--rl-primitive-yellow-30: rgb(139 0 0);
--rl-primitive-yellow-40: rgb(139 0 0);
--rl-primitive-yellow-50: rgb(139 0 0);
--rl-primitive-yellow-55: rgb(139 0 0);
--rl-primitive-yellow-60: rgb(139 0 0);
/* Deviations */
--rl-primitive-black: rgb(139 0 0);
--rl-primitive-wash: rgb(139 0 0);
--rl-primitive-brand-navy: rgb(139 0 0);
--rl-primitive-brand-teal: rgb(139 0 0);
--rl-primitive-darkest-spruce: rgb(139 0 0);
--rl-primitive-barely-blue: rgb(139 0 0);
--rl-primitive-ponderosa-pine: rgb(139 0 0);
--rl-primitive-oyster-mushroom: rgb(139 0 0);
}
/**
* Red Surfaces Debug Theme
*
* Sets semantic surface tokens (--rl-color-surface-*) and their paired
* on-surface text tokens (--rl-color-on-surface-*, --rl-color-on-action-*,
* etc.) to red. Primitive tokens are not touched. Useful for checking surface
* and text token coverage in isolation.
*
* Light mode: bright red (rgb(255 0 0))
* Dark mode: dark red (rgb(139 0 0)) -- add data-color-scheme="dark"
*
* Activate via: window.rlTheme.setTheme('red-surfaces')
*/
/* Light mode */
HTML[data-theme='red-surfaces'] {
/* Surface */
--rl-neutral-surface-default: rgb(255 0 0);
--rl-neutral-surface-subtle: rgb(255 0 0);
--rl-neutral-surface-muted: rgb(255 0 0);
--rl-neutral-surface-hover: rgb(255 0 0);
--rl-selected-surface: rgb(255 0 0);
--rl-neutral-surface-active: rgb(255 0 0);
--rl-neutral-surface-disabled: rgb(255 0 0);
--rl-deprecated-neutral-surface-inverse: rgb(255 0 0);
--rl-neutral-surface-raised: rgb(255 0 0);
--rl-shell-surface-default: rgb(255 0 0);
--rl-shell-surface: rgb(255 0 0);
--rl-key-surface-secondary: rgb(255 0 0);
--rl-key-surface-primary: rgb(255 0 0);
/* Status surfaces — RLA-414683 */
--rl-color-surface-note: rgb(255 0 0);
--rl-color-surface-success: rgb(255 0 0);
--rl-color-surface-warning: rgb(255 0 0);
--rl-color-surface-error: rgb(255 0 0);
/* On Surface */
--rl-accent-on-solid: rgb(255 0 0);
--rl-accent-on-secondary: rgb(255 0 0);
--rl-danger-on-solid: rgb(255 0 0);
--rl-neutral-text-default: rgb(255 0 0);
--rl-neutral-text-default-hover: rgb(255 0 0);
--rl-danger-text: rgb(255 0 0);
--rl-neutral-text-emphasis: rgb(255 0 0);
--rl-info-icon: rgb(255 0 0);
--rl-success-text: rgb(255 0 0);
--rl-neutral-text-secondary: rgb(255 0 0);
--rl-neutral-text-secondary-hover: rgb(255 0 0);
--rl-neutral-text-muted: rgb(255 0 0);
--rl-neutral-text-disabled: rgb(255 0 0);
--rl-neutral-text-on-inverse: rgb(255 0 0);
--rl-neutral-text-on-floating: rgb(255 0 0);
--rl-shell-text: rgb(255 0 0);
--rl-deprecated-shell-text-default-hover: rgb(255 0 0);
--rl-shell-text-default-active: rgb(255 0 0);
--rl-shell-icon-default-active: rgb(255 0 0);
--rl-shell-icon: rgb(255 0 0);
--rl-deprecated-neutral-text-wash: rgb(255 0 0);
--rl-key-on-surface-secondary: rgb(255 0 0);
--rl-key-on-surface-primary: rgb(255 0 0);
--rl-warning-text: rgb(255 0 0);
--rl-deprecated-warning-on-container: rgb(255 0 0);
--rl-deprecated-danger-on-container-hover: rgb(255 0 0);
--rl-deprecated-success-on-container-hover: rgb(255 0 0);
--rl-deprecated-warning-on-container-hover: rgb(255 0 0);
--rl-deprecated-accent-on-container-hover: rgb(255 0 0);
--rl-info-text: rgb(255 0 0);
--rl-selected-text: rgb(255 0 0);
/* AI Assistant — RLA-415454 tokenization additions */
--rl-shell-surface-secondary-hover: rgb(255 0 0);
--rl-shell-surface-secondary-selected: rgb(255 0 0);
--rl-shell-surface-selected: rgb(255 0 0);
--rl-shell-surface-selected-default: rgb(255 0 0);
--rl-shell-surface-selected-hover: rgb(255 0 0);
--rl-shell-control: rgb(255 0 0);
--rl-shell-control-hover: rgb(255 0 0);
--rl-shell-icon-active: rgb(255 0 0);
--rl-highlight-solid: rgb(255 0 0);
--rl-highlight-solid-muted: rgb(255 0 0);
--rl-highlight-surface: rgb(255 0 0);
--rl-highlight-surface-subtle: rgb(255 0 0);
--rl-highlight-surface-muted: rgb(255 0 0);
--rl-highlight-text-secondary: rgb(255 0 0);
--rl-highlight-text-muted: rgb(255 0 0);
--rl-highlight-on-solid: rgb(255 0 0);
--rl-neutral-border-wash: rgb(255 0 0);
--rl-highlight-border: rgb(255 0 0);
--rl-highlight-border-strong: rgb(255 0 0);
--rl-accent-border-hover: rgb(255 0 0);
--rl-shell-text-secondary-muted: rgb(255 0 0);
--rl-shell-icon-secondary: rgb(255 0 0);
--rl-neutral-text-disabled-strong: rgb(255 0 0);
--rl-inset-surface-emphasis: rgb(255 0 0);
--rl-inset-text-secondary: rgb(255 0 0);
--rl-inset-text-muted: rgb(255 0 0);
--rl-inset-border: rgb(255 0 0);
--rl-inset-border-subtle: rgb(255 0 0);
--rl-shell-inset: rgb(255 0 0);
--rl-shell-on-inset: rgb(255 0 0);
--rl-shell-on-inset-secondary: rgb(255 0 0);
--rl-shell-on-inset-secondary-hover: rgb(255 0 0);
--rl-shell-on-inset-muted: rgb(255 0 0);
--rl-shell-on-inset-muted-hover: rgb(255 0 0);
--rl-shell-border-inset-subtle: rgb(255 0 0);
--rl-shadow-flat-subtle: rgb(255 0 0);
--rl-shadow-flat-medium: rgb(255 0 0);
/* dataGrid27 legacy tokens — overlay / flash / selection / focus / validation */
--rl-deprecated-neutral-surface-overlay-subtle: rgb(255 0 0);
--rl-deprecated-neutral-surface-overlay-medium: rgb(255 0 0);
--rl-deprecated-neutral-text-overlay-medium: rgb(255 0 0);
--rl-deprecated-neutral-text-overlay-bold: rgb(255 0 0);
--rl-deprecated-neutral-border-overlay-subtle: rgb(255 0 0);
--rl-deprecated-neutral-border-overlay-soft: rgb(255 0 0);
--rl-deprecated-neutral-border-overlay-medium: rgb(255 0 0);
--rl-deprecated-shadow-overlay-faint: rgb(255 0 0);
--rl-deprecated-shadow-overlay-subtle: rgb(255 0 0);
--rl-deprecated-shadow-overlay-soft: rgb(255 0 0);
--rl-deprecated-shadow-overlay-medium: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-changed: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-increase: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-decrease: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-removed: rgb(255 0 0);
--rl-deprecated-neutral-surface-selected-primary: rgb(255 0 0);
--rl-deprecated-accent-text: rgb(255 0 0);
--rl-deprecated-shadow-focus-primary: rgb(255 0 0);
--rl-deprecated-shadow-focus: rgb(255 0 0);
--rl-deprecated-warning-text: rgb(255 0 0);
--rl-deprecated-warning-border: rgb(255 0 0);
--rl-deprecated-shadow-error: rgb(255 0 0);
--rl-deprecated-shadow-warning: rgb(255 0 0);
--rl-deprecated-shadow-hint: rgb(255 0 0);
--rl-deprecated-neutral-surface-flash-data-changed: rgb(255 0 0);
--rl-deprecated-shadow-flat-divider: rgb(255 0 0);
--rl-deprecated-neutral-surface-skeleton: rgb(255 0 0);
--rl-deprecated-skeleton-surface-dark: rgb(255 0 0);
--rl-deprecated-skeleton-surface-dark-shimmer: rgb(255 0 0);
--rl-deprecated-skeleton-surface-light: rgb(255 0 0);
--rl-deprecated-skeleton-surface-light-shimmer: rgb(255 0 0);
--rl-deprecated-neutral-surface-scrollbar: rgb(255 0 0);
--rl-deprecated-neutral-surface-scrollbar-hover: rgb(255 0 0);
--rl-deprecated-neutral-text-default: rgb(255 0 0);
--rl-deprecated-neutral-surface-light-teal: rgb(255 0 0);
/* Alpha-valued dataGrid27 legacy tokens — red tint at the original opacity */
--rl-deprecated-neutral-border-overlay-soft-alpha: rgb(255 0 0 / 25%);
--rl-deprecated-neutral-text-overlay-soft-alpha: rgb(255 0 0 / 25%);
--rl-deprecated-shadow-overlay-subtle-alpha: rgb(255 0 0 / 10%);
--rl-deprecated-neutral-surface-overlay-faint-alpha: rgb(255 0 0 / 5%);
--rl-deprecated-neutral-surface-loading-overlay: rgb(255 0 0 / 85%);
--rl-deprecated-neutral-surface-scrim: rgb(255 0 0 / 70%);
}
/* Dark mode */
HTML[data-theme='red-surfaces'][data-color-scheme='dark'] {
/* Surface */
--rl-neutral-surface-default: rgb(139 0 0);
--rl-neutral-surface-subtle: rgb(139 0 0);
--rl-neutral-surface-muted: rgb(139 0 0);
--rl-neutral-surface-hover: rgb(139 0 0);
--rl-selected-surface: rgb(139 0 0);
--rl-neutral-surface-active: rgb(139 0 0);
--rl-neutral-surface-disabled: rgb(139 0 0);
--rl-deprecated-neutral-surface-inverse: rgb(139 0 0);
--rl-neutral-surface-raised: rgb(139 0 0);
--rl-shell-surface-default: rgb(139 0 0);
--rl-shell-surface: rgb(139 0 0);
--rl-key-surface-secondary: rgb(139 0 0);
--rl-key-surface-primary: rgb(139 0 0);
/* Status surfaces — RLA-414683 */
--rl-color-surface-note: rgb(139 0 0);
--rl-color-surface-success: rgb(139 0 0);
--rl-color-surface-warning: rgb(139 0 0);
--rl-color-surface-error: rgb(139 0 0);
/* On Surface */
--rl-accent-on-solid: rgb(139 0 0);
--rl-accent-on-secondary: rgb(139 0 0);
--rl-danger-on-solid: rgb(139 0 0);
--rl-neutral-text-default: rgb(139 0 0);
--rl-neutral-text-default-hover: rgb(139 0 0);
--rl-danger-text: rgb(139 0 0);
--rl-neutral-text-emphasis: rgb(139 0 0);
--rl-info-icon: rgb(139 0 0);
--rl-success-text: rgb(139 0 0);
--rl-neutral-text-secondary: rgb(139 0 0);
--rl-neutral-text-secondary-hover: rgb(139 0 0);
--rl-neutral-text-muted: rgb(139 0 0);
--rl-neutral-text-disabled: rgb(139 0 0);
--rl-neutral-text-on-inverse: rgb(139 0 0);
--rl-neutral-text-on-floating: rgb(139 0 0);
--rl-shell-text: rgb(139 0 0);
--rl-deprecated-shell-text-default-hover: rgb(139 0 0);
--rl-shell-text-default-active: rgb(139 0 0);
--rl-shell-icon-default-active: rgb(139 0 0);
--rl-shell-icon: rgb(139 0 0);
--rl-deprecated-neutral-text-wash: rgb(139 0 0);
--rl-key-on-surface-secondary: rgb(139 0 0);
--rl-key-on-surface-primary: rgb(139 0 0);
--rl-warning-text: rgb(139 0 0);
--rl-deprecated-warning-on-container: rgb(139 0 0);
--rl-deprecated-danger-on-container-hover: rgb(139 0 0);
--rl-deprecated-success-on-container-hover: rgb(139 0 0);
--rl-deprecated-warning-on-container-hover: rgb(139 0 0);
--rl-deprecated-accent-on-container-hover: rgb(139 0 0);
--rl-info-text: rgb(139 0 0);
--rl-selected-text: rgb(139 0 0);
/* AI Assistant — RLA-415454 tokenization additions */
--rl-shell-surface-secondary-hover: rgb(139 0 0);
--rl-shell-surface-secondary-selected: rgb(139 0 0);
--rl-shell-surface-selected: rgb(139 0 0);
--rl-shell-surface-selected-default: rgb(139 0 0);
--rl-shell-surface-selected-hover: rgb(139 0 0);
--rl-shell-control: rgb(139 0 0);
--rl-shell-control-hover: rgb(139 0 0);
--rl-shell-icon-active: rgb(139 0 0);
--rl-highlight-solid: rgb(139 0 0);
--rl-highlight-solid-muted: rgb(139 0 0);
--rl-highlight-surface: rgb(139 0 0);
--rl-highlight-surface-subtle: rgb(139 0 0);
--rl-highlight-surface-muted: rgb(139 0 0);
--rl-highlight-text-secondary: rgb(139 0 0);
--rl-highlight-text-muted: rgb(139 0 0);
--rl-highlight-on-solid: rgb(139 0 0);
--rl-neutral-border-wash: rgb(139 0 0);
--rl-highlight-border: rgb(139 0 0);
--rl-highlight-border-strong: rgb(139 0 0);
--rl-accent-border-hover: rgb(139 0 0);
--rl-shell-text-secondary-muted: rgb(139 0 0);
--rl-shell-icon-secondary: rgb(139 0 0);
--rl-neutral-text-disabled-strong: rgb(139 0 0);
--rl-inset-surface-emphasis: rgb(139 0 0);
--rl-inset-text-secondary: rgb(139 0 0);
--rl-inset-text-muted: rgb(139 0 0);
--rl-inset-border: rgb(139 0 0);
--rl-inset-border-subtle: rgb(139 0 0);
--rl-shell-inset: rgb(139 0 0);
--rl-shell-on-inset: rgb(139 0 0);
--rl-shell-on-inset-secondary: rgb(139 0 0);
--rl-shell-on-inset-secondary-hover: rgb(139 0 0);
--rl-shell-on-inset-muted: rgb(139 0 0);
--rl-shell-on-inset-muted-hover: rgb(139 0 0);
--rl-shell-border-inset-subtle: rgb(139 0 0);
--rl-shadow-flat-subtle: rgb(139 0 0);
--rl-shadow-flat-medium: rgb(139 0 0);
/* dataGrid27 legacy tokens — overlay / flash / selection / focus / validation */
--rl-deprecated-neutral-surface-overlay-subtle: rgb(139 0 0);
--rl-deprecated-neutral-surface-overlay-medium: rgb(139 0 0);
--rl-deprecated-neutral-text-overlay-medium: rgb(139 0 0);
--rl-deprecated-neutral-text-overlay-bold: rgb(139 0 0);
--rl-deprecated-neutral-border-overlay-subtle: rgb(139 0 0);
--rl-deprecated-neutral-border-overlay-soft: rgb(139 0 0);
--rl-deprecated-neutral-border-overlay-medium: rgb(139 0 0);
--rl-deprecated-shadow-overlay-faint: rgb(139 0 0);
--rl-deprecated-shadow-overlay-subtle: rgb(139 0 0);
--rl-deprecated-shadow-overlay-soft: rgb(139 0 0);
--rl-deprecated-shadow-overlay-medium: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-changed: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-increase: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-decrease: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-removed: rgb(139 0 0);
--rl-deprecated-neutral-surface-selected-primary: rgb(139 0 0);
--rl-deprecated-accent-text: rgb(139 0 0);
--rl-deprecated-shadow-focus-primary: rgb(139 0 0);
--rl-deprecated-shadow-focus: rgb(139 0 0);
--rl-deprecated-warning-text: rgb(139 0 0);
--rl-deprecated-warning-border: rgb(139 0 0);
--rl-deprecated-shadow-error: rgb(139 0 0);
--rl-deprecated-shadow-warning: rgb(139 0 0);
--rl-deprecated-shadow-hint: rgb(139 0 0);
--rl-deprecated-neutral-surface-flash-data-changed: rgb(139 0 0);
--rl-deprecated-shadow-flat-divider: rgb(139 0 0);
--rl-deprecated-neutral-surface-skeleton: rgb(139 0 0);
--rl-deprecated-skeleton-surface-dark: rgb(139 0 0);
--rl-deprecated-skeleton-surface-dark-shimmer: rgb(139 0 0);
--rl-deprecated-skeleton-surface-light: rgb(139 0 0);
--rl-deprecated-skeleton-surface-light-shimmer: rgb(139 0 0);
--rl-deprecated-neutral-surface-scrollbar: rgb(139 0 0);
--rl-deprecated-neutral-surface-scrollbar-hover: rgb(139 0 0);
--rl-deprecated-neutral-text-default: rgb(139 0 0);
--rl-deprecated-neutral-surface-light-teal: rgb(139 0 0);
/* Alpha-valued dataGrid27 legacy tokens — dark-red tint at the original opacity */
--rl-deprecated-neutral-border-overlay-soft-alpha: rgb(139 0 0 / 25%);
--rl-deprecated-neutral-text-overlay-soft-alpha: rgb(139 0 0 / 25%);
--rl-deprecated-shadow-overlay-subtle-alpha: rgb(139 0 0 / 10%);
--rl-deprecated-neutral-surface-overlay-faint-alpha: rgb(139 0 0 / 5%);
--rl-deprecated-neutral-surface-loading-overlay: rgb(139 0 0 / 85%);
--rl-deprecated-neutral-surface-scrim: rgb(139 0 0 / 70%);
}
/**
* Red Primitives Debug Theme
*
* Overrides only primitive tokens (--rl-primitive-*) with red. No semantic
* tokens are set directly. Because the semantic layer references primitives,
* everything that goes through the token system shifts to red. Anything that
* stays its original color is using a hardcoded value.
*
* Light mode: bright red (rgb(255 0 0))
* Dark mode: dark red (rgb(139 0 0)) -- add data-color-scheme="dark"
*
* Activate via: window.rlTheme.setTheme('red-primitives')
*/
/* Light mode */
HTML[data-theme='red-primitives'] {
--rl-primitive-white: rgb(255 0 0);
/* Blue */
--rl-primitive-blue-10: rgb(255 0 0);
--rl-primitive-blue-15: rgb(255 0 0);
--rl-primitive-blue-20: rgb(255 0 0);
--rl-primitive-blue-30: rgb(255 0 0);
--rl-primitive-blue-40: rgb(255 0 0);
--rl-primitive-blue-50: rgb(255 0 0);
--rl-primitive-blue-55: rgb(255 0 0);
--rl-primitive-blue-60: rgb(255 0 0);
/* Emerald */
--rl-primitive-emerald-10: rgb(255 0 0);
--rl-primitive-emerald-15: rgb(255 0 0);
--rl-primitive-emerald-20: rgb(255 0 0);
--rl-primitive-emerald-30: rgb(255 0 0);
--rl-primitive-emerald-40: rgb(255 0 0);
--rl-primitive-emerald-50: rgb(255 0 0);
--rl-primitive-emerald-55: rgb(255 0 0);
--rl-primitive-emerald-60: rgb(255 0 0);
/* Gold */
--rl-primitive-gold-10: rgb(255 0 0);
--rl-primitive-gold-15: rgb(255 0 0);
--rl-primitive-gold-20: rgb(255 0 0);
--rl-primitive-gold-30: rgb(255 0 0);
--rl-primitive-gold-40: rgb(255 0 0);
--rl-primitive-gold-50: rgb(255 0 0);
--rl-primitive-gold-55: rgb(255 0 0);
--rl-primitive-gold-60: rgb(255 0 0);
/* Gray */
--rl-primitive-gray-10: rgb(255 0 0);
--rl-primitive-gray-15: rgb(255 0 0);
--rl-primitive-gray-20: rgb(255 0 0);
--rl-primitive-gray-30: rgb(255 0 0);
--rl-primitive-gray-40: rgb(255 0 0);
--rl-primitive-gray-50: rgb(255 0 0);
--rl-primitive-gray-55: rgb(255 0 0);
--rl-primitive-gray-60: rgb(255 0 0);
/* Green */
--rl-primitive-green-10: rgb(255 0 0);
--rl-primitive-green-15: rgb(255 0 0);
--rl-primitive-green-20: rgb(255 0 0);
--rl-primitive-green-30: rgb(255 0 0);
--rl-primitive-green-40: rgb(255 0 0);
--rl-primitive-green-50: rgb(255 0 0);
--rl-primitive-green-55: rgb(255 0 0);
--rl-primitive-green-60: rgb(255 0 0);
/* Navy */
--rl-primitive-navy-10: rgb(255 0 0);
--rl-primitive-navy-15: rgb(255 0 0);
--rl-primitive-navy-20: rgb(255 0 0);
--rl-primitive-navy-30: rgb(255 0 0);
--rl-primitive-navy-40: rgb(255 0 0);
--rl-primitive-navy-50: rgb(255 0 0);
--rl-primitive-navy-55: rgb(255 0 0);
--rl-primitive-navy-60: rgb(255 0 0);
/* Orange */
--rl-primitive-orange-10: rgb(255 0 0);
--rl-primitive-orange-15: rgb(255 0 0);
--rl-primitive-orange-20: rgb(255 0 0);
--rl-primitive-orange-30: rgb(255 0 0);
--rl-primitive-orange-40: rgb(255 0 0);
--rl-primitive-orange-50: rgb(255 0 0);
--rl-primitive-orange-55: rgb(255 0 0);
--rl-primitive-orange-60: rgb(255 0 0);
/* Purple */
--rl-primitive-purple-10: rgb(255 0 0);
--rl-primitive-purple-15: rgb(255 0 0);
--rl-primitive-purple-20: rgb(255 0 0);
--rl-primitive-purple-30: rgb(255 0 0);
--rl-primitive-purple-40: rgb(255 0 0);
--rl-primitive-purple-50: rgb(255 0 0);
--rl-primitive-purple-55: rgb(255 0 0);
--rl-primitive-purple-60: rgb(255 0 0);
/* Red */
--rl-primitive-red-10: rgb(255 0 0);
--rl-primitive-red-15: rgb(255 0 0);
--rl-primitive-red-20: rgb(255 0 0);
--rl-primitive-red-30: rgb(255 0 0);
--rl-primitive-red-40: rgb(255 0 0);
--rl-primitive-red-50: rgb(255 0 0);
--rl-primitive-red-55: rgb(255 0 0);
--rl-primitive-red-60: rgb(255 0 0);
/* Teal */
--rl-primitive-teal-10: rgb(255 0 0);
--rl-primitive-teal-15: rgb(255 0 0);
--rl-primitive-teal-20: rgb(255 0 0);
--rl-primitive-teal-30: rgb(255 0 0);
--rl-primitive-teal-40: rgb(255 0 0);
--rl-primitive-teal-50: rgb(255 0 0);
--rl-primitive-teal-55: rgb(255 0 0);
--rl-primitive-teal-60: rgb(255 0 0);
/* Yellow */
--rl-primitive-yellow-10: rgb(255 0 0);
--rl-primitive-yellow-15: rgb(255 0 0);
--rl-primitive-yellow-20: rgb(255 0 0);
--rl-primitive-yellow-30: rgb(255 0 0);
--rl-primitive-yellow-40: rgb(255 0 0);
--rl-primitive-yellow-50: rgb(255 0 0);
--rl-primitive-yellow-55: rgb(255 0 0);
--rl-primitive-yellow-60: rgb(255 0 0);
/* Deviations */
--rl-primitive-black: rgb(255 0 0);
--rl-primitive-wash: rgb(255 0 0);
--rl-primitive-brand-navy: rgb(255 0 0);
--rl-primitive-brand-teal: rgb(255 0 0);
--rl-primitive-darkest-spruce: rgb(255 0 0);
}
/* Dark mode */
HTML[data-theme='red-primitives'][data-color-scheme='dark'] {
--rl-primitive-white: rgb(139 0 0);
/* Blue */
--rl-primitive-blue-10: rgb(139 0 0);
--rl-primitive-blue-15: rgb(139 0 0);
--rl-primitive-blue-20: rgb(139 0 0);
--rl-primitive-blue-30: rgb(139 0 0);
--rl-primitive-blue-40: rgb(139 0 0);
--rl-primitive-blue-50: rgb(139 0 0);
--rl-primitive-blue-55: rgb(139 0 0);
--rl-primitive-blue-60: rgb(139 0 0);
/* Emerald */
--rl-primitive-emerald-10: rgb(139 0 0);
--rl-primitive-emerald-15: rgb(139 0 0);
--rl-primitive-emerald-20: rgb(139 0 0);
--rl-primitive-emerald-30: rgb(139 0 0);
--rl-primitive-emerald-40: rgb(139 0 0);
--rl-primitive-emerald-50: rgb(139 0 0);
--rl-primitive-emerald-55: rgb(139 0 0);
--rl-primitive-emerald-60: rgb(139 0 0);
/* Gold */
--rl-primitive-gold-10: rgb(139 0 0);
--rl-primitive-gold-15: rgb(139 0 0);
--rl-primitive-gold-20: rgb(139 0 0);
--rl-primitive-gold-30: rgb(139 0 0);
--rl-primitive-gold-40: rgb(139 0 0);
--rl-primitive-gold-50: rgb(139 0 0);
--rl-primitive-gold-55: rgb(139 0 0);
--rl-primitive-gold-60: rgb(139 0 0);
/* Gray */
--rl-primitive-gray-10: rgb(139 0 0);
--rl-primitive-gray-15: rgb(139 0 0);
--rl-primitive-gray-20: rgb(139 0 0);
--rl-primitive-gray-30: rgb(139 0 0);
--rl-primitive-gray-40: rgb(139 0 0);
--rl-primitive-gray-50: rgb(139 0 0);
--rl-primitive-gray-55: rgb(139 0 0);
--rl-primitive-gray-60: rgb(139 0 0);
/* Green */
--rl-primitive-green-10: rgb(139 0 0);
--rl-primitive-green-15: rgb(139 0 0);
--rl-primitive-green-20: rgb(139 0 0);
--rl-primitive-green-30: rgb(139 0 0);
--rl-primitive-green-40: rgb(139 0 0);
--rl-primitive-green-50: rgb(139 0 0);
--rl-primitive-green-55: rgb(139 0 0);
--rl-primitive-green-60: rgb(139 0 0);
/* Navy */
--rl-primitive-navy-10: rgb(139 0 0);
--rl-primitive-navy-15: rgb(139 0 0);
--rl-primitive-navy-20: rgb(139 0 0);
--rl-primitive-navy-30: rgb(139 0 0);
--rl-primitive-navy-40: rgb(139 0 0);
--rl-primitive-navy-50: rgb(139 0 0);
--rl-primitive-navy-55: rgb(139 0 0);
--rl-primitive-navy-60: rgb(139 0 0);
/* Orange */
--rl-primitive-orange-10: rgb(139 0 0);
--rl-primitive-orange-15: rgb(139 0 0);
--rl-primitive-orange-20: rgb(139 0 0);
--rl-primitive-orange-30: rgb(139 0 0);
--rl-primitive-orange-40: rgb(139 0 0);
--rl-primitive-orange-50: rgb(139 0 0);
--rl-primitive-orange-55: rgb(139 0 0);
--rl-primitive-orange-60: rgb(139 0 0);
/* Purple */
--rl-primitive-purple-10: rgb(139 0 0);
--rl-primitive-purple-15: rgb(139 0 0);
--rl-primitive-purple-20: rgb(139 0 0);
--rl-primitive-purple-30: rgb(139 0 0);
--rl-primitive-purple-40: rgb(139 0 0);
--rl-primitive-purple-50: rgb(139 0 0);
--rl-primitive-purple-55: rgb(139 0 0);
--rl-primitive-purple-60: rgb(139 0 0);
/* Red */
--rl-primitive-red-10: rgb(139 0 0);
--rl-primitive-red-15: rgb(139 0 0);
--rl-primitive-red-20: rgb(139 0 0);
--rl-primitive-red-30: rgb(139 0 0);
--rl-primitive-red-40: rgb(139 0 0);
--rl-primitive-red-50: rgb(139 0 0);
--rl-primitive-red-55: rgb(139 0 0);
--rl-primitive-red-60: rgb(139 0 0);
/* Teal */
--rl-primitive-teal-10: rgb(139 0 0);
--rl-primitive-teal-15: rgb(139 0 0);
--rl-primitive-teal-20: rgb(139 0 0);
--rl-primitive-teal-30: rgb(139 0 0);
--rl-primitive-teal-40: rgb(139 0 0);
--rl-primitive-teal-50: rgb(139 0 0);
--rl-primitive-teal-55: rgb(139 0 0);
--rl-primitive-teal-60: rgb(139 0 0);
/* Yellow */
--rl-primitive-yellow-10: rgb(139 0 0);
--rl-primitive-yellow-15: rgb(139 0 0);
--rl-primitive-yellow-20: rgb(139 0 0);
--rl-primitive-yellow-30: rgb(139 0 0);
--rl-primitive-yellow-40: rgb(139 0 0);
--rl-primitive-yellow-50: rgb(139 0 0);
--rl-primitive-yellow-55: rgb(139 0 0);
--rl-primitive-yellow-60: rgb(139 0 0);
/* Deviations */
--rl-primitive-black: rgb(139 0 0);
--rl-primitive-wash: rgb(139 0 0);
--rl-primitive-brand-navy: rgb(139 0 0);
--rl-primitive-brand-teal: rgb(139 0 0);
--rl-primitive-darkest-spruce: rgb(139 0 0);
}
/* Legacy: TODO - Replace with adoption.css */
/* TODO - replace semantic.css */
/* TODO - rename to mui-semantics.css */
/* default theme */
/* debug theme */
/* debug theme */
/* debug theme */
.text-small{--icon-size: var(--line-height-smallest, 14px);--icon-vertical-align: calc(-1 * (var(--line-height-smallest, 14px) - var(--font-size-smallest, 10px)));font-size:var(--font-size-smallest, 10px);letter-spacing:.03em;line-height:var(--line-height-smallest, 14px);text-transform:none}.text-small:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-small-bold{--icon-size: var(--line-height-smallest, 14px);--icon-vertical-align: calc(-1 * (var(--line-height-smallest, 14px) - var(--font-size-smallest, 10px)));font-size:var(--font-size-smallest, 10px);letter-spacing:.03em;line-height:var(--line-height-smallest, 14px);text-transform:none}.text-small-bold:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-small-bold{font-weight:600}.text-small-link{--icon-size: var(--line-height-smallest, 14px);--icon-vertical-align: calc(-1 * (var(--line-height-smallest, 14px) - var(--font-size-smallest, 10px)));font-size:var(--font-size-smallest, 10px);letter-spacing:.03em;line-height:var(--line-height-smallest, 14px);text-transform:none}.text-small-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-small-link{text-decoration:underline}.text-small-bold-link{--icon-size: var(--line-height-smallest, 14px);--icon-vertical-align: calc(-1 * (var(--line-height-smallest, 14px) - var(--font-size-smallest, 10px)));font-size:var(--font-size-smallest, 10px);letter-spacing:.03em;line-height:var(--line-height-smallest, 14px);text-transform:none}.text-small-bold-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-small-bold-link{font-weight:600;text-decoration:underline}.text-small-uppercase{--icon-size: var(--line-height-smallest, 14px);--icon-vertical-align: calc(-1 * (var(--line-height-smallest, 14px) - var(--font-size-smallest, 10px)));font-size:var(--font-size-smallest, 10px);letter-spacing:.03em;line-height:var(--line-height-smallest, 14px);text-transform:none}.text-small-uppercase:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-small-uppercase{text-transform:uppercase}.text-caption{--icon-size: var(--line-height-xsmall, 16px);--icon-vertical-align: calc(-1 * (var(--line-height-xsmall, 16px) - var(--font-size-xsmall, 12px)));font-size:var(--font-size-xsmall, 12px);letter-spacing:.03em;line-height:var(--line-height-xsmall, 16px);text-transform:none}.text-caption:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-caption-bold{--icon-size: var(--line-height-xsmall, 16px);--icon-vertical-align: calc(-1 * (var(--line-height-xsmall, 16px) - var(--font-size-xsmall, 12px)));font-size:var(--font-size-xsmall, 12px);letter-spacing:.03em;line-height:var(--line-height-xsmall, 16px);text-transform:none}.text-caption-bold:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-caption-bold{font-weight:600}.text-caption-link{--icon-size: var(--line-height-xsmall, 16px);--icon-vertical-align: calc(-1 * (var(--line-height-xsmall, 16px) - var(--font-size-xsmall, 12px)));font-size:var(--font-size-xsmall, 12px);letter-spacing:.03em;line-height:var(--line-height-xsmall, 16px);text-transform:none}.text-caption-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-caption-link{text-decoration:underline}.text-caption-bold-link{--icon-size: var(--line-height-xsmall, 16px);--icon-vertical-align: calc(-1 * (var(--line-height-xsmall, 16px) - var(--font-size-xsmall, 12px)));font-size:var(--font-size-xsmall, 12px);letter-spacing:.03em;line-height:var(--line-height-xsmall, 16px);text-transform:none}.text-caption-bold-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-caption-bold-link{font-weight:600;text-decoration:underline}.text-caption-uppercase{--icon-size: var(--line-height-xsmall, 16px);--icon-vertical-align: calc(-1 * (var(--line-height-xsmall, 16px) - var(--font-size-xsmall, 12px)));font-size:var(--font-size-xsmall, 12px);letter-spacing:.03em;line-height:var(--line-height-xsmall, 16px);text-transform:none}.text-caption-uppercase:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-caption-uppercase{text-transform:uppercase}.text-body{--icon-size: var(--line-height-small, 18px);--icon-vertical-align: calc(-1 * (var(--line-height-small, 18px) - var(--font-size-small, 14px)));font-size:var(--font-size-small, 14px);letter-spacing:.01em;line-height:var(--line-height-small, 18px);text-transform:none}.text-body:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-body-bold{--icon-size: var(--line-height-small, 18px);--icon-vertical-align: calc(-1 * (var(--line-height-small, 18px) - var(--font-size-small, 14px)));font-size:var(--font-size-small, 14px);letter-spacing:.01em;line-height:var(--line-height-small, 18px);text-transform:none}.text-body-bold:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-body-bold{font-weight:600}.text-body-link{--icon-size: var(--line-height-small, 18px);--icon-vertical-align: calc(-1 * (var(--line-height-small, 18px) - var(--font-size-small, 14px)));font-size:var(--font-size-small, 14px);letter-spacing:.01em;line-height:var(--line-height-small, 18px);text-transform:none}.text-body-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-body-link{text-decoration:underline}.text-body-bold-link{--icon-size: var(--line-height-small, 18px);--icon-vertical-align: calc(-1 * (var(--line-height-small, 18px) - var(--font-size-small, 14px)));font-size:var(--font-size-small, 14px);letter-spacing:.01em;line-height:var(--line-height-small, 18px);text-transform:none}.text-body-bold-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-body-bold-link{font-weight:600;text-decoration:underline}.text-subheader{--icon-size: var(--line-height-medium, 24px);--icon-vertical-align: calc(-1 * (var(--line-height-medium, 24px) - var(--font-size-medium, 16px)));font-size:var(--font-size-medium, 16px);letter-spacing:none;line-height:var(--line-height-medium, 24px);text-transform:none}.text-subheader:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-subheader-bold{--icon-size: var(--line-height-medium, 24px);--icon-vertical-align: calc(-1 * (var(--line-height-medium, 24px) - var(--font-size-medium, 16px)));font-size:var(--font-size-medium, 16px);letter-spacing:none;line-height:var(--line-height-medium, 24px);text-transform:none}.text-subheader-bold:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-subheader-bold{font-weight:600}.text-subheader-link{--icon-size: var(--line-height-medium, 24px);--icon-vertical-align: calc(-1 * (var(--line-height-medium, 24px) - var(--font-size-medium, 16px)));font-size:var(--font-size-medium, 16px);letter-spacing:none;line-height:var(--line-height-medium, 24px);text-transform:none}.text-subheader-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-subheader-link{text-decoration:underline}.text-subheader-bold-link{--icon-size: var(--line-height-medium, 24px);--icon-vertical-align: calc(-1 * (var(--line-height-medium, 24px) - var(--font-size-medium, 16px)));font-size:var(--font-size-medium, 16px);letter-spacing:none;line-height:var(--line-height-medium, 24px);text-transform:none}.text-subheader-bold-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-subheader-bold-link{font-weight:600;text-decoration:underline}.text-title{--icon-size: var(--line-height-large, 26px);--icon-vertical-align: calc(-1 * (var(--line-height-large, 26px) - var(--font-size-large, 20px)));font-size:var(--font-size-large, 20px);letter-spacing:none;line-height:var(--line-height-large, 26px);text-transform:none}.text-title:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-title-bold{--icon-size: var(--line-height-large, 26px);--icon-vertical-align: calc(-1 * (var(--line-height-large, 26px) - var(--font-size-large, 20px)));font-size:var(--font-size-large, 20px);letter-spacing:none;line-height:var(--line-height-large, 26px);text-transform:none}.text-title-bold:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-title-bold{font-weight:600}.text-title-link{--icon-size: var(--line-height-large, 26px);--icon-vertical-align: calc(-1 * (var(--line-height-large, 26px) - var(--font-size-large, 20px)));font-size:var(--font-size-large, 20px);letter-spacing:none;line-height:var(--line-height-large, 26px);text-transform:none}.text-title-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-title-link{text-decoration:underline}.text-title-bold-link{--icon-size: var(--line-height-large, 26px);--icon-vertical-align: calc(-1 * (var(--line-height-large, 26px) - var(--font-size-large, 20px)));font-size:var(--font-size-large, 20px);letter-spacing:none;line-height:var(--line-height-large, 26px);text-transform:none}.text-title-bold-link:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-title-bold-link{font-weight:600;text-decoration:underline}.text-headline{--icon-size: var(--line-height-xlarge, 32px);--icon-vertical-align: calc(-1 * (var(--line-height-xlarge, 32px) - var(--font-size-xlarge, 24px)));font-size:var(--font-size-xlarge, 24px);letter-spacing:none;line-height:var(--line-height-xlarge, 32px);text-transform:none}.text-headline:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-headline-bold{--icon-size: var(--line-height-xlarge, 32px);--icon-vertical-align: calc(-1 * (var(--line-height-xlarge, 32px) - var(--font-size-xlarge, 24px)));font-size:var(--font-size-xlarge, 24px);letter-spacing:none;line-height:var(--line-height-xlarge, 32px);text-transform:none}.text-headline-bold:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-headline-bold{font-weight:600}.text-display{--icon-size: var(--line-height-2xlarge, 48px);--icon-vertical-align: calc(-1 * (var(--line-height-2xlarge, 48px) - var(--font-size-2xlarge, 36px)));font-size:var(--font-size-2xlarge, 36px);letter-spacing:none;line-height:var(--line-height-2xlarge, 48px);text-transform:none}.text-display:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-display-bold{--icon-size: var(--line-height-2xlarge, 48px);--icon-vertical-align: calc(-1 * (var(--line-height-2xlarge, 48px) - var(--font-size-2xlarge, 36px)));font-size:var(--font-size-2xlarge, 36px);letter-spacing:none;line-height:var(--line-height-2xlarge, 48px);text-transform:none}.text-display-bold:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-display-bold{font-weight:600}.text-jumbo{--icon-size: var(--line-height-jumbo, 56px);--icon-vertical-align: calc(-1 * (var(--line-height-jumbo, 56px) - var(--font-size-jumbo, 48px)));font-size:var(--font-size-jumbo, 48px);letter-spacing:-0.01em;line-height:var(--line-height-jumbo, 56px);text-transform:none}.text-jumbo:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-jumbo-bold{--icon-size: var(--line-height-jumbo, 56px);--icon-vertical-align: calc(-1 * (var(--line-height-jumbo, 56px) - var(--font-size-jumbo, 48px)));font-size:var(--font-size-jumbo, 48px);letter-spacing:-0.01em;line-height:var(--line-height-jumbo, 56px);text-transform:none}.text-jumbo-bold:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-jumbo-bold{font-weight:600}.text-mega{--icon-size: var(--line-height-mega, 88px);--icon-vertical-align: calc(-1 * (var(--line-height-mega, 88px) - var(--font-size-mega, 72px)));font-size:var(--font-size-mega, 72px);letter-spacing:-0.01em;line-height:var(--line-height-mega, 88px);text-transform:none}.text-mega:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-mega-bold{--icon-size: var(--line-height-mega, 88px);--icon-vertical-align: calc(-1 * (var(--line-height-mega, 88px) - var(--font-size-mega, 72px)));font-size:var(--font-size-mega, 72px);letter-spacing:-0.01em;line-height:var(--line-height-mega, 88px);text-transform:none}.text-mega-bold:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.text-mega-bold{font-weight:600}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;src:local("IBM Plex Sans Bold"),local("IBMPlexSans-Bold"),url(../../static/media/IBMPlexSans-Bold.woff2) format("woff2"),url(../../static/media/IBMPlexSans-Bold.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;src:local("IBM Plex Sans Bold"),local("IBMPlexSans-Bold"),url(../../static/media/IBMPlexSans-Bold-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;src:local("IBM Plex Sans Bold"),local("IBMPlexSans-Bold"),url(../../static/media/IBMPlexSans-Bold-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;src:local("IBM Plex Sans Bold"),local("IBMPlexSans-Bold"),url(../../static/media/IBMPlexSans-Bold-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;src:local("IBM Plex Sans Bold"),local("IBMPlexSans-Bold"),url(../../static/media/IBMPlexSans-Bold-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;src:local("IBM Plex Sans Bold"),local("IBMPlexSans-Bold"),url(../../static/media/IBMPlexSans-Bold-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;src:local("IBM Plex Sans Bold"),local("IBMPlexSans-Bold"),url(../../static/media/IBMPlexSans-Bold-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:700;src:local("IBM Plex Sans Bold Italic"),local("IBMPlexSans-BoldItalic"),url(../../static/media/IBMPlexSans-BoldItalic.woff2) format("woff2"),url(../../static/media/IBMPlexSans-BoldItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:700;src:local("IBM Plex Sans Bold Italic"),local("IBMPlexSans-BoldItalic"),url(../../static/media/IBMPlexSans-BoldItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:700;src:local("IBM Plex Sans Bold Italic"),local("IBMPlexSans-BoldItalic"),url(../../static/media/IBMPlexSans-BoldItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:700;src:local("IBM Plex Sans Bold Italic"),local("IBMPlexSans-BoldItalic"),url(../../static/media/IBMPlexSans-BoldItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:700;src:local("IBM Plex Sans Bold Italic"),local("IBMPlexSans-BoldItalic"),url(../../static/media/IBMPlexSans-BoldItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:700;src:local("IBM Plex Sans Bold Italic"),local("IBMPlexSans-BoldItalic"),url(../../static/media/IBMPlexSans-BoldItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:700;src:local("IBM Plex Sans Bold Italic"),local("IBMPlexSans-BoldItalic"),url(../../static/media/IBMPlexSans-BoldItalic-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:200;src:local("IBM Plex Sans ExtLt"),local("IBMPlexSans-ExtLt"),url(../../static/media/IBMPlexSans-ExtraLight.woff2) format("woff2"),url(../../static/media/IBMPlexSans-ExtraLight.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:200;src:local("IBM Plex Sans ExtLt"),local("IBMPlexSans-ExtLt"),url(../../static/media/IBMPlexSans-ExtraLight-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:200;src:local("IBM Plex Sans ExtLt"),local("IBMPlexSans-ExtLt"),url(../../static/media/IBMPlexSans-ExtraLight-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:200;src:local("IBM Plex Sans ExtLt"),local("IBMPlexSans-ExtLt"),url(../../static/media/IBMPlexSans-ExtraLight-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:200;src:local("IBM Plex Sans ExtLt"),local("IBMPlexSans-ExtLt"),url(../../static/media/IBMPlexSans-ExtraLight-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:200;src:local("IBM Plex Sans ExtLt"),local("IBMPlexSans-ExtLt"),url(../../static/media/IBMPlexSans-ExtraLight-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:200;src:local("IBM Plex Sans ExtLt"),local("IBMPlexSans-ExtLt"),url(../../static/media/IBMPlexSans-ExtraLight-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:200;src:local("IBM Plex Sans ExtLt Italic"),local("IBMPlexSans-ExtLtItalic"),url(../../static/media/IBMPlexSans-ExtraLightItalic.woff2) format("woff2"),url(../../static/media/IBMPlexSans-ExtraLightItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:200;src:local("IBM Plex Sans ExtLt Italic"),local("IBMPlexSans-ExtLtItalic"),url(../../static/media/IBMPlexSans-ExtraLightItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:200;src:local("IBM Plex Sans ExtLt Italic"),local("IBMPlexSans-ExtLtItalic"),url(../../static/media/IBMPlexSans-ExtraLightItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:200;src:local("IBM Plex Sans ExtLt Italic"),local("IBMPlexSans-ExtLtItalic"),url(../../static/media/IBMPlexSans-ExtraLightItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:200;src:local("IBM Plex Sans ExtLt Italic"),local("IBMPlexSans-ExtLtItalic"),url(../../static/media/IBMPlexSans-ExtraLightItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:200;src:local("IBM Plex Sans ExtLt Italic"),local("IBMPlexSans-ExtLtItalic"),url(../../static/media/IBMPlexSans-ExtraLightItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:200;src:local("IBM Plex Sans ExtLt Italic"),local("IBMPlexSans-ExtLtItalic"),url(../../static/media/IBMPlexSans-ExtraLightItalic-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;src:local("IBM Plex Sans Italic"),local("IBMPlexSans-Italic"),url(../../static/media/IBMPlexSans-Italic.woff2) format("woff2"),url(../../static/media/IBMPlexSans-Italic.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;src:local("IBM Plex Sans Italic"),local("IBMPlexSans-Italic"),url(../../static/media/IBMPlexSans-Italic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;src:local("IBM Plex Sans Italic"),local("IBMPlexSans-Italic"),url(../../static/media/IBMPlexSans-Italic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;src:local("IBM Plex Sans Italic"),local("IBMPlexSans-Italic"),url(../../static/media/IBMPlexSans-Italic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;src:local("IBM Plex Sans Italic"),local("IBMPlexSans-Italic"),url(../../static/media/IBMPlexSans-Italic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;src:local("IBM Plex Sans Italic"),local("IBMPlexSans-Italic"),url(../../static/media/IBMPlexSans-Italic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;src:local("IBM Plex Sans Italic"),local("IBMPlexSans-Italic"),url(../../static/media/IBMPlexSans-Italic-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;src:local("IBM Plex Sans Light"),local("IBMPlexSans-Light"),url(../../static/media/IBMPlexSans-Light.woff2) format("woff2"),url(../../static/media/IBMPlexSans-Light.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;src:local("IBM Plex Sans Light"),local("IBMPlexSans-Light"),url(../../static/media/IBMPlexSans-Light-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;src:local("IBM Plex Sans Light"),local("IBMPlexSans-Light"),url(../../static/media/IBMPlexSans-Light-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;src:local("IBM Plex Sans Light"),local("IBMPlexSans-Light"),url(../../static/media/IBMPlexSans-Light-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;src:local("IBM Plex Sans Light"),local("IBMPlexSans-Light"),url(../../static/media/IBMPlexSans-Light-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;src:local("IBM Plex Sans Light"),local("IBMPlexSans-Light"),url(../../static/media/IBMPlexSans-Light-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;src:local("IBM Plex Sans Light"),local("IBMPlexSans-Light"),url(../../static/media/IBMPlexSans-Light-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:300;src:local("IBM Plex Sans Light Italic"),local("IBMPlexSans-LightItalic"),url(../../static/media/IBMPlexSans-LightItalic.woff2) format("woff2"),url(../../static/media/IBMPlexSans-LightItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:300;src:local("IBM Plex Sans Light Italic"),local("IBMPlexSans-LightItalic"),url(../../static/media/IBMPlexSans-LightItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:300;src:local("IBM Plex Sans Light Italic"),local("IBMPlexSans-LightItalic"),url(../../static/media/IBMPlexSans-LightItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:300;src:local("IBM Plex Sans Light Italic"),local("IBMPlexSans-LightItalic"),url(../../static/media/IBMPlexSans-LightItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:300;src:local("IBM Plex Sans Light Italic"),local("IBMPlexSans-LightItalic"),url(../../static/media/IBMPlexSans-LightItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:300;src:local("IBM Plex Sans Light Italic"),local("IBMPlexSans-LightItalic"),url(../../static/media/IBMPlexSans-LightItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:300;src:local("IBM Plex Sans Light Italic"),local("IBMPlexSans-LightItalic"),url(../../static/media/IBMPlexSans-LightItalic-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;src:local("IBM Plex Sans Medm"),local("IBMPlexSans-Medm"),url(../../static/media/IBMPlexSans-Medium.woff2) format("woff2"),url(../../static/media/IBMPlexSans-Medium.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;src:local("IBM Plex Sans Medm"),local("IBMPlexSans-Medm"),url(../../static/media/IBMPlexSans-Medium-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;src:local("IBM Plex Sans Medm"),local("IBMPlexSans-Medm"),url(../../static/media/IBMPlexSans-Medium-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;src:local("IBM Plex Sans Medm"),local("IBMPlexSans-Medm"),url(../../static/media/IBMPlexSans-Medium-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;src:local("IBM Plex Sans Medm"),local("IBMPlexSans-Medm"),url(../../static/media/IBMPlexSans-Medium-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;src:local("IBM Plex Sans Medm"),local("IBMPlexSans-Medm"),url(../../static/media/IBMPlexSans-Medium-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;src:local("IBM Plex Sans Medm"),local("IBMPlexSans-Medm"),url(../../static/media/IBMPlexSans-Medium-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:500;src:local("IBM Plex Sans Medm Italic"),local("IBMPlexSans-MedmItalic"),url(../../static/media/IBMPlexSans-MediumItalic.woff2) format("woff2"),url(../../static/media/IBMPlexSans-MediumItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:500;src:local("IBM Plex Sans Medm Italic"),local("IBMPlexSans-MedmItalic"),url(../../static/media/IBMPlexSans-MediumItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:500;src:local("IBM Plex Sans Medm Italic"),local("IBMPlexSans-MedmItalic"),url(../../static/media/IBMPlexSans-MediumItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:500;src:local("IBM Plex Sans Medm Italic"),local("IBMPlexSans-MedmItalic"),url(../../static/media/IBMPlexSans-MediumItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:500;src:local("IBM Plex Sans Medm Italic"),local("IBMPlexSans-MedmItalic"),url(../../static/media/IBMPlexSans-MediumItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:500;src:local("IBM Plex Sans Medm Italic"),local("IBMPlexSans-MedmItalic"),url(../../static/media/IBMPlexSans-MediumItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:500;src:local("IBM Plex Sans Medm Italic"),local("IBMPlexSans-MedmItalic"),url(../../static/media/IBMPlexSans-MediumItalic-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;src:local("IBM Plex Sans"),local("IBMPlexSans"),url(../../static/media/IBMPlexSans-Regular.woff2) format("woff2"),url(../../static/media/IBMPlexSans-Regular.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;src:local("IBM Plex Sans"),local("IBMPlexSans"),url(../../static/media/IBMPlexSans-Regular-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;src:local("IBM Plex Sans"),local("IBMPlexSans"),url(../../static/media/IBMPlexSans-Regular-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;src:local("IBM Plex Sans"),local("IBMPlexSans"),url(../../static/media/IBMPlexSans-Regular-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;src:local("IBM Plex Sans"),local("IBMPlexSans"),url(../../static/media/IBMPlexSans-Regular-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;src:local("IBM Plex Sans"),local("IBMPlexSans"),url(../../static/media/IBMPlexSans-Regular-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;src:local("IBM Plex Sans"),local("IBMPlexSans"),url(../../static/media/IBMPlexSans-Regular-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;src:local("IBM Plex Sans SmBld"),local("IBMPlexSans-SmBld"),url(../../static/media/IBMPlexSans-SemiBold.woff2) format("woff2"),url(../../static/media/IBMPlexSans-SemiBold.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;src:local("IBM Plex Sans SmBld"),local("IBMPlexSans-SmBld"),url(../../static/media/IBMPlexSans-SemiBold-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;src:local("IBM Plex Sans SmBld"),local("IBMPlexSans-SmBld"),url(../../static/media/IBMPlexSans-SemiBold-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;src:local("IBM Plex Sans SmBld"),local("IBMPlexSans-SmBld"),url(../../static/media/IBMPlexSans-SemiBold-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;src:local("IBM Plex Sans SmBld"),local("IBMPlexSans-SmBld"),url(../../static/media/IBMPlexSans-SemiBold-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;src:local("IBM Plex Sans SmBld"),local("IBMPlexSans-SmBld"),url(../../static/media/IBMPlexSans-SemiBold-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;src:local("IBM Plex Sans SmBld"),local("IBMPlexSans-SmBld"),url(../../static/media/IBMPlexSans-SemiBold-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:600;src:local("IBM Plex Sans SmBld Italic"),local("IBMPlexSans-SmBldItalic"),url(../../static/media/IBMPlexSans-SemiBoldItalic.woff2) format("woff2"),url(../../static/media/IBMPlexSans-SemiBoldItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:600;src:local("IBM Plex Sans SmBld Italic"),local("IBMPlexSans-SmBldItalic"),url(../../static/media/IBMPlexSans-SemiBoldItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:600;src:local("IBM Plex Sans SmBld Italic"),local("IBMPlexSans-SmBldItalic"),url(../../static/media/IBMPlexSans-SemiBoldItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:600;src:local("IBM Plex Sans SmBld Italic"),local("IBMPlexSans-SmBldItalic"),url(../../static/media/IBMPlexSans-SemiBoldItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:600;src:local("IBM Plex Sans SmBld Italic"),local("IBMPlexSans-SmBldItalic"),url(../../static/media/IBMPlexSans-SemiBoldItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:600;src:local("IBM Plex Sans SmBld Italic"),local("IBMPlexSans-SmBldItalic"),url(../../static/media/IBMPlexSans-SemiBoldItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:600;src:local("IBM Plex Sans SmBld Italic"),local("IBMPlexSans-SmBldItalic"),url(../../static/media/IBMPlexSans-SemiBoldItalic-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:450;src:local("IBM Plex Sans Text"),local("IBMPlexSans-Text"),url(../../static/media/IBMPlexSans-Text.woff2) format("woff2"),url(../../static/media/IBMPlexSans-Text.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:450;src:local("IBM Plex Sans Text"),local("IBMPlexSans-Text"),url(../../static/media/IBMPlexSans-Text-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:450;src:local("IBM Plex Sans Text"),local("IBMPlexSans-Text"),url(../../static/media/IBMPlexSans-Text-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:450;src:local("IBM Plex Sans Text"),local("IBMPlexSans-Text"),url(../../static/media/IBMPlexSans-Text-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:450;src:local("IBM Plex Sans Text"),local("IBMPlexSans-Text"),url(../../static/media/IBMPlexSans-Text-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:450;src:local("IBM Plex Sans Text"),local("IBMPlexSans-Text"),url(../../static/media/IBMPlexSans-Text-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:450;src:local("IBM Plex Sans Text"),local("IBMPlexSans-Text"),url(../../static/media/IBMPlexSans-Text-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:450;src:local("IBM Plex Sans Text Italic"),local("IBMPlexSans-TextItalic"),url(../../static/media/IBMPlexSans-TextItalic.woff2) format("woff2"),url(../../static/media/IBMPlexSans-TextItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:450;src:local("IBM Plex Sans Text Italic"),local("IBMPlexSans-TextItalic"),url(../../static/media/IBMPlexSans-TextItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:450;src:local("IBM Plex Sans Text Italic"),local("IBMPlexSans-TextItalic"),url(../../static/media/IBMPlexSans-TextItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:450;src:local("IBM Plex Sans Text Italic"),local("IBMPlexSans-TextItalic"),url(../../static/media/IBMPlexSans-TextItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:450;src:local("IBM Plex Sans Text Italic"),local("IBMPlexSans-TextItalic"),url(../../static/media/IBMPlexSans-TextItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:450;src:local("IBM Plex Sans Text Italic"),local("IBMPlexSans-TextItalic"),url(../../static/media/IBMPlexSans-TextItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:450;src:local("IBM Plex Sans Text Italic"),local("IBMPlexSans-TextItalic"),url(../../static/media/IBMPlexSans-TextItalic-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100;src:local("IBM Plex Sans Thin"),local("IBMPlexSans-Thin"),url(../../static/media/IBMPlexSans-Thin.woff2) format("woff2"),url(../../static/media/IBMPlexSans-Thin.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100;src:local("IBM Plex Sans Thin"),local("IBMPlexSans-Thin"),url(../../static/media/IBMPlexSans-Thin-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100;src:local("IBM Plex Sans Thin"),local("IBMPlexSans-Thin"),url(../../static/media/IBMPlexSans-Thin-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100;src:local("IBM Plex Sans Thin"),local("IBMPlexSans-Thin"),url(../../static/media/IBMPlexSans-Thin-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100;src:local("IBM Plex Sans Thin"),local("IBMPlexSans-Thin"),url(../../static/media/IBMPlexSans-Thin-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100;src:local("IBM Plex Sans Thin"),local("IBMPlexSans-Thin"),url(../../static/media/IBMPlexSans-Thin-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100;src:local("IBM Plex Sans Thin"),local("IBMPlexSans-Thin"),url(../../static/media/IBMPlexSans-Thin-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100;src:local("IBM Plex Sans Thin Italic"),local("IBMPlexSans-ThinItalic"),url(../../static/media/IBMPlexSans-ThinItalic.woff2) format("woff2"),url(../../static/media/IBMPlexSans-ThinItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100;src:local("IBM Plex Sans Thin Italic"),local("IBMPlexSans-ThinItalic"),url(../../static/media/IBMPlexSans-ThinItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100;src:local("IBM Plex Sans Thin Italic"),local("IBMPlexSans-ThinItalic"),url(../../static/media/IBMPlexSans-ThinItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100;src:local("IBM Plex Sans Thin Italic"),local("IBMPlexSans-ThinItalic"),url(../../static/media/IBMPlexSans-ThinItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100;src:local("IBM Plex Sans Thin Italic"),local("IBMPlexSans-ThinItalic"),url(../../static/media/IBMPlexSans-ThinItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100;src:local("IBM Plex Sans Thin Italic"),local("IBMPlexSans-ThinItalic"),url(../../static/media/IBMPlexSans-ThinItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100;src:local("IBM Plex Sans Thin Italic"),local("IBMPlexSans-ThinItalic"),url(../../static/media/IBMPlexSans-ThinItalic-Greek.woff2) format("woff2");unicode-range:U+0384-038A,U+038C,U+038E-03A1,U+03A3-03CE}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;src:local("IBM Plex Mono Bold"),local("IBMPlexMono-Bold"),url(../../static/media/IBMPlexMono-Bold.woff2) format("woff2"),url(../../static/media/IBMPlexMono-Bold.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;src:local("IBM Plex Mono Bold"),local("IBMPlexMono-Bold"),url(../../static/media/IBMPlexMono-Bold-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;src:local("IBM Plex Mono Bold"),local("IBMPlexMono-Bold"),url(../../static/media/IBMPlexMono-Bold-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;src:local("IBM Plex Mono Bold"),local("IBMPlexMono-Bold"),url(../../static/media/IBMPlexMono-Bold-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;src:local("IBM Plex Mono Bold"),local("IBMPlexMono-Bold"),url(../../static/media/IBMPlexMono-Bold-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;src:local("IBM Plex Mono Bold"),local("IBMPlexMono-Bold"),url(../../static/media/IBMPlexMono-Bold-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:700;src:local("IBM Plex Mono Bold Italic"),local("IBMPlexMono-BoldItalic"),url(../../static/media/IBMPlexMono-BoldItalic.woff2) format("woff2"),url(../../static/media/IBMPlexMono-BoldItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:700;src:local("IBM Plex Mono Bold Italic"),local("IBMPlexMono-BoldItalic"),url(../../static/media/IBMPlexMono-BoldItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:700;src:local("IBM Plex Mono Bold Italic"),local("IBMPlexMono-BoldItalic"),url(../../static/media/IBMPlexMono-BoldItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:700;src:local("IBM Plex Mono Bold Italic"),local("IBMPlexMono-BoldItalic"),url(../../static/media/IBMPlexMono-BoldItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:700;src:local("IBM Plex Mono Bold Italic"),local("IBMPlexMono-BoldItalic"),url(../../static/media/IBMPlexMono-BoldItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:700;src:local("IBM Plex Mono Bold Italic"),local("IBMPlexMono-BoldItalic"),url(../../static/media/IBMPlexMono-BoldItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:200;src:local("IBM Plex Mono ExtLt"),local("IBMPlexMono-ExtLt"),url(../../static/media/IBMPlexMono-ExtraLight.woff2) format("woff2"),url(../../static/media/IBMPlexMono-ExtraLight.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:200;src:local("IBM Plex Mono ExtLt"),local("IBMPlexMono-ExtLt"),url(../../static/media/IBMPlexMono-ExtraLight-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:200;src:local("IBM Plex Mono ExtLt"),local("IBMPlexMono-ExtLt"),url(../../static/media/IBMPlexMono-ExtraLight-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:200;src:local("IBM Plex Mono ExtLt"),local("IBMPlexMono-ExtLt"),url(../../static/media/IBMPlexMono-ExtraLight-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:200;src:local("IBM Plex Mono ExtLt"),local("IBMPlexMono-ExtLt"),url(../../static/media/IBMPlexMono-ExtraLight-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:200;src:local("IBM Plex Mono ExtLt"),local("IBMPlexMono-ExtLt"),url(../../static/media/IBMPlexMono-ExtraLight-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:200;src:local("IBM Plex Mono ExtLt Italic"),local("IBMPlexMono-ExtLtItalic"),url(../../static/media/IBMPlexMono-ExtraLightItalic.woff2) format("woff2"),url(../../static/media/IBMPlexMono-ExtraLightItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:200;src:local("IBM Plex Mono ExtLt Italic"),local("IBMPlexMono-ExtLtItalic"),url(../../static/media/IBMPlexMono-ExtraLightItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:200;src:local("IBM Plex Mono ExtLt Italic"),local("IBMPlexMono-ExtLtItalic"),url(../../static/media/IBMPlexMono-ExtraLightItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:200;src:local("IBM Plex Mono ExtLt Italic"),local("IBMPlexMono-ExtLtItalic"),url(../../static/media/IBMPlexMono-ExtraLightItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:200;src:local("IBM Plex Mono ExtLt Italic"),local("IBMPlexMono-ExtLtItalic"),url(../../static/media/IBMPlexMono-ExtraLightItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:200;src:local("IBM Plex Mono ExtLt Italic"),local("IBMPlexMono-ExtLtItalic"),url(../../static/media/IBMPlexMono-ExtraLightItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;src:local("IBM Plex Mono Italic"),local("IBMPlexMono-Italic"),url(../../static/media/IBMPlexMono-Italic.woff2) format("woff2"),url(../../static/media/IBMPlexMono-Italic.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;src:local("IBM Plex Mono Italic"),local("IBMPlexMono-Italic"),url(../../static/media/IBMPlexMono-Italic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;src:local("IBM Plex Mono Italic"),local("IBMPlexMono-Italic"),url(../../static/media/IBMPlexMono-Italic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;src:local("IBM Plex Mono Italic"),local("IBMPlexMono-Italic"),url(../../static/media/IBMPlexMono-Italic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;src:local("IBM Plex Mono Italic"),local("IBMPlexMono-Italic"),url(../../static/media/IBMPlexMono-Italic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;src:local("IBM Plex Mono Italic"),local("IBMPlexMono-Italic"),url(../../static/media/IBMPlexMono-Italic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;src:local("IBM Plex Mono Light"),local("IBMPlexMono-Light"),url(../../static/media/IBMPlexMono-Light.woff2) format("woff2"),url(../../static/media/IBMPlexMono-Light.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;src:local("IBM Plex Mono Light"),local("IBMPlexMono-Light"),url(../../static/media/IBMPlexMono-Light-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;src:local("IBM Plex Mono Light"),local("IBMPlexMono-Light"),url(../../static/media/IBMPlexMono-Light-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;src:local("IBM Plex Mono Light"),local("IBMPlexMono-Light"),url(../../static/media/IBMPlexMono-Light-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;src:local("IBM Plex Mono Light"),local("IBMPlexMono-Light"),url(../../static/media/IBMPlexMono-Light-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:300;src:local("IBM Plex Mono Light"),local("IBMPlexMono-Light"),url(../../static/media/IBMPlexMono-Light-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:300;src:local("IBM Plex Mono Light Italic"),local("IBMPlexMono-LightItalic"),url(../../static/media/IBMPlexMono-LightItalic.woff2) format("woff2"),url(../../static/media/IBMPlexMono-LightItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:300;src:local("IBM Plex Mono Light Italic"),local("IBMPlexMono-LightItalic"),url(../../static/media/IBMPlexMono-LightItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:300;src:local("IBM Plex Mono Light Italic"),local("IBMPlexMono-LightItalic"),url(../../static/media/IBMPlexMono-LightItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:300;src:local("IBM Plex Mono Light Italic"),local("IBMPlexMono-LightItalic"),url(../../static/media/IBMPlexMono-LightItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:300;src:local("IBM Plex Mono Light Italic"),local("IBMPlexMono-LightItalic"),url(../../static/media/IBMPlexMono-LightItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:300;src:local("IBM Plex Mono Light Italic"),local("IBMPlexMono-LightItalic"),url(../../static/media/IBMPlexMono-LightItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;src:local("IBM Plex Mono Medm"),local("IBMPlexMono-Medm"),url(../../static/media/IBMPlexMono-Medium.woff2) format("woff2"),url(../../static/media/IBMPlexMono-Medium.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;src:local("IBM Plex Mono Medm"),local("IBMPlexMono-Medm"),url(../../static/media/IBMPlexMono-Medium-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;src:local("IBM Plex Mono Medm"),local("IBMPlexMono-Medm"),url(../../static/media/IBMPlexMono-Medium-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;src:local("IBM Plex Mono Medm"),local("IBMPlexMono-Medm"),url(../../static/media/IBMPlexMono-Medium-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;src:local("IBM Plex Mono Medm"),local("IBMPlexMono-Medm"),url(../../static/media/IBMPlexMono-Medium-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;src:local("IBM Plex Mono Medm"),local("IBMPlexMono-Medm"),url(../../static/media/IBMPlexMono-Medium-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:500;src:local("IBM Plex Mono Medm Italic"),local("IBMPlexMono-MedmItalic"),url(../../static/media/IBMPlexMono-MediumItalic.woff2) format("woff2"),url(../../static/media/IBMPlexMono-MediumItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:500;src:local("IBM Plex Mono Medm Italic"),local("IBMPlexMono-MedmItalic"),url(../../static/media/IBMPlexMono-MediumItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:500;src:local("IBM Plex Mono Medm Italic"),local("IBMPlexMono-MedmItalic"),url(../../static/media/IBMPlexMono-MediumItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:500;src:local("IBM Plex Mono Medm Italic"),local("IBMPlexMono-MedmItalic"),url(../../static/media/IBMPlexMono-MediumItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:500;src:local("IBM Plex Mono Medm Italic"),local("IBMPlexMono-MedmItalic"),url(../../static/media/IBMPlexMono-MediumItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:500;src:local("IBM Plex Mono Medm Italic"),local("IBMPlexMono-MedmItalic"),url(../../static/media/IBMPlexMono-MediumItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;src:local("IBM Plex Mono"),local("IBMPlexMono"),url(../../static/media/IBMPlexMono-Regular.woff2) format("woff2"),url(../../static/media/IBMPlexMono-Regular.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;src:local("IBM Plex Mono"),local("IBMPlexMono"),url(../../static/media/IBMPlexMono-Regular-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;src:local("IBM Plex Mono"),local("IBMPlexMono"),url(../../static/media/IBMPlexMono-Regular-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;src:local("IBM Plex Mono"),local("IBMPlexMono"),url(../../static/media/IBMPlexMono-Regular-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;src:local("IBM Plex Mono"),local("IBMPlexMono"),url(../../static/media/IBMPlexMono-Regular-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;src:local("IBM Plex Mono"),local("IBMPlexMono"),url(../../static/media/IBMPlexMono-Regular-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;src:local("IBM Plex Mono SmBld"),local("IBMPlexMono-SmBld"),url(../../static/media/IBMPlexMono-SemiBold.woff2) format("woff2"),url(../../static/media/IBMPlexMono-SemiBold.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;src:local("IBM Plex Mono SmBld"),local("IBMPlexMono-SmBld"),url(../../static/media/IBMPlexMono-SemiBold-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;src:local("IBM Plex Mono SmBld"),local("IBMPlexMono-SmBld"),url(../../static/media/IBMPlexMono-SemiBold-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;src:local("IBM Plex Mono SmBld"),local("IBMPlexMono-SmBld"),url(../../static/media/IBMPlexMono-SemiBold-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;src:local("IBM Plex Mono SmBld"),local("IBMPlexMono-SmBld"),url(../../static/media/IBMPlexMono-SemiBold-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;src:local("IBM Plex Mono SmBld"),local("IBMPlexMono-SmBld"),url(../../static/media/IBMPlexMono-SemiBold-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:600;src:local("IBM Plex Mono SmBld Italic"),local("IBMPlexMono-SmBldItalic"),url(../../static/media/IBMPlexMono-SemiBoldItalic.woff2) format("woff2"),url(../../static/media/IBMPlexMono-SemiBoldItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:600;src:local("IBM Plex Mono SmBld Italic"),local("IBMPlexMono-SmBldItalic"),url(../../static/media/IBMPlexMono-SemiBoldItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:600;src:local("IBM Plex Mono SmBld Italic"),local("IBMPlexMono-SmBldItalic"),url(../../static/media/IBMPlexMono-SemiBoldItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:600;src:local("IBM Plex Mono SmBld Italic"),local("IBMPlexMono-SmBldItalic"),url(../../static/media/IBMPlexMono-SemiBoldItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:600;src:local("IBM Plex Mono SmBld Italic"),local("IBMPlexMono-SmBldItalic"),url(../../static/media/IBMPlexMono-SemiBoldItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:600;src:local("IBM Plex Mono SmBld Italic"),local("IBMPlexMono-SmBldItalic"),url(../../static/media/IBMPlexMono-SemiBoldItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:450;src:local("IBM Plex Mono Text"),local("IBMPlexMono-Text"),url(../../static/media/IBMPlexMono-Text.woff2) format("woff2"),url(../../static/media/IBMPlexMono-Text.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:450;src:local("IBM Plex Mono Text"),local("IBMPlexMono-Text"),url(../../static/media/IBMPlexMono-Text-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:450;src:local("IBM Plex Mono Text"),local("IBMPlexMono-Text"),url(../../static/media/IBMPlexMono-Text-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:450;src:local("IBM Plex Mono Text"),local("IBMPlexMono-Text"),url(../../static/media/IBMPlexMono-Text-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:450;src:local("IBM Plex Mono Text"),local("IBMPlexMono-Text"),url(../../static/media/IBMPlexMono-Text-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:450;src:local("IBM Plex Mono Text"),local("IBMPlexMono-Text"),url(../../static/media/IBMPlexMono-Text-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:450;src:local("IBM Plex Mono Text Italic"),local("IBMPlexMono-TextItalic"),url(../../static/media/IBMPlexMono-TextItalic.woff2) format("woff2"),url(../../static/media/IBMPlexMono-TextItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:450;src:local("IBM Plex Mono Text Italic"),local("IBMPlexMono-TextItalic"),url(../../static/media/IBMPlexMono-TextItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:450;src:local("IBM Plex Mono Text Italic"),local("IBMPlexMono-TextItalic"),url(../../static/media/IBMPlexMono-TextItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:450;src:local("IBM Plex Mono Text Italic"),local("IBMPlexMono-TextItalic"),url(../../static/media/IBMPlexMono-TextItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:450;src:local("IBM Plex Mono Text Italic"),local("IBMPlexMono-TextItalic"),url(../../static/media/IBMPlexMono-TextItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:450;src:local("IBM Plex Mono Text Italic"),local("IBMPlexMono-TextItalic"),url(../../static/media/IBMPlexMono-TextItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:100;src:local("IBM Plex Mono Thin"),local("IBMPlexMono-Thin"),url(../../static/media/IBMPlexMono-Thin.woff2) format("woff2"),url(../../static/media/IBMPlexMono-Thin.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:100;src:local("IBM Plex Mono Thin"),local("IBMPlexMono-Thin"),url(../../static/media/IBMPlexMono-Thin-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:100;src:local("IBM Plex Mono Thin"),local("IBMPlexMono-Thin"),url(../../static/media/IBMPlexMono-Thin-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:100;src:local("IBM Plex Mono Thin"),local("IBMPlexMono-Thin"),url(../../static/media/IBMPlexMono-Thin-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:100;src:local("IBM Plex Mono Thin"),local("IBMPlexMono-Thin"),url(../../static/media/IBMPlexMono-Thin-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:100;src:local("IBM Plex Mono Thin"),local("IBMPlexMono-Thin"),url(../../static/media/IBMPlexMono-Thin-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:100;src:local("IBM Plex Mono Thin Italic"),local("IBMPlexMono-ThinItalic"),url(../../static/media/IBMPlexMono-ThinItalic.woff2) format("woff2"),url(../../static/media/IBMPlexMono-ThinItalic.woff) format("woff")}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:100;src:local("IBM Plex Mono Thin Italic"),local("IBMPlexMono-ThinItalic"),url(../../static/media/IBMPlexMono-ThinItalic-Cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:100;src:local("IBM Plex Mono Thin Italic"),local("IBMPlexMono-ThinItalic"),url(../../static/media/IBMPlexMono-ThinItalic-Pi.woff2) format("woff2");unicode-range:U+0E3F,U+2032-2033,U+2070,U+2075-2079,U+2080-2081,U+2083,U+2085-2089,U+2113,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2190-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+EBE1-EBE7,U+ECE0,U+EFCC}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:100;src:local("IBM Plex Mono Thin Italic"),local("IBMPlexMono-ThinItalic"),url(../../static/media/IBMPlexMono-ThinItalic-Latin3.woff2) format("woff2");unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:100;src:local("IBM Plex Mono Thin Italic"),local("IBMPlexMono-ThinItalic"),url(../../static/media/IBMPlexMono-ThinItalic-Latin2.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF,U+FB01-FB02}@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:100;src:local("IBM Plex Mono Thin Italic"),local("IBMPlexMono-ThinItalic"),url(../../static/media/IBMPlexMono-ThinItalic-Latin1.woff2) format("woff2");unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00A3,U+00A4-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2212,U+FB01-FB02}@font-face{font-display:swap;font-family:"Mona Sans";font-stretch:75% 125%;font-style:normal;font-weight:200 900;size-adjust:98%;src:url(../../static/media/MonaSansVF.woff2) format("woff2")}@font-face{font-display:swap;font-family:"Mona Sans";font-stretch:75% 125%;font-style:italic;font-weight:200 900;size-adjust:98%;src:url(../../static/media/MonaSansVF-Italic.woff2) format("woff2")}@font-face{font-display:swap;font-family:"Mona Sans Mono";font-stretch:75% 125%;font-style:normal;font-weight:200 900;src:url(../../static/media/MonaSansMonoVF.woff2) format("woff2-variations")}.component{box-sizing:border-box;color:var(--color-secondary-content-default)}:where(body[data-ff~=UI_RIDGELINE_TOKEN_ADOPTION]) .component{color:var(--rl-neutral-text-default)}.component BUTTON{font-family:inherit;font-stretch:inherit}.component INPUT,.component SELECT,.component TEXTAREA{font-family:var(--rl-font-family-sans);font-stretch:inherit}[disabled] .component,.component[disabled]{opacity:.5;pointer-events:none;transition:opacity .2s ease-in-out}.overlay{color:#b9c2c2}body[data-ff~=UI_RIDGELINE_TOKEN_ADOPTION] .overlay{color:var(--rl-neutral-text-disabled)}.overlay{align-items:center;background-color:hsla(0,0%,103.3333333333%,.533);display:flex;inset:0 0 0 0;justify-content:center;position:absolute}*{box-sizing:border-box;font-family:var(--rl-font-family-sans)}HTML{color-scheme:light}HTML[data-color-scheme=dark]{color-scheme:dark}HTML[data-theme=refresh] CODE,HTML[data-theme=refresh] PRE,HTML[data-theme=refresh] KBD,HTML[data-theme=refresh] SAMP,HTML[data-theme=refresh] TT,HTML[data-theme=refresh] .monaco-editor,HTML[data-theme=refresh] .monaco-editor *{font-family:var(--rl-font-family-mono)}HTML,BODY{margin:0;padding:0}#root{background-color:#f2f2f2;display:grid;grid-template:1fr/1fr;height:100vh;overflow:hidden;width:100vw}:where(body[data-ff~=UI_RIDGELINE_TOKEN_ADOPTION]) #root{background-color:var(--rl-neutral-surface-subtle)}#root:has(.client-portal-responsive){display:block;height:auto;overflow:visible;width:auto}
.client-portal.application .vertical-gap{align-items:stretch;flex-direction:column;gap:1rem;justify-content:center;display:flex}.client-portal.application .vertical-gap-small{align-items:stretch;flex-direction:column;gap:.5rem;justify-content:center;display:flex}.client-portal.application .vertical-space-between{align-items:stretch;flex-direction:column;gap:0;justify-content:space-between;display:flex}.client-portal.application .horizontal-space-between{align-items:center;flex-direction:row;gap:0;justify-content:space-between;display:flex}.client-portal.application .no-gap{gap:0}.client-portal.application .bold{font-weight:600}.client-portal.application .indent{margin-left:12px}.client-portal.application .show-pointer{cursor:pointer}.client-portal.application .flex-gap{align-items:center;display:flex;gap:8px}.client-portal.application .flex-gap-large{align-items:center;display:flex;gap:16px}.client-portal.application .flex-gap-extra-large{align-items:center;display:flex;gap:24px}.client-portal.application .flex-gap-baseline{align-items:baseline;display:flex;gap:8px}.client-portal.application .tooltip-wrapped-text{max-width:30ch;overflow-wrap:break-word;text-align:center;white-space:pre-wrap;word-wrap:break-word}.client-portal.application .right-align-text{text-align:right}.client-portal.application .underline{text-decoration:underline}.client-portal.application .white-background{background-color:#fff}:where(body[data-ff~=UI_RIDGELINE_TOKEN_ADOPTION]) .client-portal.application .white-background{background-color:var(--rl-neutral-surface-default)}.client-portal.application .icon-indent{text-indent:4px}.client-portal.application .text-indent{text-indent:8px}.client-portal.application .gray{color:#677a7a}:where(body[data-ff~=UI_RIDGELINE_TOKEN_ADOPTION]) .client-portal.application .gray{color:var(--rl-neutral-text-secondary)}.client-portal.application .orange{color:#af6400}:where(body[data-ff~=UI_RIDGELINE_TOKEN_ADOPTION]) .client-portal.application .orange{color:var(--rl-warning-text)}.client-portal.application .blue{color:#0079d0}:where(body[data-ff~=UI_RIDGELINE_TOKEN_ADOPTION]) .client-portal.application .blue{color:var(--rl-info-icon)}.client-portal.application .purple{color:#a05cb2}:where(body[data-ff~=UI_RIDGELINE_TOKEN_ADOPTION]) .client-portal.application .purple{color:var(--rl-deprecated-categorical-text)}.client-portal.application .caption{--icon-size: var(--line-height-xsmall, 16px);--icon-vertical-align: calc(-1 * (var(--line-height-xsmall, 16px) - var(--font-size-xsmall, 12px)));font-size:var(--font-size-xsmall, 12px);letter-spacing:.03em;line-height:var(--line-height-xsmall, 16px);text-transform:none}.client-portal.application .caption:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.client-portal.application .small{--icon-size: var(--line-height-smallest, 14px);--icon-vertical-align: calc(-1 * (var(--line-height-smallest, 14px) - var(--font-size-smallest, 10px)));font-size:var(--font-size-smallest, 10px);letter-spacing:.03em;line-height:var(--line-height-smallest, 14px);text-transform:none}.client-portal.application .small:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.client-portal.application .multiline{white-space:pre-line}.client-portal.application .small-text{font-size:8px;letter-spacing:.03em;line-height:12px;text-transform:none}.client-portal.application .display-text{--icon-size: var(--line-height-2xlarge, 48px);--icon-vertical-align: calc(-1 * (var(--line-height-2xlarge, 48px) - var(--font-size-2xlarge, 36px)));font-size:var(--font-size-2xlarge, 36px);letter-spacing:none;line-height:var(--line-height-2xlarge, 48px);text-transform:none}.client-portal.application .display-text:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.client-portal.application .headline{--icon-size: var(--line-height-xlarge, 32px);--icon-vertical-align: calc(-1 * (var(--line-height-xlarge, 32px) - var(--font-size-xlarge, 24px)));font-size:var(--font-size-xlarge, 24px);letter-spacing:none;line-height:var(--line-height-xlarge, 32px);text-transform:none}.client-portal.application .headline:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.client-portal.application .subheader-text{--icon-size: var(--line-height-medium, 24px);--icon-vertical-align: calc(-1 * (var(--line-height-medium, 24px) - var(--font-size-medium, 16px)));font-size:var(--font-size-medium, 16px);letter-spacing:none;line-height:var(--line-height-medium, 24px);text-transform:none}.client-portal.application .subheader-text:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.client-portal.application .body{--icon-size: var(--line-height-small, 18px);--icon-vertical-align: calc(-1 * (var(--line-height-small, 18px) - var(--font-size-small, 14px)));font-size:var(--font-size-small, 14px);letter-spacing:.01em;line-height:var(--line-height-small, 18px);text-transform:none}.client-portal.application .body:where(HTML:not([data-theme]) *){font-feature-settings:"zero"}.client-portal.application .inherit-color{color:inherit}