/* Aiplify design tokens (Phase 4). Token NAMES are the contract from docs/DESIGN-BRIEF.md — components reference these only, never raw values, so a later token swap (e.g. from a Claude Design export, or a light theme) is a one-file change. Values were authored in Phase 4 from the brief: warm-dark "dimmed studio", one brass accent, a separate lavender AI hue, quiet section hues, 8 rhyme hues distinguishable on the dark canvas. Contrast (on --bg-0): text-1 ≈ 15:1 · text-2 ≈ 8.5:1 · text-3 ≈ 4.7:1 · accent ≈ 8:1. */ :root { color-scheme: dark; /* colour — backgrounds & text */ --bg-0: #161310; /* canvas, darkest (warm, not black) */ --bg-1: #1d1916; /* panel / top bar */ --bg-2: #262019; /* cards / raised */ --bg-3: #2f2822; /* hover rows */ --border: #332c26; --border-strong: #493f36; --text-1: #efe8dd; /* lyrics / primary (off-white) */ --text-2: #b7ada0; /* secondary */ --text-3: #8b8074; /* muted meta */ /* colour — accent & semantics */ --accent: #d6a24a; /* brass */ --accent-hover: #e4b660; --accent-fg: #1c1407; /* text on accent */ --accent-bg: rgba(214, 162, 74, 0.14); --focus: #e0ad57; --selection-bg: rgba(214, 162, 74, 0.30); --ai: #a99be8; /* lavender — used ONLY for AI drafts / results / badges */ --ai-bg: rgba(169, 155, 232, 0.10); --ai-border: rgba(169, 155, 232, 0.45); --danger: #e07a6a; --danger-bg: rgba(224, 122, 106, 0.14); --warning: #e0964f; --warning-bg: rgba(224, 150, 79, 0.14); --success: #86bd8f; --success-bg: rgba(134, 189, 143, 0.14); --info: #7fb0d0; --info-bg: rgba(127, 176, 208, 0.14); /* colour — section types (badge text / label / hairline + a faint tint) — values from the Claude Design export */ --sec-verse: #a3b57f; --sec-verse-bg: rgba(163, 181, 127, 0.13); --sec-prechorus: #74b3a4; --sec-prechorus-bg: rgba(116, 179, 164, 0.13); --sec-chorus: #d3a45c; --sec-chorus-bg: rgba(211, 164, 92, 0.13); --sec-bridge: #c391bd; --sec-bridge-bg: rgba(195, 145, 189, 0.13); --sec-intro: #83a6cc; --sec-intro-bg: rgba(131, 166, 204, 0.13); --sec-outro: #8fa0b5; --sec-outro-bg: rgba(143, 160, 181, 0.13); --sec-hook: #d68d80; --sec-hook-bg: rgba(214, 141, 128, 0.13); --sec-other: #a09686; --sec-other-bg: rgba(160, 150, 134, 0.13); /* colour — rhyme groups (P7) + lighter/desaturated near variants */ --rhyme-1: #e2a54f; --rhyme-1-near: #a37f4d; --rhyme-2: #7fc48c; --rhyme-2-near: #648e6b; --rhyme-3: #7fb4dc; --rhyme-3-near: #63859e; --rhyme-4: #e08bb0; --rhyme-4-near: #a06d85; --rhyme-5: #e57b63; --rhyme-5-near: #a4635a; --rhyme-6: #dcd06e; --rhyme-6-near: #9f985e; --rhyme-7: #6fc7bf; --rhyme-7-near: #5b908c; --rhyme-8: #b39ce8; --rhyme-8-near: #8676a6; /* typography */ --font-lyric: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-lyric: 20px; --lh-lyric: 1.55; --fs-lyric-sm: 17px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --ls-caps: 0.07em; /* space, radius, shadow, motion, layout */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --radius-xs: 2px; --radius-s: 4px; --radius-m: 8px; --radius-l: 12px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); --dur-fast: 120ms; --dur-normal: 160ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --topbar-h: 48px; --panel-w: 530px; --panel-w-narrow: 400px; --panel-rail-w: 40px; --gutter-w: 56px; --canvas-max: 720px; --content-max: 1100px; } /* ── Appearance preferences (per user, stamped on by the layout; Services\Prefs) ── Light theme: warm paper, same roles. Contrast on --bg-0: text-1 ≈ 14.5:1 · text-2 ≈ 7.2:1 · text-3 ≈ 4.5:1 · accent ≈ 4.75:1 · AI ≈ 6.2:1 · every section/rhyme hue ≥ 4.5:1 (checked when authored). */ html[data-theme="light"] { color-scheme: light; --bg-0: #f6f1e8; --bg-1: #efe9de; --bg-2: #e7dfd1; --bg-3: #ddd3c2; --border: #d9cfbd; --border-strong: #bfb29c; --text-1: #231f1a; --text-2: #574e44; --text-3: #786d5f; --accent: #8f6216; --accent-hover: #78500f; --accent-fg: #fff8ea; --accent-bg: rgba(143, 98, 22, 0.12); --focus: #a8741a; --selection-bg: rgba(214, 162, 74, 0.35); --ai: #5b48b0; --ai-bg: rgba(91, 72, 176, 0.10); --ai-border: rgba(91, 72, 176, 0.45); --danger: #b13a2c; --danger-bg: rgba(177, 58, 44, 0.12); --warning: #985210; --warning-bg: rgba(152, 82, 16, 0.12); --success: #2d7440; --success-bg: rgba(45, 116, 64, 0.12); --info: #2a6890; --info-bg: rgba(42, 104, 144, 0.12); --sec-verse: #5c6b34; --sec-verse-bg: rgba(92, 107, 52, 0.13); --sec-prechorus: #26705f; --sec-prechorus-bg: rgba(38, 112, 95, 0.13); --sec-chorus: #875c12; --sec-chorus-bg: rgba(135, 92, 18, 0.13); --sec-bridge: #87477f; --sec-bridge-bg: rgba(135, 71, 127, 0.13); --sec-intro: #375c87; --sec-intro-bg: rgba(55, 92, 135, 0.13); --sec-outro: #4f5e70; --sec-outro-bg: rgba(79, 94, 112, 0.13); --sec-hook: #a1463a; --sec-hook-bg: rgba(161, 70, 58, 0.13); --sec-other: #6b6154; --sec-other-bg: rgba(107, 97, 84, 0.13); --rhyme-1: #a05c07; --rhyme-1-near: #b98a4e; --rhyme-2: #2b783a; --rhyme-2-near: #6a9a72; --rhyme-3: #27679a; --rhyme-3-near: #6a8fae; --rhyme-4: #9c3a67; --rhyme-4-near: #b3728f; --rhyme-5: #b0432a; --rhyme-5-near: #c07d6b; --rhyme-6: #746b0d; --rhyme-6-near: #9a9354; --rhyme-7: #1c7a73; --rhyme-7-near: #629d98; --rhyme-8: #5b48b0; --rhyme-8-near: #8d80c4; --shadow-1: 0 1px 2px rgba(60, 40, 20, 0.12); --shadow-2: 0 8px 28px rgba(60, 40, 20, 0.16), 0 1px 3px rgba(60, 40, 20, 0.10); } /* Sans lyric face: Inter (already self-hosted for the UI), optical sizing on, slightly smaller to match Literata's x-height feel. */ html[data-lyric-font="sans"] { --font-lyric: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-lyric: 19px; --lh-lyric: 1.6; --fs-lyric-sm: 16px; } html[data-lyric-font="sans"] .line-text, html[data-lyric-font="sans"] .line-input, html[data-lyric-font="sans"] .ai-alt, html[data-lyric-font="sans"] .raw-textarea, html[data-lyric-font="sans"] .hist-lines { font-optical-sizing: auto; letter-spacing: -0.005em; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-normal: 0ms; } }