/* Themes. The default is Saudi — the flag's green and white — and it follows the computer: light by day, dark green at night. The chosen theme sits on : (none) Saudi, light or dark like the computer saudi Saudi, always light saudi-dark Saudi, always dark light mud brick with the painted-door teal (the original design) dark mud brick, dark */ :root, :root[data-theme="saudi"] { --bg: #F1F6F3; --surface: #FFFFFF; --surface-2: #E6F0EA; --tile: #D3E7DB; --trim: #006C35; --ink: #0B2E1C; --muted: #4B6656; --accent: #006C35; --accent-ink: #FFFFFF; --hard: #9A3412; --line: rgba(11, 46, 28, .14); --good: #006C35; --bad: #B42318; --flag: #8A5A00; --sidebar-bg: #006C35; --sidebar-ink: #FFFFFF; --sidebar-muted: rgba(255, 255, 255, .9); --nav-on-bg: #FFFFFF; --nav-on-ink: #006C35; --strong-bg: #006C35; --strong-ink: #FFFFFF; --brand-ar: #FFFFFF; --pill-meter: #FFFFFF; --pill-ok: #FFFFFF; /* charts: one hue light→dark for the six stages (validated as an ordinal ramp) */ --r1: #6DB38D; --r2: #3F9A69; --r3: #1C8350; --r4: #006C35; --r5: #00562A; --r6: #003F1F; --viz-bar: #006C35; --viz-deemph: #B9CDBF; --viz-grid: rgba(11, 46, 28, .1); --viz-future: #DCEAE1; --font-ui: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-ui-ar: "Alegreya Sans", "Noto Kufi Arabic", "Geeza Pro", system-ui, sans-serif; --font-ar: "Noto Naskh Arabic", "Geeza Pro", "Arabic Typesetting", "Traditional Arabic", serif; --radius: 16px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0B1A12; --surface: #11241A; --surface-2: #173024; --tile: #1F3D2C; --trim: #1C8350; --ink: #E6F1EA; --muted: #9FBDAC; --accent: #4CC38A; --accent-ink: #04130B; --hard: #F0A36B; --line: rgba(230, 241, 234, .14); --good: #4CC38A; --bad: #F08A7A; --flag: #E3B55B; --sidebar-bg: #00552A; --sidebar-ink: #FFFFFF; --sidebar-muted: rgba(255, 255, 255, .9); --nav-on-bg: #FFFFFF; --nav-on-ink: #00552A; --strong-bg: #006C35; --strong-ink: #FFFFFF; --brand-ar: #FFFFFF; --pill-meter: #FFFFFF; --pill-ok: #FFFFFF; --r1: #2A7A52; --r2: #379066; --r3: #4DA67B; --r4: #6CBC93; --r5: #93D1AF; --r6: #BFE6CF; --viz-bar: #3FAF77; --viz-deemph: #3E5A4A; --viz-grid: rgba(230, 241, 234, .1); --viz-future: #1C3326; color-scheme: dark; } } :root[data-theme="saudi-dark"] { --bg: #0B1A12; --surface: #11241A; --surface-2: #173024; --tile: #1F3D2C; --trim: #1C8350; --ink: #E6F1EA; --muted: #9FBDAC; --accent: #4CC38A; --accent-ink: #04130B; --hard: #F0A36B; --line: rgba(230, 241, 234, .14); --good: #4CC38A; --bad: #F08A7A; --flag: #E3B55B; --sidebar-bg: #00552A; --sidebar-ink: #FFFFFF; --sidebar-muted: rgba(255, 255, 255, .9); --nav-on-bg: #FFFFFF; --nav-on-ink: #00552A; --strong-bg: #006C35; --strong-ink: #FFFFFF; --brand-ar: #FFFFFF; --pill-meter: #FFFFFF; --pill-ok: #FFFFFF; --r1: #2A7A52; --r2: #379066; --r3: #4DA67B; --r4: #6CBC93; --r5: #93D1AF; --r6: #BFE6CF; --viz-bar: #3FAF77; --viz-deemph: #3E5A4A; --viz-grid: rgba(230, 241, 234, .1); --viz-future: #1C3326; color-scheme: dark; } /* Mud brick: Najdi mud-brick walls with a painted-door teal accent. */ :root[data-theme="light"] { --bg: #DCC8A6; --surface: #EBDEC6; --surface-2: #E2D0B0; --tile: #C39B69; --trim: #C39B69; --ink: #2A1C10; --muted: #66503A; --accent: #1D5A5C; --accent-ink: #F2E9D6; --hard: #8B3A1C; --line: rgba(42, 28, 16, .18); --good: #2F6B3A; --bad: #9A2F1F; --flag: #7A4F00; --sidebar-bg: #EBDEC6; --sidebar-ink: #2A1C10; --sidebar-muted: #66503A; --nav-on-bg: #2A1C10; --nav-on-ink: #DCC8A6; --strong-bg: #2A1C10; --strong-ink: #DCC8A6; --brand-ar: #1D5A5C; --pill-meter: #1D5A5C; --pill-ok: #2F6B3A; --r1: #6FA5A2; --r2: #4E8E8C; --r3: #357878; --r4: #1D5A5C; --r5: #134649; --r6: #0B3335; --viz-bar: #1D5A5C; --viz-deemph: #BFAE92; --viz-grid: rgba(42, 28, 16, .14); --viz-future: #D2BC95; color-scheme: light; } :root[data-theme="dark"] { --bg: #1B140E; --surface: #261D15; --surface-2: #30251B; --tile: #4B3723; --trim: #4B3723; --ink: #EFE3CC; --muted: #B39B7C; --accent: #5BA9A7; --accent-ink: #0F0B07; --hard: #E0925F; --line: rgba(239, 227, 204, .16); --good: #7CC08A; --bad: #EE8A76; --flag: #E3B55B; --sidebar-bg: #261D15; --sidebar-ink: #EFE3CC; --sidebar-muted: #B39B7C; --nav-on-bg: #EFE3CC; --nav-on-ink: #1B140E; --strong-bg: #EFE3CC; --strong-ink: #1B140E; --brand-ar: #5BA9A7; --pill-meter: #5BA9A7; --pill-ok: #7CC08A; --r1: #2F6E6D; --r2: #3C8584; --r3: #529C9A; --r4: #6DB3B0; --r5: #8FC8C4; --r6: #B5DDD9; --viz-bar: #4F9C9B; --viz-deemph: #6B5A45; --viz-grid: rgba(239, 227, 204, .12); --viz-future: #3A2C1F; color-scheme: dark; } /* ---------- Art: the Najdi scene, page illustrations, Sadu weave (core/art.js) ---------- One palette for light pages, one for dark; the sky itself follows the clock (.sky-dawn … .sky-night). */ :root { --art-sand-far: #E8D5AE; --art-sand: #D8B784; --art-ground: #C9A46E; --art-wall: #C99866; --art-wall-shade: #A87949; --art-band: #B3834F; --art-vent: #6E4A2B; --art-door: #7A4E2A; --art-door-paint: #E9C46A; --art-far: #9BB8AA; --art-far-ball: #C8961E; --art-palm: #2E8B57; --art-palm-dark: #1C6B43; --art-trunk: #8C6A3F; --art-trunk-line: #6E5231; --art-dates: #A0522D; --art-brass: #D4A437; --art-brass-shade: #B0842A; --art-brass-dark: #8A6420; --art-shine: #F6E3A8; --art-cup: #FBF6EA; --art-cup-band: #C8961E; --art-steam: #B9A98C; --art-paper: #FFFFFF; --art-rule: #CBD9D0; --art-trace: #C4CFC8; --art-ink: #0B2E1C; --art-green: #006C35; --art-cream: #FBF6EA; --art-shadow: rgba(11, 46, 28, .12); --art-sun: #F4C24D; --art-sun-glow: rgba(244, 194, 77, .28); --art-moon: #F3EBD2; --art-star: #F3EBD2; --sadu-red: #9E2A2B; --sadu-dark: #231A14; --sadu-cream: #F3E7CF; --sadu-green: #006C35; /* Anki's three counts: new, learning, to review — always with their label, never colour alone */ --c-new: #1D5FA8; --c-learn: #B3261E; --c-due: #006C35; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --art-sand-far: #3B3222; --art-sand: #4A3D29; --art-ground: #574730; --art-wall: #6E5236; --art-wall-shade: #58412A; --art-band: #624930; --art-vent: #2A1D12; --art-door: #3B2716; --art-door-paint: #B8923F; --art-far: #2B4A3C; --art-far-ball: #9C7A2A; --art-palm: #2F7A52; --art-palm-dark: #235E3F; --art-trunk: #5E4730; --art-trunk-line: #45331F; --art-dates: #7A4424; --art-brass: #C69633; --art-brass-shade: #9E7527; --art-brass-dark: #7A5A1D; --art-shine: #E9CF86; --art-cup: #E9E1CC; --art-steam: #6D6454; --art-paper: #1F3D2C; --art-rule: #33584A; --art-trace: #3E6452; --art-ink: #E6F1EA; --art-green: #4CC38A; --art-cream: #F3EBD2; --art-shadow: rgba(0, 0, 0, .3); --c-new: #7FB0F0; --c-learn: #F08A7A; --c-due: #4CC38A; } } :root[data-theme="saudi-dark"], :root[data-theme="dark"] { --art-sand-far: #3B3222; --art-sand: #4A3D29; --art-ground: #574730; --art-wall: #6E5236; --art-wall-shade: #58412A; --art-band: #624930; --art-vent: #2A1D12; --art-door: #3B2716; --art-door-paint: #B8923F; --art-far: #2B4A3C; --art-far-ball: #9C7A2A; --art-palm: #2F7A52; --art-palm-dark: #235E3F; --art-trunk: #5E4730; --art-trunk-line: #45331F; --art-dates: #7A4424; --art-brass: #C69633; --art-brass-shade: #9E7527; --art-brass-dark: #7A5A1D; --art-shine: #E9CF86; --art-cup: #E9E1CC; --art-steam: #6D6454; --art-paper: #1F3D2C; --art-rule: #33584A; --art-trace: #3E6452; --art-ink: #E6F1EA; --art-green: #4CC38A; --art-cream: #F3EBD2; --art-shadow: rgba(0, 0, 0, .3); --c-new: #7FB0F0; --c-learn: #F08A7A; --c-due: #4CC38A; } :root[data-theme="dark"] { --art-paper: #30251B; --art-rule: #4B3723; --art-trace: #5A4630; --art-ink: #EFE3CC; --art-green: #7CC08A; } :root[data-theme="light"] { --art-paper: #F5ECDB; --art-rule: #CDB892; --art-trace: #C9B28A; --art-ink: #2A1C10; --art-green: #1D5A5C; --c-due: #2F6B3A; } /* The sky over the scene, by time of day. Text on it stays at 4.5:1 or better. */ .sky-dawn { --sky-top: #F2C9B0; --sky-bottom: #FBEEE2; --hero-ink: #0B2E1C; --hero-muted: #4B3A2E; } .sky-day { --sky-top: #BFE0E6; --sky-bottom: #EEF6F1; --hero-ink: #0B2E1C; --hero-muted: #3F5A4C; } .sky-dusk { --sky-top: #E9A06B; --sky-bottom: #F7D8B0; --hero-ink: #2A160B; --hero-muted: #4F2E17; } .sky-night { --sky-top: #06120C; --sky-bottom: #123524; --hero-ink: #F1F6F3; --hero-muted: #BFD6C8; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .sky-dawn { --sky-top: #2A2330; --sky-bottom: #3F3438; --hero-ink: #F6EEE6; --hero-muted: #D9C8BD; } :root:not([data-theme]) .sky-day { --sky-top: #0F2C2A; --sky-bottom: #1B4337; --hero-ink: #EEF6F1; --hero-muted: #BCD6C8; } :root:not([data-theme]) .sky-dusk { --sky-top: #2B1A1E; --sky-bottom: #4A2E24; --hero-ink: #FBEFE3; --hero-muted: #E2C6AE; } } :root[data-theme="saudi-dark"] .sky-dawn, :root[data-theme="dark"] .sky-dawn { --sky-top: #2A2330; --sky-bottom: #3F3438; --hero-ink: #F6EEE6; --hero-muted: #D9C8BD; } :root[data-theme="saudi-dark"] .sky-day, :root[data-theme="dark"] .sky-day { --sky-top: #0F2C2A; --sky-bottom: #1B4337; --hero-ink: #EEF6F1; --hero-muted: #BCD6C8; } :root[data-theme="saudi-dark"] .sky-dusk, :root[data-theme="dark"] .sky-dusk { --sky-top: #2B1A1E; --sky-bottom: #4A2E24; --hero-ink: #FBEFE3; --hero-muted: #E2C6AE; } /* ---------- Page scenes (core/scenes.js): sky, and the colours of her world ---------- --scene-night is 1 in the dark themes: stars and the moon come out, the sun goes. */ :root { --scene-top: #CDE5E6; --scene-bottom: #F7EFDD; --scene-night: 0; --nafud-far: #EDBF8B; --nafud: #DD9657; --nafud-near: #C97A40; --tent: #2B2420; --tent-line: #4B4038; --tent-in: #15100D; --rope: #7D6A55; --flame: #F29A38; --flame-core: #FFD470; --fire-glow: rgba(255, 166, 64, .3); --lamp: #FFD470; --her-name: #B0284C; --rose: #D9577A; --rose-in: #9E2F52; --leaf: #3F8F5A; --stem: #3F7A4E; --hill: #BFD0AA; --grass: #9BC67E; --grass-far: #C3DDA6; --flower-1: #F4D35E; --flower-2: #FFFFFF; --flower-3: #C58BD8; --truffle: #8C6A4A; --plaster: #EFE2C8; --plaster-shade: #E2D0AC; --cushion: #7A2E2A; --armrest: #9E2A2B; --carpet: #8B3A2B; --carpet-line: #C7925A; --falcon: #8C7058; --falcon-chest: #EBDfCA; --falcon-wing: #6B533F; --hood: #5A3A22; --beak: #3C3C3C; --wood: #8C6A3F; --desk: #CBA777; --car: #F3EFE6; --car-glass: #9CC3CF; --wheel: #2A2A2A; --spice-1: #E3A21A; --spice-2: #B83A1E; --spice-3: #6E8B3D; --spice-4: #8A5A2B; --bowl: #7A5A3A; --tag: #FFFFFF; --tag-ink: #0B2E1C; --glass: rgba(255, 255, 255, .55); --glass-line: #8FB3B8; --rosewater: #F2B8C8; --cloud: #FFFFFF; --rain: #7FA9C4; --stone: #CDBB9C; --stone-top: #DCCDB2; --stone-line: #A8946F; --water: #4F93AE; --door-blue: #2F6F8F; --skin: #F1E6CC; } :root[data-theme="light"] { --scene-top: #E9D6B2; --scene-bottom: #F6ECD8; --her-name: #962042; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --scene-top: #04110B; --scene-bottom: #173A2B; --scene-night: 1; --nafud-far: #5E3C22; --nafud: #6E4526; --nafud-near: #7C4E2B; --tent-in: #070504; --rope: #5A4B3C; --fire-glow: rgba(255, 150, 50, .34); --her-name: #F28AA6; --rose: #C54B6D; --leaf: #2F6E48; --stem: #2F5E3C; --hill: #1F3A2C; --grass: #2F5A35; --grass-far: #264A2E; --flower-2: #D9E6DC; --plaster: #3A2E22; --plaster-shade: #30251B; --carpet: #5E2A20; --carpet-line: #8A6440; --falcon: #6E5A48; --falcon-chest: #BDB09A; --falcon-wing: #4F3F31; --hood: #3E2816; --wood: #5E4730; --desk: #4A3A28; --car: #C9C4B8; --car-glass: #5C7F8A; --bowl: #5A4430; --tag: #E9E1CC; --glass: rgba(255, 255, 255, .22); --cloud: #3E5A4E; --rain: #5C8AA6; --stone: #5E5142; --stone-top: #6E604E; --stone-line: #463C30; --water: #2F6377; --door-blue: #2A5468; --skin: #C9BC9F; } } :root[data-theme="saudi-dark"], :root[data-theme="dark"] { --scene-top: #04110B; --scene-bottom: #173A2B; --scene-night: 1; --nafud-far: #5E3C22; --nafud: #6E4526; --nafud-near: #7C4E2B; --tent-in: #070504; --rope: #5A4B3C; --fire-glow: rgba(255, 150, 50, .34); --her-name: #F28AA6; --rose: #C54B6D; --leaf: #2F6E48; --stem: #2F5E3C; --hill: #1F3A2C; --grass: #2F5A35; --grass-far: #264A2E; --flower-2: #D9E6DC; --plaster: #3A2E22; --plaster-shade: #30251B; --carpet: #5E2A20; --carpet-line: #8A6440; --falcon: #6E5A48; --falcon-chest: #BDB09A; --falcon-wing: #4F3F31; --hood: #3E2816; --wood: #5E4730; --desk: #4A3A28; --car: #C9C4B8; --car-glass: #5C7F8A; --bowl: #5A4430; --tag: #E9E1CC; --glass: rgba(255, 255, 255, .22); --cloud: #3E5A4E; --rain: #5C8AA6; --stone: #5E5142; --stone-top: #6E604E; --stone-line: #463C30; --water: #2F6377; --door-blue: #2A5468; --skin: #C9BC9F; } :root[data-theme="dark"] { --scene-top: #0E0906; --scene-bottom: #34261A; }