/* fcc.cc/music — design tokens * * Mirrors var/www/fcc-library/tokens.css. Scoped to [data-app="music"] * on so it never leaks into other apps if anything ever cross-loads. * * Loaded BEFORE styles.new.css so the redesign chrome can reference these * --bg-*, --text-*, --border, --accent-music, --label-*, --font-*, --radius-*, * --ed-hatch, and --density-scale tokens. * * Default theme: DARK. The design handoff screenshots are all dark, the * design canvas's primary `C.bg = '#0e0c09'` is the dark value, and the * spec README lists dark before light in the color table. Light is an * opt-in override via data-theme="light" or the FCC theme presets. * * Theme integration: matches data-theme, data-mode, and :root.fcc-v2-dark * (the FCC-wide theme triple-selector — same as /library) so tokens flip * whether the user toggles theme via /music Settings (data-theme) or the * shared topbar theme picker (data-mode / .fcc-v2-dark). */ [data-app="music"] { /* ── Color · Surfaces (dark — DEFAULT, matches design screenshots) ── * Lifted verbatim from design_handoff_fcc_music_redesign README §"Color" * dark column. */ --bg-canvas: #0e0c09; --bg-surface: #181511; --bg-surface-2: #1f1c17; --text-primary: #ece2c8; --text-dim: rgba(236, 226, 200, .62); --text-faint: rgba(236, 226, 200, .38); --border: rgba(232, 200, 120, .10); /* ── Color · Music-only accents ── */ --accent-music: #c97a2a; /* warm amber — replaces /library accent */ --label-ok: #7a8b3a; /* verified source */ --label-warn: #d2a050; /* partial / unconfirmed */ --label-error: #c33a2a; /* broken / wrong */ /* ── Typography · Families ── */ --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-body: ui-sans-serif, "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ── Radius ── */ --radius-card: 6px; --radius-stamp: 3px; --radius-button: 3px; /* ── Hatch ribbon — used on TapeCard headers + section toppers ── */ --ed-hatch: repeating-linear-gradient( 45deg, var(--accent-music) 0 5px, transparent 5px 9px); /* ── Density (compact .85 / regular 1.00 / comfy 1.15) ── */ --density-scale: 1.00; /* ── Motion ── */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-easing: cubic-bezier(.2, .8, .2, 1); } /* ── Light theme override ── * Triple selector mirrors /library tokens.css — the FCC theme system * (fcc-theme-boot.js) sets data-mode="light" + class .fcc-v2-light on * when the user picks a light preset (newsprint, paper); the * music Settings page sets data-theme="light" directly on . */ [data-app="music"][data-theme="light"], [data-app="music"][data-mode="light"], [data-app="music"]:root.fcc-v2-light, [data-app="music"] :root.fcc-v2-light { --bg-canvas: #f4ecd8; --bg-surface: #fbf6e6; --bg-surface-2: #f8f0d8; --text-primary: #1a160e; --text-dim: rgba(26, 22, 14, .62); --text-faint: rgba(26, 22, 14, .38); --border: rgba(26, 22, 14, .10); } /* ── Density variants ── */ [data-app="music"][data-density="compact"] { --density-scale: .85; } [data-app="music"][data-density="comfy"] { --density-scale: 1.15; } /* ── Reduced motion: zero out durations ── */ @media (prefers-reduced-motion: reduce) { [data-app="music"] { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } }