/* ============================================================================ 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. PALETTE: "Ink & Brass" (design system v2.0.0). Deep ink navy carries structure, logo and CTAs; brass is the warm accent that does the loud brand work; stone is the quiet third. >> THE COLORS BELOW ARE NOT AUTHORED HERE. They are ported from the app's source of truth: ScoreflectionApp/design/design-tokens.json Every color carries its palette key in a trailing comment (`ink-34`, `brass-62`, …), so any value can be checked against that file by grepping the key — no color picker, no guessing. The number in a key is the OKLCH lightness the color was authored at. A few values are marked DERIVED: the design defines no such role, and the site needs one. Those are authored in OKLCH at the design's own chroma discipline and converted to hex, the same way `ink-96` is derived over there. Everything else is a straight copy — if it disagrees with design-tokens.json, design-tokens.json is right. Hues 145 (green), 25 (red), 195/210 (teal) and 65 (amber) are RESERVED by the practice-feedback system. Brand colors stay clear of them. That is why the feedback and difficulty colors below look untouched by the repalette — they are, on purpose. Pairs with: DM Sans (UI), Fraunces (display). Dark mode: NOTE: the type scale below is the marketing scale and is deliberately NOT the app's. The design system's own scale (displayLarge 57/300) is tuned for screens full of controls; a landing page hero needs to go bigger. Colors are shared, type is not. ============================================================================ */ /* ---------- Tokens -------------------------------------------------------- */ :root { /* Surfaces — the slate neutrals, hue 255 */ --sf-bg: #F2F5F9; /* slate-97 */ --sf-surface: #FFFFFF; /* slate-000 */ --sf-surface-variant: #E1E9F2; /* slate-93 */ --sf-surface-high: #D5DFEB; /* slate-90 */ --sf-on-surface: #050E1A; /* slate-16 */ --sf-on-surface-variant: #445469; /* slate-44 */ --sf-outline: #92A0B1; /* slate-70 */ --sf-outline-variant: #D0D8E4; /* slate-88 */ --sf-inverse-surface: #0E2036; /* slate-24 */ --sf-inverse-on-surface: #E6ECF3; /* slate-94 */ /* Shadows are tinted with the deep ink rather than neutral black, so elevation reads as part of the palette. rgb() of ink-24. */ --sf-shadow: rgba(3, 29, 68, 0.10); --sf-shadow-strong: rgba(3, 29, 68, 0.18); /* Primary — Ink. Deep navy: reads as considered near-black, never as the feedback blue the app paints correct noteheads with. */ --sf-primary: #193763; /* ink-34 */ --sf-on-primary: #FFFFFF; /* slate-000 */ --sf-primary-container: #D1E3FC; /* ink-91 */ --sf-on-primary-container: #031D44; /* ink-24 */ --sf-primary-hover: #0C2A55; /* DERIVED oklch(29% 0.085 258) — one even step down the ink ramp from ink-34 */ --sf-primary-press: #031D44; /* ink-24 */ /* Secondary — Stone. Retuned off the old teal so it no longer collides with rhythm feedback. */ --sf-secondary: #786550; /* stone-52 */ --sf-on-secondary: #FFFFFF; /* slate-000 */ --sf-secondary-container: #F0E2D3; /* stone-92 */ --sf-on-secondary-container:#362512; /* stone-28 */ /* Tertiary — Brass. The warm accent, and the loud half of the brand. DARK text on brass, never white — brass-62 is too light to carry white. */ --sf-tertiary: #A38122; /* brass-62 */ --sf-on-tertiary: #07162C; /* ink-20 */ --sf-tertiary-container: #F6E7C3; /* brass-93 */ --sf-on-tertiary-container: #3B2B00; /* brass-30 */ /* Feedback (site UI — badges, status pills). On the reserved hues, and these are the design's own values for them. */ --sf-correct: #008A23; /* green-55 */ --sf-wrong: #BB061E; /* red-50 — also colorScheme.error */ --sf-neutral: #007879; /* cyan-52 */ /* Notehead feedback — the EXACT colors the app paints onto the score. Copied from NoteFeedbackPalette in the app (display/data/FeedbackColors.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. Ink & Brass did NOT touch these — the renderer lives in :render and the design generator does not reach it (see design-tokens.json "notWired"). 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: #445469; /* onSurfaceVariant, light = slate-44 */ --sf-note-extra: #BB061E; /* colorScheme.error, light = red-50 */ /* Score / sheet music background — warm optical white in BOTH modes, because sheet music needs high-contrast fine lines. The surrounding UI adapts; the score does not. */ --sf-score-bg: #FEF9F1; /* score-bg-light */ --sf-score-lines: #0F1216; /* score-lines */ --sf-score-ink: #0F1216; /* score-lines */ /* Annotation accents — the scholar palette. Identical in light and dark. */ --sf-ann-blue: #004982; /* ann-blue */ --sf-ann-rose: #934951; /* ann-rose */ --sf-ann-olive: #456320; /* ann-olive */ --sf-ann-amber: #965800; /* ann-amber */ --sf-ann-graphite: #2F3640; /* ann-graphite */ /* Instrument family palette — SITE ONLY. The app has no family colors, so unlike everything above this has no upstream to copy. It is built out of the design's own ramps wherever one exists: the three brand ramps take the three families they literally name (keys=ink, strings=stone, brass=brass), and percussion takes the design's red. Woodwind and vocal have no design value at all and are DERIVED. `--_p` is used as TEXT on --sf-surface (see .sf-fam-card__meta), so every one of these needs a dark-mode counterpart — a 52%-lightness ink on a near-black surface is unreadable. That is what the [data-theme="dark"] block redefines; the old palette skipped it and the cards went muddy. */ --sf-fam-keys: #193763; /* ink-34 */ --sf-fam-keys-c: #D1E3FC; /* ink-91 */ --sf-fam-strings: #786550; /* stone-52 */ --sf-fam-strings-c: #F0E2D3; /* stone-92 */ --sf-fam-brass: #A38122; /* brass-62 */ --sf-fam-brass-c: #F6E7C3; /* brass-93 */ --sf-fam-woodwind: #007879; /* cyan-52 */ --sf-fam-woodwind-c: #C3EFEE; /* DERIVED oklch(92% 0.045 196) */ --sf-fam-percussion: #BB061E; /* red-50 */ --sf-fam-percussion-c: #FFDBD7; /* red-92 */ --sf-fam-vocal: #9E3F84; /* DERIVED oklch(52% 0.15 340) */ --sf-fam-vocal-c: #FADAEE; /* DERIVED oklch(92% 0.045 340) */ --sf-fam-maestro: #031D44; /* ink-24 */ --sf-fam-maestro-c: #D5DFEB; /* slate-90 */ /* 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 rgba(25, 55, 99, 0.30); /* ink-34 */ /* 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"] { /* Surfaces — the graphite neutrals, hue 255 */ --sf-bg: #030711; /* graphite-13 */ --sf-surface: #06101C; /* graphite-17 */ --sf-surface-variant: #142234; /* graphite-25 */ --sf-surface-high: #1C2C41; /* graphite-29 */ --sf-on-surface: #E3E8F0; /* graphite-93 */ --sf-on-surface-variant: #9BA9BB; /* graphite-73 */ --sf-outline: #5C6D83; /* graphite-53 */ --sf-outline-variant: #2C3C4F; /* graphite-35 */ --sf-inverse-surface: #E3E8F0; /* graphite-93 */ --sf-inverse-on-surface: #0C1723; /* graphite-20 */ --sf-shadow: rgba(0, 0, 0, 0.4); --sf-shadow-strong: rgba(0, 0, 0, 0.55); --sf-primary: #89B3F1; /* ink-76 */ --sf-on-primary: #00183F; /* ink-22 */ --sf-primary-container: #1C3C6B; /* ink-36 */ --sf-on-primary-container: #D5E6FF; /* ink-92 */ --sf-primary-hover: #A5C9FF; /* DERIVED oklch(83% 0.085 258) */ --sf-primary-press: #77A0DD; /* DERIVED oklch(70% 0.101 258) */ --sf-secondary: #BAA793; /* stone-74 */ --sf-on-secondary: #2B1C08; /* stone-24 */ --sf-secondary-container: #4B3926; /* stone-36 */ --sf-on-secondary-container:#F0E2D3; /* stone-92 */ --sf-tertiary: #CEAD59; /* brass-76 */ --sf-on-tertiary: #291D00; /* brass-24 */ --sf-tertiary-container: #614900; /* brass-42 */ --sf-on-tertiary-container: #F6E7C3; /* brass-93 */ /* Feedback — the design names a lighter dark-mode green and red for exactly this reason; the light values are too dark to read on graphite. */ --sf-correct: #31AA40; /* green-65 */ --sf-wrong: #F14D4C; /* red-65 */ --sf-neutral: #00A4A4; /* cyan-65 */ /* 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: #9BA9BB; /* onSurfaceVariant, dark = graphite-73 */ --sf-note-extra: #F2716A; /* colorScheme.error, dark = red-70 */ /* The score sheet stays warm and light in dark mode — only a hair off the light value, because fine engraving lines need the contrast either way. */ --sf-score-bg: #FDF6EC; /* score-bg-dark */ /* Family colors, lifted to the light half of each ramp so they stay legible as text on a near-black surface. Same six families, same hues. */ --sf-fam-keys: #89B3F1; /* ink-76 */ --sf-fam-keys-c: #1C3C6B; /* ink-36 */ --sf-fam-strings: #BAA793; /* stone-74 */ --sf-fam-strings-c: #4B3926; /* stone-36 */ --sf-fam-brass: #CEAD59; /* brass-76 */ --sf-fam-brass-c: #614900; /* brass-42 */ --sf-fam-woodwind: #00A4A4; /* cyan-65 */ --sf-fam-woodwind-c: #00494A; /* DERIVED oklch(36% 0.075 196) */ --sf-fam-percussion: #F2716A; /* red-70 */ --sf-fam-percussion-c: #6F000C; /* red-34 */ --sf-fam-vocal: #D686BC; /* DERIVED oklch(72% 0.12 340) */ --sf-fam-vocal-c: #5E244D; /* DERIVED oklch(36% 0.10 340) */ --sf-fam-maestro: #9BA9BB; /* graphite-73 */ --sf-fam-maestro-c: #1C2C41; /* graphite-29 */ --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 rgba(137, 179, 241, 0.40); /* ink-76 */ }