/** * PARTITA STUDIO — one palette for the site, the account page and the admin panel. * * Built on Catppuccin: **Latte** for light, **Mocha** for dark. The flavour is * chosen by the visitor and remembered; `theme.js` writes `data-theme` on * before the first paint, so there is no flash of the wrong theme. * * How to work with this file: * - the two flavours are written out **once** as `--ctp-*` raw values; * - the semantic tokens the site actually uses (`--bg-*`, `--text-*`, * `--accent*`, `--surface-*`) are *assigned* from those raw values, once per * theme. Only assignments repeat, never colour literals, so the flavours * cannot drift apart. * - components must use the semantic tokens only. A hardcoded hex in a * component is a bug: it will be wrong in one of the two themes. * * `--accent-contrast` is the text colour that belongs **on** a filled accent * button. Catppuccin's accents are light in Mocha, so white-on-accent fails * contrast there — always use the token, never `#fff`. */ :root { /* ── Catppuccin Latte ──────────────────────────────────────────────────── */ --ctp-latte-base: #eff1f5; --ctp-latte-mantle: #e6e9ef; --ctp-latte-crust: #dce0e8; --ctp-latte-surface0: #ccd0da; --ctp-latte-surface1: #bcc0cc; --ctp-latte-surface2: #acb0be; --ctp-latte-overlay0: #9ca0b0; --ctp-latte-overlay1: #8c8fa1; --ctp-latte-text: #4c4f69; --ctp-latte-subtext1: #5c5f77; --ctp-latte-subtext0: #6c6f85; --ctp-latte-blue: #1e66f5; --ctp-latte-lavender: #7287fd; --ctp-latte-sapphire: #209fb5; --ctp-latte-sky: #04a5e5; --ctp-latte-teal: #179299; --ctp-latte-green: #40a02b; --ctp-latte-yellow: #df8e1d; --ctp-latte-peach: #fe640b; --ctp-latte-maroon: #e64553; --ctp-latte-red: #d20f39; --ctp-latte-mauve: #8839ef; --ctp-latte-pink: #ea76cb; /* ── Catppuccin Mocha ──────────────────────────────────────────────────── */ --ctp-mocha-base: #1e1e2e; --ctp-mocha-mantle: #181825; --ctp-mocha-crust: #11111b; --ctp-mocha-surface0: #313244; --ctp-mocha-surface1: #45475a; --ctp-mocha-surface2: #585b70; --ctp-mocha-overlay0: #6c7086; --ctp-mocha-overlay2: #9399b2; --ctp-mocha-text: #cdd6f4; --ctp-mocha-subtext1: #bac2de; --ctp-mocha-subtext0: #a6adc8; --ctp-mocha-blue: #89b4fa; --ctp-mocha-lavender: #b4befe; --ctp-mocha-sapphire: #74c7ec; --ctp-mocha-sky: #89dceb; --ctp-mocha-teal: #94e2d5; --ctp-mocha-green: #a6e3a1; --ctp-mocha-yellow: #f9e2af; --ctp-mocha-peach: #fab387; --ctp-mocha-maroon: #eba0ac; --ctp-mocha-red: #f38ba8; --ctp-mocha-mauve: #cba6f7; --ctp-mocha-pink: #f5c2e7; /* ── Shape ─────────────────────────────────────────────────────────────── */ /* Rounded, following the reference: controls 8px, cards 12px, pills full. */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-btn: 8px; --radius-pill: 999px; --max: 1240px; } /* ── Light: Catppuccin Latte (default) ───────────────────────────────────── */ :root, :root[data-theme='light'] { color-scheme: light; --accent: var(--ctp-latte-blue); --accent-hover: #0b56e0; --accent-light: var(--ctp-latte-lavender); --accent-text: #1354cc; /* 5.1:1 on --bg-card, for links and labels */ --accent-dark: #0a4bc4; --accent-soft: rgba(30, 102, 245, 0.10); --accent-contrast: #ffffff; /* text on a filled accent button */ --bg-deep: var(--ctp-latte-base); --bg-main: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f2f4f8; --bg-elevated: #ffffff; --bg-tint: var(--ctp-latte-base); --border: var(--ctp-latte-surface0); --border-strong: var(--ctp-latte-surface1); --text-primary: var(--ctp-latte-text); --text-secondary: var(--ctp-latte-subtext1); /* Catppuccin subtext0 (#6c6f85) lands at 4.37:1 on the tinted surfaces this site uses for chips and badges — just under AA. One step darker clears it. */ --text-muted: #63667c; --success: #2f7d21; /* Latte green darkened to clear AA as text */ --success-soft: rgba(64, 160, 43, 0.14); /* Latte yellow is unreadable as text; this step clears AA on the tinted surfaces the chat mock and the admin pills use, not just on white. */ --warning: #8a5810; --warning-soft: rgba(223, 142, 29, 0.18); --danger: var(--ctp-latte-red); --danger-soft: rgba(210, 15, 57, 0.10); --danger-strong: #b00d30; /* fill for irreversible actions */ --info: #1354cc; --info-soft: rgba(30, 102, 245, 0.10); /* The family accents label things in prose, not just fill shapes, so on a light page they use the darkened step: Latte's green and teal read at 3.3:1 and 3.7:1 as text, below AA. Mauve and red already clear it and keep their Catppuccin values. */ --green: #2f7d21; --yellow: #9a6212; --purple: var(--ctp-latte-mauve); --red: var(--ctp-latte-red); --orange: #c24d06; --cyan: #0e6f75; --pink: #b4499a; --overlay-scrim: rgba(76, 79, 105, 0.32); /* Raw ink triplets for hand-rolled rgba(): a translucent tint has to darken a light page and lighten a dark one, and a shadow must stay dark in both. */ --tint-ink: 76, 79, 105; --shadow-ink: 76, 79, 105; --shadow-sm: 0 1px 2px rgba(76, 79, 105, 0.10); --shadow-card: 0 6px 20px rgba(76, 79, 105, 0.10); --shadow-raised: 0 12px 32px rgba(76, 79, 105, 0.14); --shadow-window: 0 20px 56px rgba(76, 79, 105, 0.18), 0 0 0 1px rgba(76, 79, 105, 0.06); } /* ── Dark: Catppuccin Mocha ──────────────────────────────────────────────── */ :root[data-theme='dark'] { color-scheme: dark; --accent: var(--ctp-mocha-blue); --accent-hover: #a0c4fb; --accent-light: var(--ctp-mocha-lavender); --accent-text: var(--ctp-mocha-blue); --accent-dark: #6c9ef0; --accent-soft: rgba(137, 180, 250, 0.14); /* Mocha's accent is a light blue: dark ink on top, never white. */ --accent-contrast: var(--ctp-mocha-crust); --bg-deep: var(--ctp-mocha-crust); --bg-main: var(--ctp-mocha-mantle); --bg-card: var(--ctp-mocha-base); --bg-card-hover: #26273a; --bg-elevated: var(--ctp-mocha-surface0); --bg-tint: var(--ctp-mocha-surface0); --border: var(--ctp-mocha-surface0); --border-strong: var(--ctp-mocha-surface1); --text-primary: var(--ctp-mocha-text); --text-secondary: var(--ctp-mocha-subtext1); --text-muted: var(--ctp-mocha-subtext0); /* overlay2 is 4.45:1 on the mantle — just under AA */ --success: var(--ctp-mocha-green); --success-soft: rgba(166, 227, 161, 0.14); --warning: var(--ctp-mocha-yellow); --warning-soft: rgba(249, 226, 175, 0.14); --danger: var(--ctp-mocha-red); --danger-soft: rgba(243, 139, 168, 0.14); --danger-strong: #b4364f; --info: var(--ctp-mocha-sapphire); --info-soft: rgba(116, 199, 236, 0.14); --green: var(--ctp-mocha-green); --yellow: var(--ctp-mocha-yellow); --purple: var(--ctp-mocha-mauve); --red: var(--ctp-mocha-red); --orange: var(--ctp-mocha-peach); --cyan: var(--ctp-mocha-teal); --pink: var(--ctp-mocha-pink); --overlay-scrim: rgba(17, 17, 27, 0.66); --tint-ink: 255, 255, 255; --shadow-ink: 0, 0, 0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.32); --shadow-raised: 0 18px 48px rgba(0, 0, 0, 0.40); --shadow-window: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(205, 214, 244, 0.06); } /* * Without JavaScript nothing writes `data-theme`, so a visitor who prefers dark * would get Latte. This repeats the Mocha assignments — and only the * assignments; the literals still live in the `--ctp-*` block above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --accent: var(--ctp-mocha-blue); --accent-hover: #a0c4fb; --accent-light: var(--ctp-mocha-lavender); --accent-text: var(--ctp-mocha-blue); --accent-dark: #6c9ef0; --accent-soft: rgba(137, 180, 250, 0.14); --accent-contrast: var(--ctp-mocha-crust); --bg-deep: var(--ctp-mocha-crust); --bg-main: var(--ctp-mocha-mantle); --bg-card: var(--ctp-mocha-base); --bg-card-hover: #26273a; --bg-elevated: var(--ctp-mocha-surface0); --bg-tint: var(--ctp-mocha-surface0); --border: var(--ctp-mocha-surface0); --border-strong: var(--ctp-mocha-surface1); --text-primary: var(--ctp-mocha-text); --text-secondary: var(--ctp-mocha-subtext1); --text-muted: var(--ctp-mocha-subtext0); /* overlay2 is 4.45:1 on the mantle — just under AA */ --success: var(--ctp-mocha-green); --success-soft: rgba(166, 227, 161, 0.14); --warning: var(--ctp-mocha-yellow); --warning-soft: rgba(249, 226, 175, 0.14); --danger: var(--ctp-mocha-red); --danger-soft: rgba(243, 139, 168, 0.14); --danger-strong: #b4364f; --info: var(--ctp-mocha-sapphire); --info-soft: rgba(116, 199, 236, 0.14); --green: var(--ctp-mocha-green); --yellow: var(--ctp-mocha-yellow); --purple: var(--ctp-mocha-mauve); --red: var(--ctp-mocha-red); --orange: var(--ctp-mocha-peach); --cyan: var(--ctp-mocha-teal); --pink: var(--ctp-mocha-pink); --overlay-scrim: rgba(17, 17, 27, 0.66); --tint-ink: 255, 255, 255; --shadow-ink: 0, 0, 0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.32); --shadow-raised: 0 18px 48px rgba(0, 0, 0, 0.40); --shadow-window: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(205, 214, 244, 0.06); } } /* ── Account/admin aliases (same palette, different naming) ──────────────── */ /* * These predate the semantic names and are still used across account.css. * They are a *role* ramp, not a lightness ramp: 950 is always "page", 100 is * always "strongest text", in both flavours. */ :root { --surface-950: var(--bg-deep); --surface-900: var(--bg-main); --surface-800: var(--bg-card-hover); --surface-700: var(--border); --surface-600: var(--border-strong); --surface-500: var(--text-muted); --surface-400: var(--text-secondary); --surface-300: var(--text-secondary); --surface-200: var(--text-primary); --surface-100: var(--text-primary); } /* ── Theme switch ────────────────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-card-hover); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { display: block; } .theme-toggle .theme-toggle-moon { display: none; } :root[data-theme='dark'] .theme-toggle .theme-toggle-moon { display: block; } :root[data-theme='dark'] .theme-toggle .theme-toggle-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .theme-toggle-moon { display: block; } :root:not([data-theme]) .theme-toggle .theme-toggle-sun { display: none; } }