/* * Theme tokens and light/Darkly overrides for the Fretboard Compass static * app. See docs/ref-color-themes.md for the canonical color record; the * values here MUST match that doc's tables. * * Mechanism: * - Every themed color is a CSS custom property (a "token", prefixed --fc-). * Light values are the current v2.6.5 appearance; the Darkly column is the * dark theme. Because each token's LIGHT value equals the Tailwind utility * color it replaces, the override rules below can read var(--fc-*) * UNCONDITIONALLY and light mode stays pixel-identical. * - The active theme is chosen by a data-theme attribute on * ('light' | 'dark'). With no attribute, the OS prefers-color-scheme * decides via the @media block, so first paint matches the OS with no * flash and no early localStorage read (js/ui/theme.js sets the attribute * only when the user has an explicit stored choice). * - Because the overrides read tokens, re-asserting the Light tokens inside * @media print reverts the whole chrome to light for printing with no * extra per-element rules (binder-ready sheets are ink on white). * * v1 scope: the diagram-surface tokens (--fc-svg-bg, --fc-tint, --fc-line, * --fc-line-soft, --fc-fretnum, --fc-dot, --fc-open-*, --fc-zone-*, * --fc-root, --fc-marker-label) hold their LIGHT values in BOTH themes; the * diagrams stay on printable "paper" in v1. The optional dark re-skin * (Phase 5) is where those gain real dark values. * * This file is loaded after css/tailwind.css and before css/app.css so its * rules out-specify the single-class Tailwind utilities. * * Size deviation (CONVENTIONS section 3): this file intentionally exceeds * 300 lines. It is a single color contract - each token is defined once and * consumed a few lines away by its override rule; splitting tokens from their * consumers across files would hurt, not help, legibility. It is also flat * declarative CSS (no logic), so the "decompose into helpers" rationale for * the limit does not apply. */ /* ========================================================================== Token contract - Light (current appearance, frozen as the Light theme) ========================================================================== */ :root { /* Chrome and text */ --fc-bg: #f8fafc; /* body (bg-slate-50) */ --fc-surface: #ffffff; /* cards/panels (bg-white) */ --fc-surface-alt: #f8fafc; /* recessed card (bg-slate-50) */ --fc-surface-2: #f1f5f9; /* inset control (bg-slate-100) */ --fc-text: #0f172a; /* body text (text-slate-900) */ --fc-text-heading: #1e293b; /* headings (text-slate-800) */ --fc-text-body: #334155; /* strong body (text-slate-700) */ --fc-text-muted: #64748b; /* labels/desc (text-slate-500) */ --fc-text-muted2: #475569; /* darker muted (text-slate-600) */ --fc-text-faint: #94a3b8; /* captions/version (text-slate-400) */ --fc-border: #e2e8f0; /* hairline (border-slate-200) */ --fc-border-soft: #f1f5f9; /* soft hairline (border-slate-100) */ --fc-border-faint: #f8fafc; /* faint hairline (border-slate-50) */ --fc-border-300: #cbd5e1; /* medium border (border-slate-300) */ --fc-border-strong: #0f172a; /* heavy divider (border-slate-900) */ /* Buttons and controls */ --fc-primary: #059669; /* Generate CTA (bg-emerald-600) */ --fc-primary-hover: #047857; /* (hover bg-emerald-700) */ --fc-primary-text: #ffffff; --fc-secondary: #3d5a80; /* chalky navy set (bg-[#3d5a80]) */ --fc-secondary-hover: #4a6a94; /* (hover bg-[#4a6a94]) */ --fc-secondary-text: #ffffff; --fc-active: #1e293b; /* active tab/toggle (bg-slate-800) */ --fc-active-text: #ffffff; --fc-dark-btn: #0f172a; /* near-black actions (bg-slate-900) */ --fc-dark-btn-hover: #000000; /* (hover bg-black) */ /* Semantic accents (text weight and its tint background) */ --fc-success: #16a34a; /* text-green-600 */ --fc-info: #2563eb; /* text/bg-blue-600 */ --fc-info-tint: #eff6ff; /* bg-blue-50 */ --fc-info-border: #dbeafe; /* border-blue-100 */ --fc-warn: #b45309; /* text-amber-700 */ --fc-warn-strong: #92400e; /* text-amber-800 */ --fc-warn-solid: #f59e0b; /* bg-amber-500 */ --fc-warn-tint: #fffbeb; /* bg-amber-50 */ --fc-warn-badge: #fef3c7; /* bg-amber-100 (NEW badge) */ --fc-warn-border: #fde68a; /* border-amber-200 */ --fc-danger: #dc2626; /* text-red-600 */ --fc-danger-tint: #fee2e2; /* bg-red-100 */ --fc-accent: #4f46e5; /* indigo-600 (Favorites) */ --fc-accent-strong: #312e81; /* text-indigo-900 */ --fc-accent-soft: #818cf8; /* text/border-indigo-400 */ --fc-accent-tint: #eef2ff; /* bg-indigo-50 */ --fc-accent-tint2: #e0e7ff; /* bg/border-indigo-100 */ --fc-accent-border: #c7d2fe; /* border-indigo-200 */ --fc-accent-hover: #4338ca; /* hover:bg-indigo-700 */ --fc-accent-ring: #6366f1; /* focus:ring-indigo-500 */ /* Alpha-modifier boxes: Light holds the EXACT rgba (pixel-identical over any parent); dark is an opaque fill. */ --fc-accent-tint-a: rgba(238, 242, 255, 0.5); /* bg-indigo-50/50 */ --fc-accent-border-a: rgba(224, 231, 255, 0.5); /* border-indigo-100/50 */ /* Form-field / view accent hues (labels, input tints, borders, focus). Blue reuses --fc-info*, amber reuses --fc-warn*; these fill the gaps. */ --fc-info-strong: #1d4ed8; /* text-blue-700 */ --fc-info-b2: #bfdbfe; /* border-blue-200 */ --fc-info-b3: #93c5fd; /* border-blue-300 (help badge, chips) */ --fc-info-focus: #3b82f6; /* focus:border-blue-500 */ --fc-purple5: #a855f7; /* text-purple-500, focus:border-purple-500 */ --fc-purple6: #9333ea; /* text-purple-600 */ --fc-purple-b2: #e9d5ff; /* border-purple-200 */ --fc-purple-b3: #d8b4fe; /* border-purple-300 */ --fc-purple-bg: #faf5ff; /* bg-purple-50 */ --fc-fuchsia6: #c026d3; /* text-fuchsia-600 */ --fc-fuchsia-b2: #f5d0fe; /* border-fuchsia-200 */ --fc-fuchsia-b3: #f0abfc; /* border-fuchsia-300 */ --fc-fuchsia-bg: #fdf4ff; /* bg-fuchsia-50 */ --fc-fuchsia-focus: #d946ef; /* focus:border-fuchsia-500 */ --fc-pink6: #db2777; /* text-pink-600 */ --fc-pink-b2: #fbcfe8; /* border-pink-200 */ --fc-pink-b3: #f9a8d4; /* border-pink-300 */ --fc-pink-bg: #fdf2f8; /* bg-pink-50 */ --fc-pink-focus: #ec4899; /* focus:border-pink-500 */ --fc-amber6: #d97706; /* text-amber-600 */ --fc-amber-b3: #fcd34d; /* border-amber-300 */ --fc-amber-focus: #f59e0b; /* focus:border-amber-500 */ /* Diagram (SVG) surface - light "paper" (unchanged in both themes, v1) */ --fc-svg-bg: #ffffff; --fc-tint: #fefce8; --fc-line: #000000; --fc-line-soft: #666666; --fc-fretnum: #444444; --fc-dot: #000000; --fc-open-fill: #ffffff; --fc-open-stroke: #000000; --fc-zone-1: #000000; --fc-zone-2: #2563eb; --fc-zone-3: #7c3aed; --fc-root: #ffffff; --fc-marker-label: #ffffff; /* Dark-diagram surfaces (plan-dark-diagrams). Light values equal the hardcoded SVG fills/strokes, so Light is a pixel no-op; only the dark contexts below and the .fc-* rules consume the dark values. */ --fc-diagram-paper: #ffffff; /* background rect (was fill="white") */ --fc-diagram-tint: #fefce8; /* fretboard tint (FRETBOARD_FILL) */ --fc-diagram-ink: #000000; /* titles, fret numbers, "Nfr", muted "X" */ --fc-diagram-line: #666666; /* string + fret lines (neck line stroke) */ --fc-diagram-dot: #000000; /* chord finger dots */ --fc-diagram-zone1: #000000; /* neck frets 1-4 markers (black zone) */ /* Popular (winner) cards - navy set (dark-only surface; the rules are dark-scoped so these Light values are inert on screen and only feed the dark print reset). */ --fc-winner-card: transparent; --fc-winner-border: #e2e8f0; --fc-winner-inner: #ffffff; } /* ========================================================================== Token contract - Darkly (dark). Diagram tokens intentionally repeat the LIGHT values (v1 keeps the diagrams on paper). ========================================================================== */ :root[data-theme="dark"] { /* Chrome and text */ --fc-bg: #222222; --fc-surface: #303030; --fc-surface-alt: #2a2a2a; --fc-surface-2: #3a3a3a; --fc-text: #ffffff; --fc-text-heading: #f1f5f9; --fc-text-body: #e5e7eb; --fc-text-muted: #adb5bd; --fc-text-muted2: #c9ced3; --fc-text-faint: #949ba3; /* lifted from #8b949e to clear AA 4.5:1 on #303030 cards */ --fc-border: #3a3a3a; --fc-border-soft: #3a3a3a; --fc-border-faint: #3a3a3a; --fc-border-300: #4a4a4a; --fc-border-strong: #555555; /* Buttons and controls */ --fc-primary: #00bc8c; --fc-primary-hover: #00a37a; --fc-primary-text: #ffffff; --fc-secondary: #444444; --fc-secondary-hover: #555555; --fc-secondary-text: #ffffff; --fc-active: #375a7f; --fc-active-text: #ffffff; --fc-dark-btn: #1f1f1f; --fc-dark-btn-hover: #111111; /* Semantic accents */ --fc-success: #00bc8c; --fc-info: #3498db; --fc-info-tint: #17262f; --fc-info-border: #2b5573; --fc-warn: #f39c12; --fc-warn-strong: #f8b545; --fc-warn-solid: #f39c12; --fc-warn-tint: #3a2f16; --fc-warn-badge: #3a2f16; --fc-warn-border: #6b5320; --fc-danger: #e74c3c; --fc-danger-tint: #3a2320; --fc-accent: #6d78d6; --fc-accent-strong: #c7cdf2; --fc-accent-soft: #8b93de; --fc-accent-tint: #262a3d; --fc-accent-tint2: #2f3450; --fc-accent-border: #3d4468; --fc-accent-hover: #5a63c0; --fc-accent-ring: #8b93de; --fc-accent-tint-a: #262a3d; --fc-accent-border-a: #2f3450; /* Form-field / view accent hues */ --fc-info-strong: #5dade2; --fc-info-b2: #2b5573; --fc-info-b3: #3a6a8f; --fc-info-focus: #5dade2; --fc-purple5: #c084fc; --fc-purple6: #b57ce0; --fc-purple-b2: #4a3a5e; --fc-purple-b3: #6a4d82; --fc-purple-bg: #2a2333; --fc-fuchsia6: #e07bef; --fc-fuchsia-b2: #5e3a5e; --fc-fuchsia-b3: #82508a; --fc-fuchsia-bg: #33233a; --fc-fuchsia-focus: #e07bef; --fc-pink6: #f06fa8; --fc-pink-b2: #5e3a4c; --fc-pink-b3: #82506a; --fc-pink-bg: #33232b; --fc-pink-focus: #f06fa8; --fc-amber6: #f0a83c; --fc-amber-b3: #6b5320; --fc-amber-focus: #f0a83c; /* Diagram (SVG) surface - stays light "paper" in v1 */ --fc-svg-bg: #ffffff; --fc-tint: #fefce8; --fc-line: #000000; --fc-line-soft: #666666; --fc-fretnum: #444444; --fc-dot: #000000; --fc-open-fill: #ffffff; --fc-open-stroke: #000000; --fc-zone-1: #000000; --fc-zone-2: #2563eb; --fc-zone-3: #7c3aed; --fc-root: #ffffff; --fc-marker-label: #ffffff; /* Dark-diagram surfaces: paper goes to the Darkly card color, the tint one step lighter so the board still reads as a fingerboard, and the ink/line lift to legible light values. Markers keep their SVG fills (Non-Goal). */ --fc-diagram-paper: #303030; --fc-diagram-tint: #3a3a3a; --fc-diagram-ink: #e5e7eb; --fc-diagram-line: #adb5bd; --fc-diagram-dot: #e5e7eb; --fc-diagram-zone1: #000000; /* 1st-position markers stay solid black with white labels (user preference); the white note label carries legibility on the board. */ /* Popular (winner) cards - navy set: deep navy card on the grey panel, a lighter navy on hover, a navy hairline, and a recessed navy inner box, so the cards read as distinct navy panels instead of grey-on-grey. */ --fc-winner-card: #28344d; --fc-winner-border: #3d5075; --fc-winner-inner: #1c2740; } /* First-visit default: follow the OS when no explicit choice is stored. Scoped to :root:not([data-theme]) so a stored choice always wins. Repeats the Darkly values for every token that differs from Light (including the four dark-diagram tokens, so OS-default dark themes the diagrams too). */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --fc-bg: #222222; --fc-surface: #303030; --fc-surface-alt: #2a2a2a; --fc-surface-2: #3a3a3a; --fc-text: #ffffff; --fc-text-heading: #f1f5f9; --fc-text-body: #e5e7eb; --fc-text-muted: #adb5bd; --fc-text-muted2: #c9ced3; --fc-text-faint: #949ba3; --fc-border: #3a3a3a; --fc-border-soft: #3a3a3a; --fc-border-faint: #3a3a3a; --fc-border-300: #4a4a4a; --fc-border-strong: #555555; --fc-primary: #00bc8c; --fc-primary-hover: #00a37a; --fc-secondary: #444444; --fc-secondary-hover: #555555; --fc-active: #375a7f; --fc-dark-btn: #1f1f1f; --fc-dark-btn-hover: #111111; --fc-success: #00bc8c; --fc-info: #3498db; --fc-info-tint: #17262f; --fc-info-border: #2b5573; --fc-warn: #f39c12; --fc-warn-strong: #f8b545; --fc-warn-solid: #f39c12; --fc-warn-tint: #3a2f16; --fc-warn-badge: #3a2f16; --fc-warn-border: #6b5320; --fc-danger: #e74c3c; --fc-danger-tint: #3a2320; --fc-accent: #6d78d6; --fc-accent-strong: #c7cdf2; --fc-accent-soft: #8b93de; --fc-accent-tint: #262a3d; --fc-accent-tint2: #2f3450; --fc-accent-border: #3d4468; --fc-accent-hover: #5a63c0; --fc-accent-ring: #8b93de; --fc-accent-tint-a: #262a3d; --fc-accent-border-a: #2f3450; --fc-info-strong: #5dade2; --fc-info-b2: #2b5573; --fc-info-b3: #3a6a8f; --fc-info-focus: #5dade2; --fc-purple5: #c084fc; --fc-purple6: #b57ce0; --fc-purple-b2: #4a3a5e; --fc-purple-b3: #6a4d82; --fc-purple-bg: #2a2333; --fc-fuchsia6: #e07bef; --fc-fuchsia-b2: #5e3a5e; --fc-fuchsia-b3: #82508a; --fc-fuchsia-bg: #33233a; --fc-fuchsia-focus: #e07bef; --fc-pink6: #f06fa8; --fc-pink-b2: #5e3a4c; --fc-pink-b3: #82506a; --fc-pink-bg: #33232b; --fc-pink-focus: #f06fa8; --fc-amber6: #f0a83c; --fc-amber-b3: #6b5320; --fc-amber-focus: #f0a83c; --fc-diagram-paper: #303030; --fc-diagram-tint: #3a3a3a; --fc-diagram-ink: #e5e7eb; --fc-diagram-line: #adb5bd; --fc-diagram-dot: #e5e7eb; --fc-diagram-zone1: #000000; --fc-winner-card: #28344d; --fc-winner-border: #3d5075; --fc-winner-inner: #1c2740; } } /* ========================================================================== Override rules - chrome shell (Phase 2). Each rule reads a token, so it applies in every theme: in Light the token equals the original Tailwind color (pixel no-op), in Dark it is the Darkly value, and @media print (bottom of file) forces the tokens back to Light. Selectors target the exact utility classes the shell emits; tabs.js regenerates these classes on every switch, so theming them here (not in JS) keeps tabs.js untouched. Coupled utilities (a markup change that drops one loses its theming): body bg-slate-50 / text-slate-900 H1 / version text-slate-800 / text-slate-400 active tab bg-slate-800 (ACTIVE_CLASS, TOGGLE_ACTIVE) inactive/2ndary bg-[#3d5a80] hover:bg-[#4a6a94] (tabs, Print, Share, idle toggle, Favorite, #theme-toggle) Generate CTA bg-emerald-600 hover:bg-emerald-700 dark actions bg-slate-900 hover:bg-black (Find, Load, Print Guide) cards/panels bg-white, border-slate-100 / border-slate-200 ========================================================================== */ /* Body and text weights (body uses element+class so it out-specifies the generic .bg-slate-50 recessed-surface rule added in Phase 3). */ body.bg-slate-50 { background-color: var(--fc-bg); } .text-slate-900 { color: var(--fc-text); } .text-slate-800 { color: var(--fc-text-heading); } .text-slate-400 { color: var(--fc-text-faint); } /* Cards / panels and their hairline borders. */ .bg-white { background-color: var(--fc-surface); } .border-slate-100 { border-color: var(--fc-border-soft); } .border-slate-200 { border-color: var(--fc-border); } /* Active tab / active orientation toggle. */ .bg-slate-800 { background-color: var(--fc-active); } /* Secondary chalky-navy set (inactive tabs, Print, Share, idle toggle, Favorite, theme toggle). Escaped arbitrary-value selectors. */ .bg-\[\#3d5a80\] { background-color: var(--fc-secondary); } .hover\:bg-\[\#4a6a94\]:hover { background-color: var(--fc-secondary-hover); } /* Primary CTA (Generate). */ .bg-emerald-600 { background-color: var(--fc-primary); } .hover\:bg-emerald-700:hover { background-color: var(--fc-primary-hover); } /* Near-black action buttons (Find Progressions, Load, Print Practice Guide). */ .bg-slate-900 { background-color: var(--fc-dark-btn); } .hover\:bg-black:hover { background-color: var(--fc-dark-btn-hover); } /* ========================================================================== Colorful headings. Titles get the cool-to-warm palette gradient (the same blue->purple->fuchsia->pink family as the Generate fields); subtitles and section headers take single palette hues. All read existing hue tokens, so they brighten in Dark and reset to the Light hues under @media print (see the print reset below), replacing the old all-black/all-white headers. ========================================================================== */ .fc-title-grad { background-image: linear-gradient(90deg, var(--fc-info-strong) 0%, var(--fc-purple6) 40%, var(--fc-fuchsia6) 70%, var(--fc-pink6) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .fc-subhead { color: var(--fc-accent); } .fc-head-blue { color: var(--fc-info-strong); } .fc-head-purple { color: var(--fc-purple6); } .fc-head-fuchsia { color: var(--fc-fuchsia6); } .fc-head-pink { color: var(--fc-pink6); } .fc-bar-blue { border-color: var(--fc-info-strong); } .fc-bar-purple { border-color: var(--fc-purple6); } .fc-bar-fuchsia { border-color: var(--fc-fuchsia6); } .fc-bar-pink { border-color: var(--fc-pink6); } /* Print reset: gradient-clipped text would print as invisible transparent ink, so force solid heading ink on paper. */ @media print { .fc-title-grad { background-image: none; -webkit-text-fill-color: var(--fc-text-heading); color: var(--fc-text-heading); } } /* ========================================================================== Override rules - views + Generate form (Phase 3). Same unconditional token pattern as Phase 2. Covers Popular, My Chords, Favorites, the Workbook sheet, and the cool-to-warm Generate fields. ========================================================================== */ /* Neutral text weights (900/800/400 in Phase 2). */ .text-slate-700 { color: var(--fc-text-body); } .text-slate-600 { color: var(--fc-text-muted2); } .text-slate-500 { color: var(--fc-text-muted); } .hover\:text-slate-600:hover { color: var(--fc-text-muted2); } /* Recessed surfaces (body handled specifically in Phase 2) and borders. */ .bg-slate-50 { background-color: var(--fc-surface-alt); } .bg-slate-100 { background-color: var(--fc-surface-2); } .border-slate-50 { border-color: var(--fc-border-faint); } .border-slate-300 { border-color: var(--fc-border-300); } .border-slate-900 { border-color: var(--fc-border-strong); } /* Semantic accents - text. */ .text-green-600 { color: var(--fc-success); } .text-red-600 { color: var(--fc-danger); } .text-blue-600 { color: var(--fc-info); } .text-blue-700 { color: var(--fc-info-strong); } .text-amber-700 { color: var(--fc-warn); } .text-amber-800 { color: var(--fc-warn-strong); } .text-amber-600 { color: var(--fc-amber6); } .text-purple-500 { color: var(--fc-purple5); } .text-purple-600 { color: var(--fc-purple6); } .text-fuchsia-600 { color: var(--fc-fuchsia6); } .text-pink-600 { color: var(--fc-pink6); } .text-indigo-400 { color: var(--fc-accent-soft); } .text-indigo-600 { color: var(--fc-accent); } .text-indigo-900 { color: var(--fc-accent-strong); } /* Semantic accents - backgrounds (tints, solids, and their hover states). */ .bg-blue-50 { background-color: var(--fc-info-tint); } .bg-blue-600 { background-color: var(--fc-info); } .bg-red-100 { background-color: var(--fc-danger-tint); } .hover\:bg-red-600:hover { background-color: var(--fc-danger); } .bg-amber-50 { background-color: var(--fc-warn-tint); } .bg-amber-100 { background-color: var(--fc-warn-badge); } .bg-amber-500 { background-color: var(--fc-warn-solid); } .bg-indigo-50 { background-color: var(--fc-accent-tint); } .bg-indigo-100 { background-color: var(--fc-accent-tint2); } .bg-indigo-600 { background-color: var(--fc-accent); } .hover\:bg-indigo-100:hover { background-color: var(--fc-accent-tint2); } .hover\:bg-indigo-700:hover { background-color: var(--fc-accent-hover); } .bg-purple-50 { background-color: var(--fc-purple-bg); } .bg-fuchsia-50 { background-color: var(--fc-fuchsia-bg); } .bg-pink-50 { background-color: var(--fc-pink-bg); } /* Alpha-modifier boxes (bg-indigo-50/50, border-indigo-100/50): the Light token holds the EXACT 50%-alpha rgba so Light is pixel-identical over any parent; the dark token is an opaque dark fill (Suspicion 1). */ .bg-indigo-50\/50 { background-color: var(--fc-accent-tint-a); } .border-indigo-100\/50 { border-color: var(--fc-accent-border-a); } /* Semantic accents - borders. */ .border-blue-100 { border-color: var(--fc-info-border); } .border-blue-200 { border-color: var(--fc-info-b2); } .border-blue-300 { border-color: var(--fc-info-b3); } .hover\:border-blue-300:hover { border-color: var(--fc-info-b3); } .border-blue-600 { border-color: var(--fc-info); } .border-amber-200 { border-color: var(--fc-warn-border); } .border-amber-300 { border-color: var(--fc-amber-b3); } .border-indigo-100 { border-color: var(--fc-accent-tint2); } .border-indigo-200 { border-color: var(--fc-accent-border); } .border-indigo-400 { border-color: var(--fc-accent-soft); } .border-purple-200 { border-color: var(--fc-purple-b2); } .border-purple-300 { border-color: var(--fc-purple-b3); } .border-fuchsia-200 { border-color: var(--fc-fuchsia-b2); } .border-fuchsia-300 { border-color: var(--fc-fuchsia-b3); } .border-pink-200 { border-color: var(--fc-pink-b2); } .border-pink-300 { border-color: var(--fc-pink-b3); } /* Focus states: brighter borders/rings so focus stays visible on dark (Suspicion 2). Light values equal the originals, so no light change. */ .focus\:border-blue-500:focus { border-color: var(--fc-info-focus); } .focus\:border-purple-500:focus { border-color: var(--fc-purple5); } .focus\:border-fuchsia-500:focus { border-color: var(--fc-fuchsia-focus); } .focus\:border-pink-500:focus { border-color: var(--fc-pink-focus); } .focus\:border-amber-500:focus { border-color: var(--fc-amber-focus); } .focus\:ring-indigo-500:focus { --tw-ring-color: var(--fc-accent-ring); } /* ========================================================================== Popular (winner) cards - dark only (never printed). Base cards get a navy surface (not grey-on-grey), the inner play box a recessed navy, and all card text is forced to legible theme colors. On HOVER each card takes on a dark wash of its own hue plus Tailwind's bright hover:border-*-500 (parity with the light-mode rainbow hover): the base card intentionally does NOT set a border-color, so the low-specificity themed .border-slate-50 hairline holds at rest and the per-hue hover border wins on hover. The 18 hover washes are duplicated for the two dark contexts (explicit choice + OS default). ========================================================================== */ :root[data-theme="dark"] .winner-card { background-color: var(--fc-winner-card); } :root[data-theme="dark"] .winner-card .rounded-lg { background-color: var(--fc-winner-inner); border-color: var(--fc-winner-border); } :root[data-theme="dark"] .winner-card span, :root[data-theme="dark"] .winner-card h3, :root[data-theme="dark"] .winner-card > div:not(.rounded-lg), :root[data-theme="dark"] .winner-key-chip { color: var(--fc-text); } :root[data-theme="dark"] .winner-card > p { color: var(--fc-text-muted); } :root[data-theme="dark"] .winner-card .rounded-lg span { color: var(--fc-text-muted); } :root[data-theme="dark"] .winner-card .rounded-lg p { color: var(--fc-text); } :root[data-theme="dark"] .winner-card.hover\:bg-red-50:hover { background-color: #3a2020; } :root[data-theme="dark"] .winner-card.hover\:bg-orange-50:hover { background-color: #3a2a18; } :root[data-theme="dark"] .winner-card.hover\:bg-amber-50:hover { background-color: #3a2f16; } :root[data-theme="dark"] .winner-card.hover\:bg-yellow-50:hover { background-color: #34301a; } :root[data-theme="dark"] .winner-card.hover\:bg-lime-50:hover { background-color: #26311b; } :root[data-theme="dark"] .winner-card.hover\:bg-green-50:hover { background-color: #1e3322; } :root[data-theme="dark"] .winner-card.hover\:bg-emerald-50:hover { background-color: #17302a; } :root[data-theme="dark"] .winner-card.hover\:bg-teal-50:hover { background-color: #163331; } :root[data-theme="dark"] .winner-card.hover\:bg-cyan-50:hover { background-color: #163540; } :root[data-theme="dark"] .winner-card.hover\:bg-sky-50:hover { background-color: #182a3d; } :root[data-theme="dark"] .winner-card.hover\:bg-blue-50:hover { background-color: #1b2c48; } :root[data-theme="dark"] .winner-card.hover\:bg-indigo-50:hover { background-color: #262a3d; } :root[data-theme="dark"] .winner-card.hover\:bg-violet-50:hover { background-color: #2b2442; } :root[data-theme="dark"] .winner-card.hover\:bg-purple-50:hover { background-color: #2c2436; } :root[data-theme="dark"] .winner-card.hover\:bg-fuchsia-50:hover { background-color: #34233b; } :root[data-theme="dark"] .winner-card.hover\:bg-pink-50:hover { background-color: #34232c; } :root[data-theme="dark"] .winner-card.hover\:bg-rose-50:hover { background-color: #3a2029; } :root[data-theme="dark"] .winner-card.hover\:bg-slate-50:hover { background-color: #2b2f37; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .winner-card { background-color: var(--fc-winner-card); } :root:not([data-theme]) .winner-card .rounded-lg { background-color: var(--fc-winner-inner); border-color: var(--fc-winner-border); } :root:not([data-theme]) .winner-card span, :root:not([data-theme]) .winner-card h3, :root:not([data-theme]) .winner-card > div:not(.rounded-lg), :root:not([data-theme]) .winner-key-chip { color: var(--fc-text); } :root:not([data-theme]) .winner-card > p { color: var(--fc-text-muted); } :root:not([data-theme]) .winner-card .rounded-lg span { color: var(--fc-text-muted); } :root:not([data-theme]) .winner-card .rounded-lg p { color: var(--fc-text); } :root:not([data-theme]) .winner-card.hover\:bg-red-50:hover { background-color: #3a2020; } :root:not([data-theme]) .winner-card.hover\:bg-orange-50:hover { background-color: #3a2a18; } :root:not([data-theme]) .winner-card.hover\:bg-amber-50:hover { background-color: #3a2f16; } :root:not([data-theme]) .winner-card.hover\:bg-yellow-50:hover { background-color: #34301a; } :root:not([data-theme]) .winner-card.hover\:bg-lime-50:hover { background-color: #26311b; } :root:not([data-theme]) .winner-card.hover\:bg-green-50:hover { background-color: #1e3322; } :root:not([data-theme]) .winner-card.hover\:bg-emerald-50:hover { background-color: #17302a; } :root:not([data-theme]) .winner-card.hover\:bg-teal-50:hover { background-color: #163331; } :root:not([data-theme]) .winner-card.hover\:bg-cyan-50:hover { background-color: #163540; } :root:not([data-theme]) .winner-card.hover\:bg-sky-50:hover { background-color: #182a3d; } :root:not([data-theme]) .winner-card.hover\:bg-blue-50:hover { background-color: #1b2c48; } :root:not([data-theme]) .winner-card.hover\:bg-indigo-50:hover { background-color: #262a3d; } :root:not([data-theme]) .winner-card.hover\:bg-violet-50:hover { background-color: #2b2442; } :root:not([data-theme]) .winner-card.hover\:bg-purple-50:hover { background-color: #2c2436; } :root:not([data-theme]) .winner-card.hover\:bg-fuchsia-50:hover { background-color: #34233b; } :root:not([data-theme]) .winner-card.hover\:bg-pink-50:hover { background-color: #34232c; } :root:not([data-theme]) .winner-card.hover\:bg-rose-50:hover { background-color: #3a2029; } :root:not([data-theme]) .winner-card.hover\:bg-slate-50:hover { background-color: #2b2f37; } } /* ========================================================================== My Chords (discovery) controls - dark only. The filter selects use bg-white (-> --fc-surface, identical to the panel) and the picker chips use a faint border-slate-200 outline, so in dark they read as grey-on-grey with no field edge. Give the selects and the UNCHECKED chips a darker inset fill plus a brighter border so they read as real controls; checked chips keep their blue peer-checked fill untouched (the :not(:checked) scope never matches them). The panel is .no-print, so no print reset is needed (tokens reset anyway). Duplicated for the two dark contexts. ========================================================================== */ :root[data-theme="dark"] #discovery-panel select { background-color: var(--fc-surface-alt); border-color: var(--fc-border-strong); } :root[data-theme="dark"] #discovery-panel .peer:not(:checked) ~ span { background-color: var(--fc-surface-2); border-color: var(--fc-border-strong); } :root[data-theme="dark"] #discovery-panel .peer:not(:checked) ~ span:hover { border-color: var(--fc-info-b3); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) #discovery-panel select { background-color: var(--fc-surface-alt); border-color: var(--fc-border-strong); } :root:not([data-theme]) #discovery-panel .peer:not(:checked) ~ span { background-color: var(--fc-surface-2); border-color: var(--fc-border-strong); } :root:not([data-theme]) #discovery-panel .peer:not(:checked) ~ span:hover { border-color: var(--fc-info-b3); } } /* ========================================================================== Dark diagram surfaces (plan-dark-diagrams). The SVG builders carry literal fill/stroke attributes AND additive class hooks (fc-paper, fc-tint, fc-ink, fc-line). These rules override the presentation attributes ONLY in the dark contexts, so Light and print keep the literal SVG values untouched (the @media print reset below also re-points these tokens to Light, so a dark screen still prints ink on white). Markers keep their own fills (Non-Goal). Duplicated for the two dark contexts (explicit choice + OS default), same as the winner-card rules above. ========================================================================== */ :root[data-theme="dark"] .fc-paper { fill: var(--fc-diagram-paper); } :root[data-theme="dark"] .fc-tint { fill: var(--fc-diagram-tint); } :root[data-theme="dark"] .fc-ink { fill: var(--fc-diagram-ink); } :root[data-theme="dark"] .fc-line { stroke: var(--fc-diagram-line); } /* Chord finger dots (no note label) would vanish on the dark board, so lift them. The neck's 1st-position markers stay solid black with white labels (the label carries legibility) per user preference, so --fc-diagram-zone1 is black in dark too - the hook is kept so it can be retuned in one place. The r=4 open markers and blue/purple zones keep their own fills. Marker fills stay literal in the SVG (tests + print). */ :root[data-theme="dark"] .fc-dot { fill: var(--fc-diagram-dot); } :root[data-theme="dark"] .fc-zone1 { fill: var(--fc-diagram-zone1); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .fc-paper { fill: var(--fc-diagram-paper); } :root:not([data-theme]) .fc-tint { fill: var(--fc-diagram-tint); } :root:not([data-theme]) .fc-ink { fill: var(--fc-diagram-ink); } :root:not([data-theme]) .fc-line { stroke: var(--fc-diagram-line); } :root:not([data-theme]) .fc-dot { fill: var(--fc-diagram-dot); } :root:not([data-theme]) .fc-zone1 { fill: var(--fc-diagram-zone1); } } /* ========================================================================== Print reset (Phase 3.3). Re-assert the LIGHT token values for both dark contexts so a dark screen theme always prints as ink on white paper. Because every override above reads a token, restoring Light tokens reverts the whole chrome and sheet to Light with no per-element print rules. The binder-ready @media print layout itself lives in css/app.css. ========================================================================== */ @media print { :root[data-theme="dark"], :root:not([data-theme]) { --fc-bg: #f8fafc; --fc-surface: #ffffff; --fc-surface-alt: #f8fafc; --fc-surface-2: #f1f5f9; --fc-text: #0f172a; --fc-text-heading: #1e293b; --fc-text-body: #334155; --fc-text-muted: #64748b; --fc-text-muted2: #475569; --fc-text-faint: #94a3b8; --fc-border: #e2e8f0; --fc-border-soft: #f1f5f9; --fc-border-faint: #f8fafc; --fc-border-300: #cbd5e1; --fc-border-strong: #0f172a; --fc-primary: #059669; --fc-primary-hover: #047857; --fc-secondary: #3d5a80; --fc-secondary-hover: #4a6a94; --fc-active: #1e293b; --fc-dark-btn: #0f172a; --fc-dark-btn-hover: #000000; --fc-success: #16a34a; --fc-info: #2563eb; --fc-info-tint: #eff6ff; --fc-info-border: #dbeafe; --fc-warn: #b45309; --fc-warn-strong: #92400e; --fc-warn-solid: #f59e0b; --fc-warn-tint: #fffbeb; --fc-warn-badge: #fef3c7; --fc-warn-border: #fde68a; --fc-danger: #dc2626; --fc-danger-tint: #fee2e2; --fc-accent: #4f46e5; --fc-accent-strong: #312e81; --fc-accent-soft: #818cf8; --fc-accent-tint: #eef2ff; --fc-accent-tint2: #e0e7ff; --fc-accent-border: #c7d2fe; --fc-accent-hover: #4338ca; --fc-accent-ring: #6366f1; --fc-accent-tint-a: rgba(238, 242, 255, 0.5); --fc-accent-border-a: rgba(224, 231, 255, 0.5); --fc-info-strong: #1d4ed8; --fc-info-b2: #bfdbfe; --fc-info-b3: #93c5fd; --fc-info-focus: #3b82f6; --fc-purple5: #a855f7; --fc-purple6: #9333ea; --fc-purple-b2: #e9d5ff; --fc-purple-b3: #d8b4fe; --fc-purple-bg: #faf5ff; --fc-fuchsia6: #c026d3; --fc-fuchsia-b2: #f5d0fe; --fc-fuchsia-b3: #f0abfc; --fc-fuchsia-bg: #fdf4ff; --fc-fuchsia-focus: #d946ef; --fc-pink6: #db2777; --fc-pink-b2: #fbcfe8; --fc-pink-b3: #f9a8d4; --fc-pink-bg: #fdf2f8; --fc-pink-focus: #ec4899; --fc-amber6: #d97706; --fc-amber-b3: #fcd34d; --fc-amber-focus: #f59e0b; --fc-diagram-paper: #ffffff; --fc-diagram-tint: #fefce8; --fc-diagram-ink: #000000; --fc-diagram-line: #666666; --fc-diagram-dot: #000000; --fc-diagram-zone1: #000000; --fc-winner-card: transparent; --fc-winner-border: #e2e8f0; --fc-winner-inner: #ffffff; } }