:root { color-scheme: light; /* Manuscript palette — ink on warm paper */ --paper: #f4efe2; --paper-deep: #ece3d1; --surface: #fbf8f1; --surface-raised: #ffffff; --surface-sunken: #f0e8d8; --ink: #262119; --ink-soft: #5c5446; /* Helper text — must hold 4.5:1 on --paper (the old #8c8470 was 3.2:1). */ --ink-faint: #6e6552; --line: #e6dec9; --line-strong: #d6ccb2; --accent: #1c6b60; --accent-strong: #15564d; --accent-soft: rgba(28, 107, 96, 0.12); --accent-tint: rgba(28, 107, 96, 0.18); --gold: #b07d27; /* Gold for TEXT on paper/surface — the decorative --gold is only 3.1:1. */ --gold-text: #8a5f1a; /* Gold for filled buttons — deep enough that cream text passes AA on it. */ --gold-deep: #8a5f1a; --gold-deep-hover: #785215; --gold-soft: rgba(176, 125, 39, 0.16); --error: #a8412f; --error-soft: rgba(168, 65, 47, 0.12); --success: #1c6b60; --success-soft: rgba(28, 107, 96, 0.14); /* Text set ON filled accent/gold surfaces (buttons, active pills). */ --on-accent: #fbf8f1; --on-gold: #fbf8f1; /* Translucent paper wash behind overlays (play overlay, finale). */ --scrim: rgba(251, 248, 241, 0.85); /* Soft top glow behind the page (body radial). */ --paper-glow: #faf6ec; /* Piano keys keep real-piano colours in both themes. */ --key-white: #ffffff; --key-white-edge: #e6dec9; --key-black: #262119; --key-label: #6e6552; /* Compatibility aliases — old component names still reference these */ --color-background: var(--paper); --color-surface: var(--surface); --color-text: var(--ink); --color-muted: var(--ink-faint); --color-primary: var(--accent); --color-success: var(--success); --color-warning: var(--gold); --color-error: var(--error); --note-accent: var(--accent); /* Canvas staff — read by renderStaff.js via getComputedStyle(documentElement) */ --staff-line-color: #2b2620; --staff-muted-line-color: rgba(43, 38, 32, 0.36); --note-fill-color: #1c6b60; --note-glyph-color: #15564d; --note-ledger-color: #2b2620; /* Type */ --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* Radii */ --radius-2xl: 36px; --radius-xl: 28px; --radius-lg: 22px; --radius-md: 16px; --radius-sm: 10px; /* Soft, warm shadows */ --shadow-sm: 0 1px 2px rgba(43, 38, 32, 0.05), 0 6px 16px rgba(43, 38, 32, 0.06); --shadow-md: 0 2px 6px rgba(43, 38, 32, 0.07), 0 18px 40px rgba(43, 38, 32, 0.10); --shadow-accent: 0 10px 24px rgba(28, 107, 96, 0.22); /* Spacing */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --border-strong: 2px; --border-subtle: 1px; } /* ----- Night study — dark Manuscript ----------------------------------- */ /* The resolved theme is always set explicitly on (an inline head script resolves "auto" against prefers-color-scheme before first paint), so one selector covers both manual and system dark. The arcade always plays at night: while the game is open the same palette is re-declared on , which out-inherits the light values regardless of the app theme. */ :root[data-theme='dark'], body[data-game-active='true'] { color-scheme: dark; /* Warm near-black "midnight paper" — still ink-and-paper, lights down. */ --paper: #191510; --paper-deep: #120f0a; --surface: #211c14; --surface-raised: #29231a; --surface-sunken: #14100a; --ink: #f1e9d7; --ink-soft: #cfc5ad; --ink-faint: #aaa087; --line: #37301f; --line-strong: #4b432e; /* Accents brighten to read against ink; filled buttons flip to dark text. */ --accent: #57b8a5; --accent-strong: #83d0bf; --accent-soft: rgba(87, 184, 165, 0.14); --accent-tint: rgba(87, 184, 165, 0.24); --gold: #d9a854; --gold-text: #ddb069; --gold-deep: #d9a854; --gold-deep-hover: #e6bc70; --gold-soft: rgba(217, 168, 84, 0.16); --error: #e07a63; --error-soft: rgba(224, 122, 99, 0.16); --success: #57b8a5; --success-soft: rgba(87, 184, 165, 0.16); --on-accent: #0f1f1b; --on-gold: #241806; /* Canvas staff (read per paint by renderStaff.js). */ --staff-line-color: #e8e0cb; --staff-muted-line-color: rgba(232, 224, 203, 0.34); --note-fill-color: #57b8a5; --note-glyph-color: #83d0bf; --note-ledger-color: #e8e0cb; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.45); --shadow-accent: 0 10px 24px rgba(87, 184, 165, 0.22); --key-white: #efe8d6; --key-white-edge: #4b432e; --key-black: #0e0b06; --key-label: #6e6552; --scrim: rgba(15, 12, 7, 0.82); --paper-glow: #221c13; }