/* * dashboard-tokens.css — dashboard-v2 multi-theme design tokens. * * Sibling to tokens_v17.css, not an extension of it — tokens_v17.css * mirrors the talepal_home style guide 1:1 and must not drift (see its * own header comment: "DO NOT add new colours here"). Dashboard-v2 has * its own typographic/color identity now, switchable at view time. * * Same custom-property VOCABULARY as tokens_v17.css on purpose — every * dashboard-v2.css component rule already reads --v17-ink, --font-serif, * --v17-data-moss, etc. via var(...), so swapping which block of values * is active re-skins the whole page with zero changes to dashboard-v2.css. * * Five themes, selected via [data-theme] on (see partials/footer.html * for the picker UI + persistence): * - (no attribute) / [data-theme="letterpress"] — Letterpress (default) * - [data-theme="original"] — Original (the pre-multi-theme v17 look) * - [data-theme="orchid"] — Orchid (purple/pink) * - [data-theme="studio"] — Studio (monochrome + one accent) * - [data-theme="expedition"] — Expedition (adventure-log parchment) * * Radii (btn/btn-lg/pill) and all spacing tokens are deliberately NOT * themed — same layout across all four, only color + type carry the * difference (radius-card is the one exception: it reads as part of a * theme's "material" rather than its layout, same as elsewhere in the * v17 system). */ :root { /* ── Shared across all themes — layout stays recognizable ─────────── */ --v17-radius-btn: 8px; --v17-radius-btn-lg:10px; --v17-radius-pill: 999px; --v17-section-py: 6rem; --v17-hero-py-top: 8rem; --v17-hero-py-bot: 4rem; --v17-head-mb: 3.5rem; --v17-head-max: 44rem; /* ── Letterpress — DEFAULT theme values ──────────────────────────── Warm cream paper, Fraunces display serif, sienna + teal accents. Bare :root carries these so first paint (before the footer script runs) is already correct — no separate [data-theme="letterpress"] block, it would just duplicate this one. */ --v17-bg: #f2e9da; --v17-bg-soft: #fbf5ea; --v17-bg-panel: #ead9be; --v17-ink: #34241d; --v17-ink-2: #5b463a; --v17-mute: #93816e; --v17-mute-2: #b0a08d; --v17-line: #e1d2b8; --v17-line-2: #eae0cc; --v17-accent: #a6472b; --v17-accent-soft: rgba(166, 71, 43, 0.10); --v17-highlight: #43695b; --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --v17-radius-card: 11px; --v17-status-pass-bg: #e7eee7; --v17-status-pass-fg: #3f5c43; --v17-status-flag-bg: #f1e6d2; --v17-status-flag-fg: #7a5f2e; --v17-status-warn-bg: #f3e1d8; --v17-status-warn-fg: #8b4a30; --v17-data-ink: #34241d; --v17-data-moss: #43695b; --v17-data-clay: #a6472b; --v17-data-slate: #6b5b7a; --v17-data-bronze: #93816e; } /* ── Original — the pre-multi-theme v17 look, unchanged, added back as a selectable option rather than assumed default. Same values as tokens_v17.css (not imported from it — see file header). ───────────── */ :root[data-theme="original"] { --v17-bg: #f6f6f9; --v17-bg-soft: #ffffff; --v17-bg-panel: #eaeaf0; --v17-ink: #0f1013; --v17-ink-2: #3a3c42; --v17-mute: #7e828d; --v17-mute-2: #a2a6b0; --v17-line: #e3e3e8; --v17-line-2: #eeeef2; --v17-accent: #b8523c; --v17-accent-soft: rgba(184, 82, 60, 0.08); --v17-highlight: #737a85; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --v17-radius-card: 14px; --v17-status-pass-bg: #e8efe5; --v17-status-pass-fg: #4a6047; --v17-status-flag-bg: #f1ece0; --v17-status-flag-fg: #75663a; --v17-status-warn-bg: #f3e7e3; --v17-status-warn-fg: #7b4a3c; --v17-data-ink: #2a2e35; --v17-data-moss: #366e4e; --v17-data-clay: #7c4133; --v17-data-slate: #3a527d; --v17-data-bronze: #846629; } /* ── Orchid — purple/pink, confident not pastel. Magenta/violet used as a real primary color (card washes, gradient badge), not a thin accent. */ :root[data-theme="orchid"] { --v17-bg: #faf6fb; --v17-bg-soft: #ffffff; --v17-bg-panel: #f3e5f7; --v17-ink: #241033; --v17-ink-2: #4a3159; --v17-mute: #8d7a9c; --v17-mute-2: #b9a7c6; --v17-line: #ecdff2; --v17-line-2: #f5eef8; --v17-accent: #c026d3; --v17-accent-soft: rgba(192, 38, 211, 0.09); --v17-highlight: #7c3aed; --font-serif: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --v17-radius-card: 16px; --v17-status-pass-bg: rgba(124, 58, 237, 0.08); --v17-status-pass-fg: #7c3aed; --v17-status-flag-bg: rgba(219, 39, 119, 0.08); --v17-status-flag-fg: #db2777; --v17-status-warn-bg: rgba(220, 38, 38, 0.08); --v17-status-warn-fg: #dc2626; --v17-data-ink: #241033; --v17-data-moss: #7c3aed; --v17-data-clay: #dc2626; --v17-data-slate: #db2777; --v17-data-bronze: #8d7a9c; } /* ── Studio — monochrome + one punch color. Deliberately reduced role palette (protagonist gets the one accent, everything else is ink) — "the role reads from the text content, not the colour", same principle the v17 neutralization pass already uses elsewhere in this system. */ :root[data-theme="studio"] { --v17-bg: #ffffff; --v17-bg-soft: #ffffff; --v17-bg-panel: #f0f0f0; --v17-ink: #0a0a0a; --v17-ink-2: #2a2a2a; --v17-mute: #767676; --v17-mute-2: #a0a0a0; --v17-line: #1a1a1a; --v17-line-2: #d0d0d0; --v17-accent: #ff4d00; --v17-accent-soft: rgba(255, 77, 0, 0.08); --v17-highlight: #0a0a0a; --font-serif: 'Unbounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --v17-radius-card: 2px; --v17-status-pass-bg: rgba(255, 77, 0, 0.10); --v17-status-pass-fg: #ff4d00; --v17-status-flag-bg: #f0f0f0; --v17-status-flag-fg: #0a0a0a; --v17-status-warn-bg: #f0f0f0; --v17-status-warn-fg: #0a0a0a; --v17-data-ink: #0a0a0a; --v17-data-moss: #ff4d00; --v17-data-clay: #0a0a0a; --v17-data-slate: #0a0a0a; --v17-data-bronze: #767676; } /* ── Expedition — adventure-log parchment: navy, rust, moss, typewriter mono. Ties into the subject matter (novels TalePal analyzes are often journeys/adventures) rather than a generic "warm paper" reskin. */ :root[data-theme="expedition"] { --v17-bg: #f4efe3; --v17-bg-soft: #fbf8f0; --v17-bg-panel: #ece4d0; --v17-ink: #1b2a3d; --v17-ink-2: #3c4a5c; --v17-mute: #7c8592; --v17-mute-2: #a3aab5; --v17-line: #ddd3bd; --v17-line-2: #e8e0cc; --v17-accent: #b5651d; --v17-accent-soft: rgba(181, 101, 29, 0.09); --v17-highlight: #2c5f7c; --font-serif: 'Domine', Georgia, 'Times New Roman', serif; --font-sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Courier Prime', ui-monospace, 'SFMono-Regular', Menlo, monospace; --v17-radius-card: 8px; --v17-status-pass-bg: #e6ece2; --v17-status-pass-fg: #4b6b3f; --v17-status-flag-bg: #f0e6d2; --v17-status-flag-fg: #8a6a2e; --v17-status-warn-bg: #f2e0d5; --v17-status-warn-fg: #a3512a; --v17-data-ink: #1b2a3d; --v17-data-moss: #b5651d; --v17-data-clay: #a3402c; --v17-data-slate: #5c7a63; --v17-data-bronze: #7c8592; } /* ── Base type — same rules tokens_v17.css applies, copied here so dashboard-v2 doesn't need tokens_v17.css loaded at all. ────────────── */ html { -webkit-text-size-adjust: 100%; font-size: 90%; } body { margin: 0; background: var(--v17-bg); color: var(--v17-ink-2); font: 400 1rem/1.6 var(--font-sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; color: var(--v17-ink); margin: 0; } .accent { font-style: italic; font-weight: 400; color: var(--v17-accent); } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v17-mute); }