/* ========================================= ASHIRAN THEME — LIGHT (cream, not white) Applies ONLY when the toggle says "light". Dark stays the default, so a returning reader sees no change until they ask for one. Every value below was solved against a contrast target, not picked by eye. The four grounds are all kept under 0.90 relative luminance on purpose: that is the band where a page starts to read as glaring white, and the brief was cream. TWO TRAPS, both measured on 2026-09-05 — do not "simplify" them away: 1. The accent cannot do both jobs on a light ground. The brand fill as TEXT on the deepest cream reaches only 2.28:1. That is why --ashi-gold-ink is dark (#A14A08, 5.01:1) while --ashi-gold-fill stays the vivid brand colour. Same for orange. Collapsing the pair back into one token makes accent text unreadable, and it will look fine on a dark laptop while it does it. 2. --ashi-gold here is set to the INK value, because the 124 pages that predate this file use --ashi-gold for text far more often than as a fill. A filled button going darker is survivable; unreadable accent text is not. Pages that want the vivid colour behind text should move to --ashi-gold-fill + --ashi-on-gold. 3. GOLD WAS RETIRED ON 2026-09-09 (Tarm). The palette is now 🟠 #F47B20 · 🟤 #3A2921 · 🤍 #F7F3ED. Every --ashi-gold-* NAME survives because 51 files read them; only the values moved. Read "gold" below as "the brand accent", which is orange. ========================================= */ :root[data-theme="light"] { /* === Black & Gold core === */ --ashi-gold: #A14A08; /* = --ashi-gold-ink, see trap 2 above */ --ashi-gold-bright: #9A4406; --ashi-gold-hover: #8F3C06; --ashi-gold-dim: rgba(175, 81, 8, 0.14); /* Light halves of the bare channels. See the note in theme-dark.css for why there are two. The fill channel is the SAME orange as dark on purpose -- a filled badge keeps its colour across themes and only its ink flips. The ink channel is #A14A08, the value solved to clear 4.5:1 on all four cream grounds. */ --ashi-gold-fill-rgb: 244, 123, 32; --ashi-gold-ink-rgb: 161, 74, 8; --ashi-gold-border: rgba(175, 81, 8, 0.42); --ashi-gold-grad: linear-gradient(135deg, #F47B20 0%, #F47B20 100%); --ashi-gold-grad-bright: linear-gradient(135deg, #FF9D4D 0%, #FF9D4D 100%); --ashi-gold-ink: #A14A08; /* 4.56:1 on --bg-darker */ --ashi-gold-fill: #F47B20; /* the brand gold, unchanged */ --ashi-gold-fill-bright: #FFB073; --ashi-gold-fill-deep: #B4560F; /* see theme-dark.css -- canvas text has to be handed its colour by JS */ --chart-ink: #2D201A; --chart-ink-dim: #634F45; --chart-grid: #E3DDD3; --chart-gold-ink: #A14A08; --accent-warning-ink: #7A5600; --accent-info-ink: #0A6076; --ashi-on-gold: #1D110C; /* 6.21:1 on --ashi-gold-fill */ /* === Orange accent === */ --ashi-orange: #A14A08; /* 4.54:1 on --bg-darker */ --ashi-orange-hover: #8F3C06; --ashi-orange-dim: rgba(175, 81, 8, 0.13); --ashi-orange-grad: linear-gradient(135deg, #F47B20 0%, #F47B20 100%); --ashi-orange-ink: #A14A08; --ashi-orange-fill: #F47B20; /* the brand orange, unchanged */ --ashi-on-orange: #1D110C; /* 6.60:1 on --ashi-orange-fill */ /* === Backgrounds — all four under 0.90 luminance === */ --bg-dark: #ECEAE8; /* page bg · lum 0.78 */ --bg-darker: #E2DFDB; /* hero/section bg · lum 0.70 · the worst case for ink */ /* 2026-09-09: the elevated surface was #FFFFFF -- pure white, luminance 1.000, on a palette whose brief was cream. The old comment said 0.89, which was never true of white; nobody re-measured after the value changed. It could not simply be dimmed: --bg-card already sat at 0.900, exactly the glare ceiling, so ANY surface brighter than the card had to break it. The ladder moves up one step instead -- elevated takes the brightest cream the palette already had, and the card steps down. No new colour invented, order preserved, every ground now under the ceiling. ink 13.39:1 / dim 6.53:1 on the card · 14.25 / 6.95 on elevated. */ --bg-card: #EEECEA; /* card surface · lum 0.842 */ --bg-card-elevated: #F4F3F2; /* hover/elevated · lum 0.900 (the ceiling itself) */ --bg-overlay: rgba(45, 32, 26, 0.42); /* === Frosted panels: solved against the ground each one actually sits on === */ --glass-panel: rgba(255, 253, 249, 0.72); /* -> #FAF5EA on --bg-dark */ --glass-panel-soft: rgba(255, 253, 249, 0.62); /* -> #F7F1E4 on --bg-dark */ --glass-result: rgba(239, 234, 225, 0.72); /* -> #F1E8D6 inside a panel */ --ink-on-glass-dim: rgba(45, 32, 26, 0.72); /* 5.87:1 on --glass-result */ /* long tail: the same panels, solved on cream */ --lg-glass-0d0f12-72: rgba(238, 227, 206, 0.72); --lg-glass-0f0f0f-72: rgba(238, 227, 206, 0.72); --lg-glass-0f1216-72: rgba(238, 227, 206, 0.72); --lg-glass-252525-72: rgba(238, 227, 206, 0.72); --lg-glass-212730-82: rgba(232, 222, 204, 0.82); --lg-glass-212832-78: rgba(232, 222, 204, 0.78); --lg-glass-282112-72: rgba(250, 234, 190, 0.72); --lg-glass-262116-72: rgba(250, 234, 190, 0.72); --lg-glass-1f2630-85: rgba(236, 227, 210, 0.85); --lg-glass-0d1117-62: rgba(255, 252, 243, 0.62); --lg-glass-1a1f2e-50: rgba(250, 246, 236, 0.5); --lg-glass-000000-20: rgba(120, 95, 45, 0.10); /* a warm tint, so the card header still reads as a separate strip */ --lg-ink-e6edf3-60: rgba(36, 30, 22, 0.66); --lg-ink-e6edf3-65: rgba(36, 30, 22, 0.70); --lg-ink-ffffff-80: rgba(36, 30, 22, 0.85); /* === Borders — faint on purpose (A10): 1.21:1 against the page === */ --border-faint: #E0DDD9; --border-default: #C9C4BD; --border-field: #867C6E; /* === Text — heading strongest, body a step below it (A8) === */ --text-main: #2D201A; /* 11.82:1 */ --text-muted: #4A3B32; /* 7.25:1 */ --text-dim: #634F45; /* 4.52:1 */ /* === Status colors === */ /* Profit/loss, the light half. Same pairing rule as theme-dark.css -- read the note there for why loss-red has to stay clear of the brand orange as well as of the green. The light theme is the harder one and it is worth saying why: on a cream ground BOTH colours have to be dark, so lightness is no longer available to separate them and only hue is left -- which is precisely what a red/green-blind reader cannot see. Every candidate scored 10-14 dE here against 21 on the dark theme, and no colour choice fixes that. It is fixed by the second cue: the arrow and the sign in front of the figure. Measured against the four cream grounds (--bg-dark, --bg-darker, --bg-card, elevated): green 5.64:1, red 5.43:1, 11.4 apart under both dichromacies, 26.6 from the orange. Previous values #015C46 / #B7271C measured 6.05 / 4.77 on the same four and sat 10.1 apart. So the green gives up a little headroom it did not need and the red gains real headroom, and the pair separates further. (The 5.44 / 4.53 written here before were against the tag tint and --bg-darker only, which is why they read lower.) */ --cur-green: #00614A; --cur-green-ink: #00614A; --cur-red: #A8231A; --cur-red-ink: #A8231A; --cur-warning: var(--ashi-orange); /* === Focus edge ring === Thicker than dark (1.75 vs 1.25) because a thin bright line disappears against cream while the same line reads clearly against near-black -- same ring, and it has to be measured per theme rather than shared. -spec goes DARKER than the fill here for the same reason. */ --edge-w: 1.75px; --edge-spec: #A8480A; --edge-rest: transparent; /* === Shadows — warm and shallow; a black shadow on cream reads as dirt === */ --shadow-card: 0 4px 14px rgba(90, 64, 16, 0.10); --shadow-card-hover: 0 10px 30px rgba(90, 64, 16, 0.14); --shadow-gold: 0 0 10px var(--ashi-gold-dim); /* === Legacy neutrals =================================================== The light counterpart of each legacy neutral. Chosen by RANK, not by eye: surfaces keep their order in the cream ladder, ink keeps its order in the text ladder. Ink darker than the dark-mode page ground is ink sitting on a bright fill, so it keeps its value -- a #000 label on a gold button must not turn grey when the theme flips. ==================================================================== */ /* surfaces */ --lg-bg-000000: #e5d9c2; /* 35 uses */ --lg-bg-0a0a0a: #e5d9c2; /* 12 uses */ --lg-bg-0d0d0d: #e5d9c2; /* 11 uses */ --lg-bg-111111: #ede4d2; /* 10 uses */ --lg-bg-141414: #ede4d2; /* 6 uses */ --lg-bg-1a1a1a: #ede4d2; /* 54 uses */ --lg-bg-222222: #f4eddf; /* 9 uses */ --lg-bg-262626: #f4eddf; /* 62 uses */ --lg-bg-2a2416: #f4eddf; /* 5 uses */ --lg-bg-2a2a2a: #f8f2e5; /* 16 uses */ --lg-bg-2c2c2c: #f8f2e5; /* 13 uses */ --lg-bg-333333: #f8f2e5; /* 5 uses */ /* ink */ --lg-ink-000000: #000000; /* 38 uses, unchanged: ink on a bright fill */ --lg-ink-0a0a0a: #0B0A08; /* 9 uses, unchanged: ink on a bright fill */ --lg-ink-111111: #13110E; /* 15 uses, unchanged: ink on a bright fill */ --lg-ink-1a1a1a: #1C1A15; /* 9 uses, unchanged: ink on a bright fill */ --lg-ink-333333: #38322A; /* 9 uses, unchanged: ink on a bright fill */ --lg-ink-666666: #6a5e4f; /* 7 uses */ --lg-ink-6b7280: #6a5e4f; /* 18 uses */ --lg-ink-888888: #6a5e4f; /* 35 uses */ --lg-ink-999999: #6a5e4f; /* 17 uses */ --lg-ink-9aa0a6: #6a5e4f; /* 6 uses */ --lg-ink-aaaaaa: #6a5e4f; /* 18 uses */ --lg-ink-bbbbbb: #4a4034; /* 17 uses */ --lg-ink-cccccc: #4a4034; /* 11 uses */ --lg-ink-cdd5e0: #4a4034; /* 5 uses */ --lg-ink-cfcfcf: #4a4034; /* 11 uses */ --lg-ink-d4d4d4: #4a4034; /* 12 uses */ --lg-ink-dddddd: #4a4034; /* 23 uses */ --lg-ink-e0e0e0: #241e16; /* 16 uses */ --lg-ink-e5e7eb: #241e16; /* 10 uses */ --lg-ink-e6e6e6: #241e16; /* 8 uses */ --lg-ink-e6edf3: #241e16; /* 54 uses */ --lg-ink-e8ecf3: #241e16; /* 5 uses */ --lg-ink-eeeeee: #241e16; /* 12 uses */ /* borders */ --lg-bd-2a2a2a: #c6b492; /* 50 uses */ --lg-bd-3a3a3a: #c6b492; /* 6 uses */ --lg-bd-555555: #dcd0b6; /* 9 uses */ --lg-bd-eeeeee: #dcd0b6; /* 7 uses */ /* ... second pass: 2-use floor, spread 36, gold family */ /* surfaces */ --lg-bg-0d0d10: #e5d9c2; /* 3 uses */ --lg-bg-0e0e0e: #e5d9c2; /* 3 uses */ --lg-bg-0f1c28: #ede4d2; /* 2 uses */ --lg-bg-13110a: #e5d9c2; /* 2 uses */ --lg-bg-15110a: #e5d9c2; /* 3 uses */ --lg-bg-15131a: #e5d9c2; /* 2 uses */ --lg-bg-151821: #ede4d2; /* 2 uses */ --lg-bg-161616: #e5d9c2; /* 4 uses */ --lg-bg-16161c: #ede4d2; /* 3 uses */ --lg-bg-181818: #ede4d2; /* 4 uses */ --lg-bg-1a1408: #e5d9c2; /* 4 uses */ --lg-bg-1e293b: #f4eddf; /* 12 uses */ --lg-bg-1f1a0d: #ede4d2; /* 2 uses */ --lg-bg-263238: #f4eddf; /* 4 uses */ --lg-bg-2a1f00: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-2c2416: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-374151: #f4eddf; /* 4 uses */ --lg-bg-3a1e1e: #ede4d2; /* 5 uses */ --lg-bg-3a2c0d: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-3a2f10: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-3a2f16: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-444444: #f4eddf; /* 4 uses */ --lg-bg-6c757d: #f4eddf; /* 2 uses */ --lg-bg-a88540: #CB7432; /* 10 uses, kept: already right in both themes */ --lg-bg-b8860b: #b8860b; /* 7 uses, kept: already right in both themes */ --lg-bg-b88a3a: #DA782D; /* 2 uses, kept: already right in both themes */ --lg-bg-b8941f: #F47310; /* 3 uses, kept: already right in both themes */ --lg-bg-d4b369: #EBA976; /* 4 uses, kept: already right in both themes */ --lg-bg-e0a800: #e0a800; /* 2 uses, kept: already right in both themes */ --lg-bg-e0bd75: #F5B481; /* 3 uses, kept: already right in both themes */ --lg-bg-e6c54a: #F9BA8A; /* 4 uses, kept: already right in both themes */ --lg-bg-e9c094: #e9c094; /* 6 uses, kept: already right in both themes */ --lg-bg-eeffff: #f8f2e5; /* 4 uses */ --lg-bg-f0f8ff: #f8f2e5; /* 4 uses */ --lg-bg-f1f1f1: #f4eddf; /* 3 uses */ --lg-bg-f3f4f6: #f8f2e5; /* 4 uses */ --lg-bg-f8f9fa: #f8f2e5; /* 3 uses */ --lg-bg-f9f9f9: #f8f2e5; /* 2 uses */ --lg-bg-ffeeff: #f4eddf; /* 4 uses */ --lg-bg-ffffdd: #ffffdd; /* 2 uses, kept: already right in both themes */ --lg-bg-ffffee: #f8f2e5; /* 4 uses */ /* ink */ --lg-ink-14161d: #181612; /* 3 uses, kept: already right in both themes */ --lg-ink-1a1305: #1a1305; /* 4 uses, kept: already right in both themes */ --lg-ink-1f2937: #2C2821; /* 4 uses, kept: already right in both themes */ --lg-ink-2a1f06: #2a1f06; /* 3 uses, kept: already right in both themes */ --lg-ink-777777: #6a5e4f; /* 4 uses */ --lg-ink-78909c: #6a5e4f; /* 2 uses */ --lg-ink-808080: #6a5e4f; /* 2 uses */ --lg-ink-858585: #6a5e4f; /* 3 uses */ --lg-ink-b0bec5: #6a5e4f; /* 2 uses */ --lg-ink-c8c3b6: #4a4034; /* 2 uses */ --lg-ink-c9a24a: #8F4F1E; /* 2 uses */ --lg-ink-c9ad74: #8F4F1E; /* 2 uses */ --lg-ink-cbd5e1: #4a4034; /* 3 uses */ --lg-ink-ce9178: #8F4F1E; /* 5 uses */ --lg-ink-cfd2d6: #4a4034; /* 4 uses */ --lg-ink-cfd8dc: #4a4034; /* 4 uses */ --lg-ink-d1d1d1: #4a4034; /* 4 uses */ --lg-ink-d4af37: #8F4F1E; /* 13 uses */ --lg-ink-dcdcaa: #8F4F1E; /* 7 uses */ --lg-ink-e0b96a: #8F4F1E; /* 10 uses */ --lg-ink-e8e8e8: #241e16; /* 4 uses */ --lg-ink-eceff1: #241e16; /* 4 uses */ --lg-ink-f0b66e: #8F4F1E; /* 2 uses */ --lg-ink-f0c040: #8F4F1E; /* 3 uses */ --lg-ink-f2f2f2: #241e16; /* 2 uses */ --lg-ink-f3f4f6: #241e16; /* 2 uses */ --lg-ink-fbbf24: #8F4F1E; /* 3 uses */ --lg-ink-ffca85: #8F4F1E; /* 2 uses */ --lg-ink-ffd600: #8F4F1E; /* 4 uses */ --lg-ink-ffd966: #8F4F1E; /* 3 uses */ /* borders */ --lg-bd-1f2937: #c6b492; /* 2 uses */ --lg-bd-242424: #c6b492; /* 2 uses */ --lg-bd-2a2a33: #c6b492; /* 3 uses */ --lg-bd-2a2d35: #c6b492; /* 3 uses */ --lg-bd-374151: #dcd0b6; /* 8 uses */ --lg-bd-37474f: #dcd0b6; /* 2 uses */ --lg-bd-4a3d16: #4a3d16; /* 2 uses, kept: already right in both themes */ --lg-bd-d3d3d3: #dcd0b6; /* 3 uses */ --lg-bd-d4af37: #8F4F1E; /* 12 uses */ --lg-bd-ffd600: #8F4F1E; /* 2 uses */ --lg-ink-8a8f98: #4a4034; /* 1 use, but it is the footer on every page */ /* ... second pass: 2-use floor, spread 36, gold family */ /* surfaces */ --lg-bg-0b0d10: #e5d9c2; /* 1 uses */ --lg-bg-0c0c0c: #e5d9c2; /* 1 uses */ --lg-bg-0d1117: #e5d9c2; /* 1 uses */ --lg-bg-0d1612: #e5d9c2; /* 1 uses */ --lg-bg-0d1c0d: #ede4d2; /* 1 uses */ --lg-bg-0f1115: #e5d9c2; /* 1 uses */ --lg-bg-12261a: #f4eddf; /* 1 uses */ --lg-bg-13361f: #f8f2e5; /* 1 uses */ --lg-bg-15130d: #e5d9c2; /* 1 uses */ --lg-bg-15151f: #e5d9c2; /* 1 uses */ --lg-bg-16181d: #ede4d2; /* 1 uses */ --lg-bg-161b22: #ede4d2; /* 1 uses */ --lg-bg-162024: #f4eddf; /* 1 uses */ --lg-bg-16240f: #f4eddf; /* 1 uses */ --lg-bg-16332f: #f8f2e5; /* 1 uses */ --lg-bg-191b19: #ede4d2; /* 1 uses */ --lg-bg-1a0f0f: #e5d9c2; /* 1 uses */ --lg-bg-1a1230: #ede4d2; /* 1 uses */ --lg-bg-1a1410: #e5d9c2; /* 1 uses */ --lg-bg-1a1f2e: #f4eddf; /* 1 uses */ --lg-bg-1a2733: #f4eddf; /* 1 uses */ --lg-bg-1a3a2c: #f8f2e5; /* 1 uses */ --lg-bg-1b1e24: #f4eddf; /* 1 uses */ --lg-bg-1e3a24: #f8f2e5; /* 1 uses */ --lg-bg-1f1a0e: #ede4d2; /* 1 uses */ --lg-bg-1f1a10: #ede4d2; /* 1 uses */ --lg-bg-202020: #f4eddf; /* 1 uses */ --lg-bg-2a1518: #ede4d2; /* 1 uses */ --lg-bg-2a230f: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-2a2a3a: #f8f2e5; /* 1 uses */ --lg-bg-2b2416: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-2b2b2b: #f4eddf; /* 1 uses */ --lg-bg-3a1717: #f4eddf; /* 1 uses */ --lg-bg-3a2616: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-3a2e0f: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-3a3015: #F7EDD4; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-5c4818: #F0E2BE; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-8b5a2b: #E9D3B0; /* was kept dark by mistake: this is a SURFACE, not a gold accent */ --lg-bg-c0c0c0: #f8f2e5; /* 1 uses */ --lg-bg-cd7f32: #cd7f32; /* 1 uses, kept: already right in both themes */ --lg-bg-d1a370: #d1a370; /* 1 uses, kept: already right in both themes */ --lg-bg-d4edda: #f8f2e5; /* 1 uses */ --lg-bg-d8b878: #ECAF80; /* 1 uses, kept: already right in both themes */ --lg-bg-e3c878: #F8BE92; /* 1 uses, kept: already right in both themes */ --lg-bg-f4e3b2: #f4e3b2; /* 1 uses, kept: already right in both themes */ --lg-bg-fafbfc: #f8f2e5; /* 1 uses */ /* ink */ --lg-ink-00e676: #006c37; /* 4 uses */ --lg-ink-00ff00: #007000; /* 1 uses */ --lg-ink-06c755: #046e2f; /* 2 uses */ --lg-ink-155724: #155724; /* 1 uses, kept: already right in both themes */ --lg-ink-16181d: #1A1814; /* 1 uses, kept: already right in both themes */ --lg-ink-1a1f2e: #221F1A; /* 1 uses, kept: already right in both themes */ --lg-ink-212529: #28241E; /* 1 uses, kept: already right in both themes */ --lg-ink-241a06: #241a06; /* 1 uses, kept: already right in both themes */ --lg-ink-2a1f05: #2a1f05; /* 1 uses, kept: already right in both themes */ --lg-ink-2bb673: #196c44; /* 1 uses */ --lg-ink-34d399: #176b4d; /* 1 uses */ --lg-ink-3b82f6: #0a55d1; /* 1 uses */ --lg-ink-3fd6ae: #166a54; /* 1 uses */ --lg-ink-4285f4: #0d57d3; /* 2 uses */ --lg-ink-4ec9b0: #20685a; /* 4 uses */ --lg-ink-4fc1ff: #006297; /* 5 uses */ --lg-ink-4fc3f7: #06638d; /* 5 uses */ --lg-ink-5d4037: #5d4037; /* 1 uses, kept: already right in both themes */ --lg-ink-5ed18a: #1f6d3c; /* 2 uses */ --lg-ink-60a5fa: #0659c0; /* 1 uses */ --lg-ink-673de6: #6338e5; /* 1 uses, kept: already right in both themes */ --lg-ink-6a9955: #48683a; /* 5 uses */ --lg-ink-6c6c79: #6a5e4f; /* 1 uses */ --lg-ink-6ed18a: #226b36; /* 6 uses */ --lg-ink-6ed1c4: #226a61; /* 1 uses */ --lg-ink-6f6f6f: #6a5e4f; /* 1 uses */ --lg-ink-77aa99: #40665a; /* 1 uses */ --lg-ink-7ec1f0: #12629b; /* 5 uses */ --lg-ink-7ef0a0: #0c6c29; /* 2 uses */ --lg-ink-7fd1a0: #266941; /* 1 uses */ --lg-ink-8fe0ae: #1e6c3b; /* 2 uses */ --lg-ink-98a1b7: #6a5e4f; /* 1 uses */ --lg-ink-99bbbb: #4a4034; /* 1 uses */ --lg-ink-9a8050: #8F4F1E; /* 1 uses */ --lg-ink-9aa0a8: #6a5e4f; /* 1 uses */ --lg-ink-9aa4b2: #6a5e4f; /* 1 uses */ --lg-ink-9aa6b2: #4a4034; /* 1 uses */ --lg-ink-9be07a: #336b19; /* 1 uses */ --lg-ink-9cdcfe: #02659a; /* 5 uses */ --lg-ink-9da7b3: #4a4034; /* 1 uses */ --lg-ink-9eb8d4: #665C4D; /* 1 uses */ --lg-ink-9ecbff: #005ac1; /* 2 uses */ --lg-ink-9eeeb8: #136b2f; /* 2 uses */ --lg-ink-a6afc7: #4a4034; /* 1 uses */ --lg-ink-a78bfa: #602ff6; /* 1 uses */ --lg-ink-a7e9c4: #1b6c3f; /* 1 uses */ --lg-ink-b5cea8: #49663a; /* 5 uses */ --lg-ink-b9b4a8: #4a4034; /* 1 uses */ --lg-ink-c084fc: #8007f9; /* 2 uses */ --lg-ink-c586c0: #8d4487; /* 5 uses */ --lg-ink-c5c7d1: #241e16; /* 1 uses */ --lg-ink-c990f0: #8d1ed9; /* 1 uses */ --lg-ink-cbd3de: #241e16; /* 1 uses */ --lg-ink-d8985a: #8F4F1E; /* 1 uses */ --lg-ink-dc3545: #b9202f; /* 6 uses */ --lg-ink-e0bd77: #8F4F1E; /* 1 uses */ --lg-ink-e0c074: #8F4F1E; /* 1 uses */ --lg-ink-e0c483: #8F4F1E; /* 1 uses */ --lg-ink-e2924b: #8F4F1E; /* 1 uses */ --lg-ink-e5544b: #b5231a; /* 1 uses */ --lg-ink-e8a0aa: #b02b3d; /* 1 uses */ --lg-ink-e8d18a: #8F4F1E; /* 1 uses */ --lg-ink-ffffff: #241e16; --lg-glass-141218-55: rgba(238, 227, 206, 0.72); --lg-ink-e8e8ec: #241e16; /* 1 uses */ --lg-ink-ef4444: #bc1010; /* 2 uses */ --lg-ink-f08080: #bc1616; /* 9 uses */ --lg-ink-f08a8a: #be1818; /* 2 uses */ --lg-ink-f0a8a8: #bb2020; /* 1 uses */ --lg-ink-f0c9c4: #a9392b; /* 1 uses */ --lg-ink-f0d77a: #8F4F1E; /* 1 uses */ --lg-ink-f0ecdf: #241e16; /* 1 uses */ --lg-ink-f4f1e8: #241e16; /* 1 uses */ --lg-ink-f59e0b: #8F4F1E; /* 1 uses */ --lg-ink-f87171: #c20909; /* 2 uses */ --lg-ink-fc404d: #bf0310; /* 1 uses */ --lg-ink-fca5a5: #bf0606; /* 2 uses */ --lg-ink-fcd34d: #8F4F1E; /* 1 uses */ --lg-ink-fd5b5b: #c20303; /* 2 uses */ --lg-ink-fecaca: #c00404; /* 4 uses */ --lg-ink-ff5252: #c30000; /* 3 uses */ --lg-ink-ff6b6b: #c20000; /* 1 uses */ --lg-ink-ff9aa6: #c30018; /* 1 uses */ --lg-ink-ffd9a0: #8F4F1E; /* 1 uses */ --lg-ink-fff3b0: #8F4F1E; /* 1 uses */ /* borders */ --lg-bd-00e676: #006c37; /* 1 uses */ --lg-bd-10b981: #096949; /* 1 uses */ --lg-bd-1f7a4a: #1b6a40; /* 1 uses, kept: already right in both themes */ --lg-bd-29b6f6: #06648f; /* 2 uses */ --lg-bd-2a3a3f: #c6b492; /* 1 uses */ --lg-bd-2a5c2a: #2a5c2a; /* 1 uses, kept: already right in both themes */ --lg-bd-2c4a66: #5A4337; /* 2 uses, kept: already right in both themes */ --lg-bd-2c5743: #2c5743; /* 1 uses, kept: already right in both themes */ --lg-bd-2c5780: #2c5780; /* 2 uses, kept: already right in both themes */ --lg-bd-2c6b40: #2c6b40; /* 1 uses, kept: already right in both themes */ --lg-bd-2f6b45: #2f6b45; /* 2 uses, kept: already right in both themes */ --lg-bd-3a3015: #3a3015; /* 1 uses, kept: already right in both themes */ --lg-bd-3a3a44: #c6b492; /* 1 uses */ --lg-bd-3d5a2c: #3d5a2c; /* 1 uses, kept: already right in both themes */ --lg-bd-4a3c14: #4a3c14; /* 1 uses, kept: already right in both themes */ --lg-bd-4caf50: #2f6c31; /* 3 uses */ --lg-bd-4fc3f7: #06638d; /* 5 uses */ --lg-bd-5a3a1a: #8F4F1E; /* 1 uses */ --lg-bd-5a4a1c: #8F4F1E; /* 1 uses */ --lg-bd-5d3a00: #8F4F1E; /* 1 uses */ --lg-bd-6b2323: #dcd0b6; /* 1 uses */ --lg-bd-6b4a30: #8F4F1E; /* 1 uses */ --lg-bd-6b5523: #8F4F1E; /* 1 uses */ --lg-bd-7a3540: #7a3540; /* 1 uses, kept: already right in both themes */ --lg-bd-8b1a1a: #8b1a1a; /* 1 uses, kept: already right in both themes */ --lg-bd-9c27b0: #9c27b0; /* 1 uses, kept: already right in both themes */ --lg-bd-a855f7: #830cf3; /* 1 uses */ --lg-bd-d0d7de: #dcd0b6; /* 1 uses */ --lg-bd-dc2626: #bb1e1e; /* 1 uses */ --lg-bd-dc3545: #b9202f; /* 1 uses */ --lg-bd-ef4444: #bc1010; /* 2 uses */ --lg-bd-ff4d5e: #c30013; /* 1 uses */ --lg-bd-ff5252: #c30000; /* 1 uses */ --lg-bd-ff9800: #8F4F1E; /* 1 uses */ --lg-bd-ffc107: #8F4F1E; /* 1 uses */ /* === Ink on a surface the theme does not own =========================== The promo topbar takes its background from ashiads/context_processors.py (and from ads_bg_color in the database), so it is dark in BOTH themes. Text on it must therefore be fixed too: point it at a theme token and it flips to a cream-mode ink over a background that never moved, which is how #241e16 ended up on #0b0d10 at 1.18:1. ==================================================================== */ --fixed-dark-ink: #F7F3ED; --fixed-dark-ink-dim: #E4DCD0; --fixed-dark-ink-muted: #A39785; --fixed-dark-gold: #F47B20; --fixed-dark-gold-bright: #FA9242; /* ... rgb() pass: colours written as rgb(), not hex */ --lg-bd-00301c: #c6b492; --lg-bd-0066ff: #dcd0b6; --lg-bd-00a35f: #dcd0b6; --lg-bd-32ffa9: #dcd0b6; --lg-bd-ffaf3c: #dcd0b6; --lg-bd-ffffff: #dcd0b6; --lg-bg-011404: #e5d9c2; --lg-bg-021b02: #e5d9c2; --lg-bg-051b00: #e5d9c2; --lg-bg-131722: #e5d9c2; --lg-bg-1e191e: #e5d9c2; --lg-bg-21261f: #e5d9c2; --lg-bg-232323: #e5d9c2; --lg-bg-232920: #e5d9c2; --lg-bg-272727: #e5d9c2; --lg-bg-282328: #e5d9c2; --lg-bg-464646: #ede4d2; --lg-bg-757575: #f8f2e5; --lg-bg-c4c4c4: #D2C1B8; --lg-bg-c9c9c9: #D6C6BE; --lg-bg-ebebeb: #F1EAE6; --lg-bg-f0f0f0: #F5EFEC; --lg-bg-f3f3f3: #F7F2F0; --lg-bg-f5fff0: #f5fff0; --lg-bg-f8fff5: #f8fff5; --lg-bg-fdfffb: #fdfffb; --lg-bg-ffaf3c: #ffaf3c; --lg-bg-ffffff: #FFFFFF; --lg-ink-00301c: #00301c; --lg-ink-00472a: #00472a; --lg-ink-005f37: #005f37; --lg-ink-006139: #006139; --lg-ink-007451: #006a4a; --lg-ink-00ffaa: #006b47; --lg-ink-011404: #011404; --lg-ink-025332: #025332; --lg-ink-02ff96: #006d40; --lg-ink-2e2e2e: #322D26; --lg-ink-32ffa9: #006a3e; --lg-ink-37e1ff: #006779; --lg-ink-3fff3f: #006d00; --lg-ink-4b4b4b: #6a5e4f; --lg-ink-4fffb6: #006e40; --lg-ink-62a1ff: #0056d7; --lg-ink-636363: #6a5e4f; --lg-ink-696969: #6a5e4f; --lg-ink-86ffcd: #006c40; --lg-ink-e76eff: #a000c0; --lg-ink-ed92ff: #a000c0; --lg-ink-f3f3f3: #241e16; --lg-ink-ff3751: #c10019; --lg-ink-ff3f3f: #be0000; --lg-ink-ff6565: #c10000; --lg-ink-ff8484: #c10000; --lg-ink-ff9500: #8F4F1E; --lg-ink-ffac4d: #8F4F1E; --lg-ink-ffaf3c: #8F4F1E; --lg-ink-ffe600: #8F4F1E; color-scheme: light; } /* ========================================================================= Bootstrap colour utilities, corrected for light mode ONLY. These are CLASS NAMES in the markup, not colour literals, so the palette sweep could never reach them: .text-muted is 675 uses across 56 templates, .text-white 161, .bg-dark 111. Bootstrap hardcodes them for a white page -- .text-muted is #6c757d and .bg-dark is #212529 -- so on the cream ground .text-muted lands at 3.67:1 and every .bg-dark block stays a dark rectangle with cream-mode ink inside it. Everything here is scoped to [data-theme="light"] on purpose: dark mode is what every reader currently sees, and it must not move by a single pixel. !important is required, not lazy: Bootstrap ships these as !important utilities, so a plain declaration loses to them. ========================================================================= */ /* --text-dim -> --text-muted on 2026-09-09, to stay in step with the unscoped rule theme.css now carries. This selector is (0,3,0) and would otherwise keep winning here, leaving cream at 5.80:1 while dark went to 10.17 -- the two themes quietly disagreeing about how loud the body of a card should be. 8.08:1 on cream. */ :root[data-theme="light"] .text-muted { color: var(--text-muted) !important; } :root[data-theme="light"] .text-white { color: var(--text-main) !important; } :root[data-theme="light"] .text-white-50 { color: var(--text-muted) !important; } :root[data-theme="light"] .text-black-50 { color: var(--text-muted) !important; } :root[data-theme="light"] .bg-dark { background-color: var(--bg-card) !important; color: var(--text-main) !important; } /* .text-light is the one this block forgot, and it was the most expensive omission: 93 uses, one of which wraps the body of every blog article (
). Bootstrap ships it as #f8f9fa, so in light mode the whole text of every article rendered at 1.11:1 -- visible only by selecting it. Tarm found it on his phone; the five pages measured before shipping did not include an article, which is the actual defect here. */ :root[data-theme="light"] .text-light { color: var(--text-main) !important; } /* Two Bootstrap accents are bright-on-dark by design and collapse on cream. Solved against the DEEPEST cream ground, not the card -- solving against the card is how 25 teal blocks were left at 3.99:1 during the palette sweep: .text-warning #ffc107 10.23:1 dark -> 1.40:1 light (62 uses) .text-info #0dcaf0 8.51:1 dark -> 1.68:1 light (33 uses) The other four (.text-danger .text-success .text-primary .text-secondary) measure ~3.7:1 in BOTH themes -- equally imperfect before and after, so they are not this change's business. */ :root[data-theme="light"] .text-warning { color: var(--accent-warning-ink) !important; } :root[data-theme="light"] .text-info { color: var(--accent-info-ink) !important; } /* Same family, same buried assumption: a dark surface that light mode takes away. */ :root[data-theme="light"] .table-dark { --bs-table-bg: var(--bg-card); --bs-table-color: var(--text-main); --bs-table-border-color: var(--border-default); color: var(--text-main) !important; } :root[data-theme="light"] .navbar-dark .navbar-nav .nav-link { color: var(--text-dim) !important; } :root[data-theme="light"] .navbar-dark .navbar-nav .nav-link:hover, :root[data-theme="light"] .navbar-dark .navbar-nav .nav-link.active { color: var(--text-main) !important; } :root[data-theme="light"] .navbar-dark .navbar-brand { color: var(--text-main) !important; } /* ...except where .text-white sits ON a fill that stays dark or saturated in light mode. A label on a gold button, a LINE button or a coloured badge is white in both themes; darkening it is the same pairing mistake in reverse. */ :root[data-theme="light"] .btn.text-white, :root[data-theme="light"] .badge.text-white, :root[data-theme="light"] .btn-social, :root[data-theme="light"] .btn-social .text-white, :root[data-theme="light"] .btn-gold-action, :root[data-theme="light"] .btn-gold-action .text-white, :root[data-theme="light"] [class*="bg-"] > .text-white, :root[data-theme="light"] .btn.text-light, :root[data-theme="light"] .badge.text-light, :root[data-theme="light"] .btn-social .text-light, :root[data-theme="light"] [class*="bg-"] > .text-light { color: #ffffff !important; } /* .btn-gold-cta used to be listed in the exception above, and had to be: its fill was var(--ashi-gold), which light mode turns into the INK (#765B29 then, #A14A08 since the palette change), so it really was a dark brown rectangle and white really was the readable answer. Its fill is now --ashi-gold-fill (#F47B20 in both themes since 2026-09-09), and on that fill, white measures 2.73:1 while the button's own #111111 measures 6.92:1. The rule outlived the reason for it -- the same shape as the FOUC guard that deleted a stored 'light' because the toggle used to be hidden. Measured on /login/ and /register/ before removing it. */ /* ...and one more turn of the same screw: .btn-social is not always a saturated fill. The Google button is white in BOTH themes by Google's own branding, so forcing its label white makes it white-on-white -- measured at 1.00:1 on /login/. Its ink token is already the same hex in both palettes; it just needs to outrank the blanket rule above. */ :root[data-theme="light"] .btn-social.btn-google { color: var(--lg-ink-1f2937) !important; } /* .bg-dark is the ONE fill light mode neutralises instead of keeping, which makes it the one place the white-ink exception above must not reach. Two rules of mine were contradicting: .bg-dark turned the surface cream, .badge.text-white kept the ink white, and the tag links under every article came out white-on-cream at 1.16:1. Same pairing mistake as converting an ink without its surface -- only inverted, and invisible in dark mode either way. Measured on prod: .bg-dark is BOTH a 358x154 comment panel and 13 small chips on one page, so neither 'keep it dark' nor 'flip only the surface' is right; the pair has to move together. */ :root[data-theme="light"] .bg-dark .text-white, :root[data-theme="light"] .bg-dark .text-light, :root[data-theme="light"] .bg-dark.text-white, :root[data-theme="light"] .bg-dark.text-light, :root[data-theme="light"] .badge.bg-dark, :root[data-theme="light"] .badge.bg-dark.text-white, :root[data-theme="light"] .badge.bg-dark.text-light { color: var(--text-main) !important; } /* ============================================================================ PAGE-LOCAL ALIASES -- the light half of names the templates invented. 60-odd templates open with their own `:root { --card-bg:#252525; --ashi-card:#1e1e1e; ... }`. Those are plain :root, specificity (0,1,0). This selector is (0,2,0), so it wins wherever it names the same token -- no template edit, and nothing here can reach dark mode, because dark carries no data-theme at all. Measured 2026-09-05: 134 such names across 356 declarations; the ones below are every name whose dark value has a single unambiguous role. Deliberately NOT listed: --bg, --bg2, --txt, --mut, --ash-bg, --ash-card. Each is declared with two different meanings in different files (e.g. --bg is #121212 on one page and the already-light #F1ECDE on another), so one answer here would be wrong on one of them. ============================================================================ */ :root[data-theme="light"] { --dark-bg: var(--bg-dark); --bg-main: var(--bg-dark); --bg3: var(--bg-darker); --ashi-bg: var(--bg-dark); --ashiran-bg: var(--bg-dark); --ea-bg: var(--bg-dark); --hub-bg: var(--bg-dark); --smc-bg: var(--bg-dark); --card-bg: var(--bg-card); --ashi-card: var(--bg-card); --ashiran-card: var(--bg-card); --ea-panel: var(--bg-card); --hub-panel: var(--bg-card); --smc-panel: var(--bg-card); --bg-lighter: var(--bg-card-elevated); --ea-panel-2: var(--bg-card-elevated); --hub-panel-2: var(--bg-card-elevated); --smc-panel-2: var(--bg-card-elevated); --ashi-text: #F7F3ED; --ashiran-text: #F7F3ED; --ash-text: #F7F3ED; --ea-text: #F7F3ED; --hub-text: #F7F3ED; --smc-text: #F7F3ED; --ashi-sub: #A39785; --ashiran-text-muted: #A39785; --ash-muted: #A39785; --ea-text-dim: #A39785; --hub-text-dim: #A39785; --smc-text-dim: #A39785; --ashi-border: var(--border-default); --ashiran-border: var(--border-default); --ash-border: var(--border-default); --ea-border: var(--border-default); --hub-border: var(--border-default); --smc-border: var(--border-default); --ashi-line: var(--border-default); /* Gold splits by ROLE, not by name. These three are only ever written as ink (measured: 16 `color`/`border-bottom` declarations, zero fills), so they can flip whole. --gold / --ashiran-gold / --ash-gold / --gold-primary CANNOT: each is also a badge fill carrying hardcoded #121212 ink, and darkening the fill would leave near-black on dark brown. Those get a --gold-fill sibling in the templates instead. */ --ashi-gold-light: var(--lg-ink-d4af37); --ashiran-gold-light: var(--lg-ink-d4af37); --gold-light: var(--lg-ink-d4af37); /* The forex calendar's own status colours. Pure ink and border-left, no fills (checked: 2 `color` + 2 `border-left-color` each). They were readable on the dark glass panel and stopped being readable the moment v3.848 turned that panel cream -- measured on prod at 2.06:1 (green) and 3.27:1 (red). Same pairing rule, and I caused this half of it. */ --ashi-green: var(--lg-ink-00e676); /* #006c37 -- 6.04:1 on --glass-panel */ --ashi-red: var(--lg-ink-ff5252); /* #c30000 -- 5.82:1 on --glass-panel */ --ashi-grey: var(--border-default); /* border-left only, never ink */ /* The SMC zone map's semantics. Same story as the calendar: bright hues chosen to sit on a dark chart, now on a 15%-tint over cream. Measured on prod /en/forex/live-smc-zones/ at 1.52-2.59:1 -- the Thai page renders empty without live zones, which is why only the EN one showed it. Each light value keeps its hue and clears 4.5:1 on its own tint AND on --bg-darker, the deepest cream on the site. All ink; --bull's only fill is a 6px dot. */ --bull: #0B6B3A; /* 5.53:1 on its tint, 4.73:1 on --bg-darker */ --fvg-green: #1D6B2E; /* 5.73 / 4.71 */ --demand-green: #00614A; /* 5.91 / 5.35 */ --bear: #B81410; /* 5.28 / 4.78 */ --fvg-red: #A82A2A; /* 5.77 / 4.96 */ --supply-red: #9E1E13; /* 6.27 / 5.68 */ --liq: var(--accent-warning-ink); /* 5.72 / 4.76 */ /* Safe now: every `background: var(--gold)` in butty/ and ai_workers/ was moved to a --gold-fill sibling first (17 declarations, 10 files, same hex so dark is untouched), so nothing left reading --gold is a fill. #d4af37 measured 1.67:1 as ink on cream. */ --gold: var(--lg-ink-d4af37); --gold-primary: var(--lg-ink-d4af37); /* --ashiran-gold got the same treatment on 09-06: 10 fill sites across brokers/, courses/ and service/ moved to --ashiran-gold-fill first (each file keeping its own dark value -- #d4af37 in one, #ffc107 in four), so nothing left reading this name is a fill. Measured on /salepage/ea: .btn-gold-outline was #ffc107 ink on cream at 1.40:1. */ --ashiran-gold: var(--lg-ink-d4af37); /* 4.14:1 as ink on its own 18%-alpha tint, which is what /forex/tools/ actually does with it; #a80000 takes the same pairing to 5.15:1. Also a 6px dot fill -- fine either way. */ --live-red: #a80000; } /* Outline buttons carry their colour as INK, not as a fill, so they land in exactly the trap .text-warning did: a hue picked to glow on black, measured on a cream page. Bootstrap 5.1.3 declares these as plain color/border-color (no --bs-btn-* yet), so a plain override wins. Measured on /tracker/top/: .btn-outline-warning 1.40:1, .btn-outline-light 1.05:1. The :hover half fills with that same colour, so its ink has to be solved against the fill, not against the page. */ :root[data-theme="light"] .btn-outline-warning { color: var(--accent-warning-ink); border-color: var(--accent-warning-ink); } :root[data-theme="light"] .btn-outline-warning:hover, :root[data-theme="light"] .btn-outline-warning:focus, :root[data-theme="light"] .btn-outline-warning.active { color: #ffffff; /* 6.65:1 on --accent-warning-ink */ background-color: var(--accent-warning-ink); border-color: var(--accent-warning-ink); } :root[data-theme="light"] .btn-outline-info { color: var(--accent-info-ink); border-color: var(--accent-info-ink); } :root[data-theme="light"] .btn-outline-info:hover, :root[data-theme="light"] .btn-outline-info:focus, :root[data-theme="light"] .btn-outline-info.active { color: #ffffff; /* 7.12:1 on --accent-info-ink */ background-color: var(--accent-info-ink); border-color: var(--accent-info-ink); } :root[data-theme="light"] .btn-outline-light { color: var(--text-main); border-color: var(--border-default); } :root[data-theme="light"] .btn-outline-light:hover, :root[data-theme="light"] .btn-outline-light:focus, :root[data-theme="light"] .btn-outline-light.active { color: var(--bg-card); background-color: var(--text-main); border-color: var(--text-main); } /* .btn-tf is the timeframe/account switcher in eight forex calculators. Its selected state filled with var(--ashi-gold) -- which is an INK in light mode (#765B29 then, #A14A08 now) -- so the button's own dark ink landed on a dark fill: 3.30:1 active, 2.59:1 hover on /forex/portriskcalculator/. Forcing the ink white fixed the ratio and was the WRONG fix: the fill was the thing in the wrong role. All 18 .btn-tf blocks now fill with --ashi-gold-fill (#F47B20 in both themes since 2026-09-09), which puts their own inks back in range -- with no rule here at all. Left as a note rather than a rule so the next reader does not re-add one. */ /* The MQL code block is painted rgb(60,60,60) by the codeMQL4 highlighters, inline, and stays that colour in both themes -- a dark code panel on a light page is a deliberate convention, not an oversight. Its syntax colours are the VS Code Dark+ palette and they DID flip, so /en/forex/howtoea/ rendered dark ink on the dark panel: 1.09:1 on .mqlOperator, 1.50 on the brackets, 49 of 49 spans below 4.5:1. Rather than re-solve twenty syntax hues against cream, the tokens are re-pinned to their dark values on the container. Custom properties inherit, so every span inside goes back to exactly what dark mode shows, and nothing outside .mql-dark is touched. The list below is DERIVED from every .mql* rule in the tree, not hand-written: the first hand-written version missed nine tokens, and the miss was invisible until the fix was simulated on the live page. If a new syntax class appears, regenerate rather than append. The other code presentation, .code-container, is themed on purpose (--lg-bg-1a1a1a turns cream) and its inks flip with it -- that pair is already consistent and is left alone. */ :root[data-theme="light"] .mql-dark { --ash-muted: #A39785; --ash-text: #F7F3ED; --ashi-gold-bright: #9A4406; --ashi-sub: #A39785; --ashi-text: #F7F3ED; --ashiran-text: #F7F3ED; --ashiran-text-muted: #A39785; --ea-text: #F7F3ED; --ea-text-dim: #A39785; --hub-text: #F7F3ED; --hub-text-dim: #A39785; --lg-ink-00ffaa: #00ffaa; --lg-ink-4ec9b0: #4ec9b0; --lg-ink-4fc1ff: #4fc1ff; --lg-ink-62a1ff: #62a1ff; --lg-ink-636363: #6C6252; --lg-ink-666666: #706554; --lg-ink-6a9955: #6a9955; --lg-ink-808080: #8C7E6A; --lg-ink-9cdcfe: #9cdcfe; --lg-ink-b5cea8: #b5cea8; --lg-ink-c586c0: #c586c0; --lg-ink-ce9178: #ce9178; --lg-ink-d4d4d4: #DAD3C9; --lg-ink-dcdcaa: #dcdcaa; --lg-ink-e76eff: #e76eff; --lg-ink-ed92ff: #ed92ff; --lg-ink-ff6565: #ff6565; --lg-ink-ff8484: #ff8484; --lg-ink-ffac4d: #ffac4d; --lg-ink-ffe600: #ffe600; --smc-text: #F7F3ED; --smc-text-dim: #A39785; --text-dim: #634F45; --text-main: #2D201A; --text-muted: #4A3B32; }