/* ============================================================================ Scoreflection — Design Tokens (COMMON / SHARED) ---------------------------------------------------------------------------- The shared foundation: colors, typography, spacing, radii, shadows, motion. Just CSS custom properties — no component styles. >> THIS IS YOUR KNOB PANEL. To restyle the whole site, edit values here. This is the ONLY stylesheet meant to be reused by the future web app. Split out of a Claude Design export (see README.md "Updating the design"). Pairs with: DM Sans (UI), Fraunces (display). Dark mode: ============================================================================ */ /* ---------- Tokens -------------------------------------------------------- */ :root { /* Surfaces */ --sf-bg: oklch(97% 0.008 280); --sf-surface: #ffffff; --sf-surface-variant: oklch(93% 0.025 280); --sf-surface-high: oklch(90% 0.03 280); --sf-on-surface: oklch(15% 0.04 280); --sf-on-surface-variant: oklch(42% 0.06 280); --sf-outline: oklch(70% 0.05 280); --sf-outline-variant: oklch(88% 0.025 280); --sf-inverse-surface: oklch(22% 0.04 280); --sf-inverse-on-surface: oklch(94% 0.02 280); --sf-shadow: rgba(20, 14, 60, 0.10); --sf-shadow-strong: rgba(20, 14, 60, 0.18); /* Primary — Scoreflection purple */ --sf-primary: oklch(52% 0.22 280); --sf-on-primary: #ffffff; --sf-primary-container: oklch(92% 0.08 280); --sf-on-primary-container: oklch(28% 0.18 280); --sf-primary-hover: oklch(46% 0.22 280); --sf-primary-press: oklch(40% 0.22 280); /* Secondary — teal */ --sf-secondary: oklch(52% 0.14 195); --sf-on-secondary: #ffffff; --sf-secondary-container: oklch(90% 0.07 195); --sf-on-secondary-container:oklch(26% 0.12 195); /* Tertiary — amber */ --sf-tertiary: oklch(54% 0.14 55); --sf-on-tertiary: #ffffff; --sf-tertiary-container: oklch(92% 0.07 55); --sf-on-tertiary-container: oklch(28% 0.12 55); /* Feedback (site UI — badges, status pills) */ --sf-correct: oklch(55% 0.18 145); --sf-wrong: oklch(50% 0.20 25); --sf-neutral: oklch(52% 0.14 195); /* Notehead feedback — the EXACT colors the app paints onto the score. Copied from NoteFeedbackPalette in the app (display/NoteFeedback.kt). They are hard-coded there and identical in light and dark, so don't "improve" them: the page and the app have to teach the same visual language. Only --sf-note-missed and --sf-note-extra follow the theme, because in the app they resolve from the color scheme (onSurfaceVariant / error). */ --sf-note-correct: #0000ff; /* Color.Blue — also short + long */ --sf-note-wrong: #ff0000; /* Color.Red */ --sf-note-soft: #e5c8ac; /* correct, but too soft */ --sf-note-loud: #dd881b; /* correct, but too loud */ --sf-note-missed: #5c5f73; /* onSurfaceVariant, light */ --sf-note-extra: #d14343; /* colorScheme.error, light */ /* Score / sheet music background — stays warm in both modes */ --sf-score-bg: oklch(98.5% 0.012 80); --sf-score-lines: oklch(18% 0.01 280); --sf-score-ink: oklch(18% 0.01 280); /* Annotation accents (from ds-tokens) */ --sf-ann-blue: oklch(40% 0.12 250); --sf-ann-rose: oklch(50% 0.10 15); --sf-ann-olive: oklch(46% 0.10 130); --sf-ann-amber: oklch(52% 0.12 65); --sf-ann-graphite: oklch(33% 0.02 280); /* Instrument family palette (lifted from clefbot_export) */ --sf-fam-keys: oklch(52% 0.22 280); --sf-fam-keys-c: oklch(92% 0.08 280); --sf-fam-strings: oklch(50% 0.16 52); --sf-fam-strings-c: oklch(93% 0.07 55); --sf-fam-brass: oklch(52% 0.18 75); --sf-fam-brass-c: oklch(93% 0.08 75); --sf-fam-woodwind: oklch(48% 0.16 195); --sf-fam-woodwind-c: oklch(91% 0.07 195); --sf-fam-percussion: oklch(50% 0.18 15); --sf-fam-percussion-c: oklch(93% 0.07 15); --sf-fam-vocal: oklch(50% 0.18 340); --sf-fam-vocal-c: oklch(93% 0.07 340); --sf-fam-maestro: oklch(32% 0.06 280); --sf-fam-maestro-c: oklch(90% 0.02 280); /* Typography */ --sf-font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --sf-font-display: 'Fraunces', 'DM Sans', Georgia, serif; --sf-font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Type scale (M3-leaning) */ --sf-display-xl: clamp(56px, 9vw, 112px); --sf-display-l: clamp(44px, 6.2vw, 72px); --sf-display-m: clamp(36px, 4.6vw, 56px); --sf-headline-l: 32px; --sf-headline-m: 28px; --sf-headline-s: 24px; --sf-title-l: 22px; --sf-title-m: 16px; --sf-title-s: 14px; --sf-body-l: 17px; --sf-body-m: 15px; --sf-body-s: 13px; --sf-label-l: 14px; --sf-label-m: 12px; --sf-label-s: 11px; /* Spacing scale */ --sf-s-1: 4px; --sf-s-2: 8px; --sf-s-3: 12px; --sf-s-4: 16px; --sf-s-5: 20px; --sf-s-6: 24px; --sf-s-7: 32px; --sf-s-8: 40px; --sf-s-9: 48px; --sf-s-10: 64px; --sf-s-11: 80px; --sf-s-12: 120px; /* Radii */ --sf-r-xs: 4px; --sf-r-sm: 8px; --sf-r-md: 12px; --sf-r-lg: 16px; --sf-r-xl: 24px; --sf-r-2xl: 28px; --sf-r-3xl: 36px; --sf-r-full: 9999px; /* Elevation */ --sf-elev-1: 0 1px 2px var(--sf-shadow), 0 1px 3px var(--sf-shadow); --sf-elev-2: 0 2px 6px var(--sf-shadow), 0 4px 12px var(--sf-shadow); --sf-elev-3: 0 6px 20px var(--sf-shadow), 0 12px 40px var(--sf-shadow); --sf-elev-glow: 0 8px 32px oklch(52% 0.22 280 / 0.30); /* Motion */ --sf-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --sf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --sf-dur-1: 120ms; --sf-dur-2: 220ms; --sf-dur-3: 360ms; /* Layout */ --sf-container: 1200px; --sf-container-wide: 1360px; --sf-container-narrow: 820px; } /* ---------- Dark mode ----------------------------------------------------- */ [data-theme="dark"] { --sf-bg: oklch(12% 0.03 280); --sf-surface: oklch(16% 0.04 280); --sf-surface-variant: oklch(24% 0.06 280); --sf-surface-high: oklch(28% 0.07 280); --sf-on-surface: oklch(92% 0.02 280); --sf-on-surface-variant: oklch(72% 0.05 280); --sf-outline: oklch(52% 0.07 280); --sf-outline-variant: oklch(34% 0.07 280); --sf-inverse-surface: oklch(92% 0.02 280); --sf-inverse-on-surface: oklch(20% 0.04 280); --sf-shadow: rgba(0, 0, 0, 0.4); --sf-shadow-strong: rgba(0, 0, 0, 0.55); --sf-primary: oklch(74% 0.17 280); --sf-on-primary: oklch(22% 0.18 280); --sf-primary-container: oklch(38% 0.20 280); --sf-on-primary-container: oklch(92% 0.08 280); --sf-primary-hover: oklch(80% 0.17 280); --sf-primary-press: oklch(68% 0.20 280); --sf-secondary: oklch(70% 0.12 195); --sf-on-secondary: oklch(20% 0.12 195); --sf-secondary-container: oklch(34% 0.14 195); --sf-on-secondary-container:oklch(90% 0.07 195); --sf-tertiary: oklch(72% 0.12 55); --sf-on-tertiary: oklch(22% 0.12 55); --sf-tertiary-container: oklch(38% 0.14 55); --sf-on-tertiary-container: oklch(92% 0.07 55); /* The two notehead colors the app derives from its color scheme (the rest are hard-coded and stay put — see the :root block). */ --sf-note-missed: #b7b9cc; /* onSurfaceVariant, dark */ --sf-note-extra: #b64a5b; /* colorScheme.error, dark */ --sf-elev-1: 0 1px 2px var(--sf-shadow), 0 2px 6px var(--sf-shadow); --sf-elev-2: 0 4px 14px var(--sf-shadow), 0 8px 24px var(--sf-shadow); --sf-elev-3: 0 8px 30px var(--sf-shadow-strong), 0 16px 60px var(--sf-shadow); --sf-elev-glow: 0 8px 36px oklch(74% 0.17 280 / 0.40); }