feat(machine): add 6 webapp-aligned themes, retune Catppuccin

Pulls webapp's tuned Catppuccin oklch palette (mauve primary, teal
accent, white card) over the prior straight-from-the-spec hex values,
and adds the other six webapp themes: Countryside Castle, Dark Matter,
Emerald Forest, Light Green, Neo Brutalist, Starry Night. Each new
block extends the webapp palette with ATM-specific success/warning/
bitcoin/qr semantic colors tuned to the theme's vibe.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-11 23:55:24 +02:00
commit db074e2ddd
2 changed files with 491 additions and 59 deletions

View file

@ -1,6 +1,18 @@
import { ref, computed, watch } from 'vue' import { ref, computed, watch } from 'vue'
export type ThemeId = 'gruvbox' | 'catppuccin' | 'cyberpunk' | 'dracula' | 'nord' | 'tokyo-night' export type ThemeId =
| 'gruvbox'
| 'catppuccin'
| 'cyberpunk'
| 'dracula'
| 'nord'
| 'tokyo-night'
| 'countrysidecastle'
| 'darkmatter'
| 'emeraldforest'
| 'lightgreen'
| 'neobrut'
| 'starrynight'
export type ColorMode = 'light' | 'dark' | 'system' export type ColorMode = 'light' | 'dark' | 'system'
export interface ThemeOption { export interface ThemeOption {
@ -15,6 +27,12 @@ export const themes: ThemeOption[] = [
{ id: 'nord', label: 'Nord' }, { id: 'nord', label: 'Nord' },
{ id: 'tokyo-night', label: 'Tokyo Night' }, { id: 'tokyo-night', label: 'Tokyo Night' },
{ id: 'cyberpunk', label: 'Cyberpunk' }, { id: 'cyberpunk', label: 'Cyberpunk' },
{ id: 'countrysidecastle', label: 'Countryside Castle' },
{ id: 'darkmatter', label: 'Dark Matter' },
{ id: 'emeraldforest', label: 'Emerald Forest' },
{ id: 'lightgreen', label: 'Light Green' },
{ id: 'neobrut', label: 'Neo Brutalist' },
{ id: 'starrynight', label: 'Starry Night' },
] ]
const THEME_KEY = 'lamassu-theme' const THEME_KEY = 'lamassu-theme'

View file

@ -144,74 +144,74 @@
} }
/* /*
* Catppuccin Palette * Catppuccin Palette (tuned, matches webapp)
* https://github.com/catppuccin/catppuccin * https://github.com/catppuccin/catppuccin
*/ */
[data-theme='catppuccin'] { [data-theme='catppuccin'] {
--radius: 0.625rem; --radius: 0.35rem;
/* Catppuccin Latte (light) */ /* Catppuccin Latte (light) */
--background: #eff1f5; /* base */ --background: oklch(0.9578 0.0058 264.5321);
--foreground: #4c4f69; /* text */ --foreground: oklch(0.4355 0.0430 279.3250);
--card: #e6e9ef; /* mantle */ --card: oklch(1 0 0);
--card-foreground: #4c4f69; --card-foreground: oklch(0.4355 0.0430 279.3250);
--popover: #e6e9ef; --popover: oklch(0.8575 0.0145 268.4756);
--popover-foreground: #4c4f69; --popover-foreground: oklch(0.4355 0.0430 279.3250);
--primary: #8839ef; /* mauve */ --primary: oklch(0.5547 0.2503 297.0156); /* mauve */
--primary-foreground: #eff1f5; --primary-foreground: oklch(1 0 0);
--secondary: #ccd0da; /* surface0 */ --secondary: oklch(0.8575 0.0145 268.4756);
--secondary-foreground: #4c4f69; --secondary-foreground: oklch(0.4355 0.0430 279.3250);
--muted: #ccd0da; --muted: oklch(0.9060 0.0117 264.5071);
--muted-foreground: #6c6f85; /* subtext0 */ --muted-foreground: oklch(0.5471 0.0343 279.0837);
--accent: #1e66f5; /* blue */ --accent: oklch(0.6820 0.1448 235.3822); /* teal */
--accent-foreground: #eff1f5; --accent-foreground: oklch(1 0 0);
--destructive: #d20f39; /* red */ --destructive: oklch(0.5505 0.2155 19.8095);
--border: #bcc0cc; /* surface1 */ --border: oklch(0.8083 0.0174 271.1982);
--input: #bcc0cc; --input: oklch(0.8575 0.0145 268.4756);
--ring: #8839ef; --ring: oklch(0.5547 0.2503 297.0156);
--success: #40a02b; /* green */ --success: #40a02b; /* catppuccin green */
--success-foreground: #eff1f5; --success-foreground: oklch(0.9578 0.0058 264.5321);
--warning: #df8e1d; /* yellow */ --warning: #df8e1d; /* catppuccin yellow */
--warning-foreground: #4c4f69; --warning-foreground: oklch(0.4355 0.0430 279.3250);
--bitcoin: #fe640b; /* peach */ --bitcoin: #fe640b; /* catppuccin peach */
--bitcoin-foreground: #eff1f5; --bitcoin-foreground: oklch(0.9578 0.0058 264.5321);
--qr: #eff1f5; --qr: oklch(0.9578 0.0058 264.5321);
--qr-foreground: #4c4f69; --qr-foreground: oklch(0.4355 0.0430 279.3250);
} }
[data-theme='catppuccin'].dark { [data-theme='catppuccin'].dark {
/* Catppuccin Mocha (dark) */ /* Catppuccin Mocha (dark) */
--background: #1e1e2e; /* base */ --background: oklch(0.2155 0.0254 284.0647);
--foreground: #cdd6f4; /* text */ --foreground: oklch(0.8787 0.0426 272.2767);
--card: #181825; /* mantle */ --card: oklch(0.2429 0.0304 283.9110);
--card-foreground: #cdd6f4; --card-foreground: oklch(0.8787 0.0426 272.2767);
--popover: #181825; --popover: oklch(0.4037 0.0320 280.1520);
--popover-foreground: #cdd6f4; --popover-foreground: oklch(0.8787 0.0426 272.2767);
--primary: #cba6f7; /* mauve */ --primary: oklch(0.7871 0.1187 304.7693); /* mauve */
--primary-foreground: #1e1e2e; --primary-foreground: oklch(0.2429 0.0304 283.9110);
--secondary: #313244; /* surface0 */ --secondary: oklch(0.4765 0.0340 278.6430);
--secondary-foreground: #cdd6f4; --secondary-foreground: oklch(0.8787 0.0426 272.2767);
--muted: #313244; --muted: oklch(0.2973 0.0294 276.2144);
--muted-foreground: #a6adc8; /* subtext0 */ --muted-foreground: oklch(0.7510 0.0396 273.9320);
--accent: #89b4fa; /* blue */ --accent: oklch(0.8467 0.0833 210.2545); /* teal */
--accent-foreground: #1e1e2e; --accent-foreground: oklch(0.2429 0.0304 283.9110);
--destructive: #f38ba8; /* red */ --destructive: oklch(0.7556 0.1297 2.7642);
--border: #45475a; /* surface1 */ --border: oklch(0.3240 0.0319 281.9784);
--input: #45475a; --input: oklch(0.3240 0.0319 281.9784);
--ring: #cba6f7; --ring: oklch(0.7871 0.1187 304.7693);
--success: #a6e3a1; /* green */ --success: #a6e3a1; /* catppuccin green */
--success-foreground: #1e1e2e; --success-foreground: oklch(0.2155 0.0254 284.0647);
--warning: #f9e2af; /* yellow */ --warning: #f9e2af; /* catppuccin yellow */
--warning-foreground: #1e1e2e; --warning-foreground: oklch(0.2155 0.0254 284.0647);
--bitcoin: #fab387; /* peach */ --bitcoin: #fab387; /* catppuccin peach */
--bitcoin-foreground: #1e1e2e; --bitcoin-foreground: oklch(0.2155 0.0254 284.0647);
--qr: #eff1f5; --qr: #f5f0e6;
--qr-foreground: #1e1e2e; --qr-foreground: oklch(0.2155 0.0254 284.0647);
} }
/* /*
@ -498,6 +498,420 @@
--qr-foreground: #1a1b26; --qr-foreground: #1a1b26;
} }
/*
* Countryside Castle Palette
* Warm stone-and-moss tones, calm primaries
*/
[data-theme='countrysidecastle'] {
--radius: 0.3rem;
--background: oklch(0.9730 0.0058 84.5664);
--foreground: oklch(0.3247 0.0226 57.3596);
--card: oklch(0.9459 0.0117 84.5794);
--card-foreground: oklch(0.2724 0.0177 57.4319);
--popover: oklch(0.9595 0.0088 84.5733);
--popover-foreground: oklch(0.2175 0.0125 57.5482);
--primary: oklch(0.5698 0.0614 230.9798); /* dusty blue */
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.8197 0.0295 76.4350);
--secondary-foreground: oklch(0.3750 0.0273 57.3103);
--muted: oklch(0.8903 0.0080 91.4872);
--muted-foreground: oklch(0.5129 0.0202 57.8140);
--accent: oklch(0.5425 0.0625 154.6280); /* moss green */
--accent-foreground: oklch(1 0 0);
--destructive: oklch(0.5107 0.1226 22.3963);
--border: oklch(0.8540 0.0188 76.5358);
--input: oklch(0.9130 0.0111 76.5933);
--ring: oklch(0.5698 0.0614 230.9798);
--success: oklch(0.5425 0.0625 154.6280); /* moss green */
--success-foreground: oklch(1 0 0);
--warning: oklch(0.6550 0.0929 74.2249); /* warm amber */
--warning-foreground: oklch(0.2724 0.0177 57.4319);
--bitcoin: oklch(0.5570 0.0685 47.4365); /* burnt orange */
--bitcoin-foreground: oklch(1 0 0);
--qr: oklch(0.9730 0.0058 84.5664);
--qr-foreground: oklch(0.3247 0.0226 57.3596);
}
[data-theme='countrysidecastle'].dark {
--background: oklch(0.2299 0.0198 256.8306);
--foreground: oklch(0.8894 0.0105 76.5953);
--card: oklch(0.2605 0.0240 256.8358);
--card-foreground: oklch(0.9266 0.0069 76.6174);
--popover: oklch(0.2090 0.0169 256.8258);
--popover-foreground: oklch(0.9635 0.0034 76.6361);
--primary: oklch(0.7041 0.0385 211.1736); /* slate-blue */
--primary-foreground: oklch(0.2079 0.0203 256.8404);
--secondary: oklch(0.4265 0.0167 76.4097);
--secondary-foreground: oklch(0.8894 0.0105 76.5953);
--muted: oklch(0.3137 0.0183 256.8010);
--muted-foreground: oklch(0.7169 0.0173 256.7349);
--accent: oklch(0.5342 0.0451 158.8384); /* moss */
--accent-foreground: oklch(0.9635 0.0034 76.6361);
--destructive: oklch(0.4708 0.1367 24.0033);
--border: oklch(0.3591 0.0295 256.8271);
--input: oklch(0.2920 0.0224 256.8218);
--ring: oklch(0.7041 0.0385 211.1736);
--success: oklch(0.5810 0.0497 158.8087);
--success-foreground: oklch(0.2299 0.0198 256.8306);
--warning: oklch(0.6763 0.0649 75.6254);
--warning-foreground: oklch(0.2299 0.0198 256.8306);
--bitcoin: oklch(0.6009 0.0747 47.4204);
--bitcoin-foreground: oklch(0.2299 0.0198 256.8306);
--qr: oklch(0.9266 0.0069 76.6174);
--qr-foreground: oklch(0.2299 0.0198 256.8306);
}
/*
* Dark Matter Palette
* Clean orange/teal with high-contrast surfaces
*/
[data-theme='darkmatter'] {
--radius: 0.75rem;
--background: oklch(1 0 0);
--foreground: oklch(0.2101 0.0318 264.6645);
--card: oklch(1 0 0);
--card-foreground: oklch(0.2101 0.0318 264.6645);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.2101 0.0318 264.6645);
--primary: oklch(0.6716 0.1368 48.5130); /* orange */
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.5360 0.0398 196.0280); /* teal */
--secondary-foreground: oklch(1 0 0);
--muted: oklch(0.9670 0.0029 264.5419);
--muted-foreground: oklch(0.5510 0.0234 264.3637);
--accent: oklch(0.9491 0 0);
--accent-foreground: oklch(0.2101 0.0318 264.6645);
--destructive: oklch(0.6368 0.2078 25.3313);
--border: oklch(0.9276 0.0058 264.5313);
--input: oklch(0.9276 0.0058 264.5313);
--ring: oklch(0.6716 0.1368 48.5130);
--success: oklch(0.6250 0.1772 140.4448);
--success-foreground: oklch(1 0 0);
--warning: oklch(0.7800 0.1500 86.0000);
--warning-foreground: oklch(0.2101 0.0318 264.6645);
--bitcoin: oklch(0.6716 0.1368 48.5130);
--bitcoin-foreground: oklch(1 0 0);
--qr: oklch(1 0 0);
--qr-foreground: oklch(0.2101 0.0318 264.6645);
}
[data-theme='darkmatter'].dark {
--background: oklch(0.1797 0.0043 308.1928);
--foreground: oklch(0.8109 0 0);
--card: oklch(0.1822 0 0);
--card-foreground: oklch(0.8109 0 0);
--popover: oklch(0.1797 0.0043 308.1928);
--popover-foreground: oklch(0.8109 0 0);
--primary: oklch(0.7214 0.1337 49.9802); /* warm orange */
--primary-foreground: oklch(0.1797 0.0043 308.1928);
--secondary: oklch(0.5940 0.0443 196.0233); /* teal */
--secondary-foreground: oklch(0.1797 0.0043 308.1928);
--muted: oklch(0.2520 0 0);
--muted-foreground: oklch(0.6268 0 0);
--accent: oklch(0.3211 0 0);
--accent-foreground: oklch(0.8109 0 0);
--destructive: oklch(0.5940 0.0443 196.0233);
--border: oklch(0.2520 0 0);
--input: oklch(0.2520 0 0);
--ring: oklch(0.7214 0.1337 49.9802);
--success: oklch(0.7500 0.1700 145.0000);
--success-foreground: oklch(0.1797 0.0043 308.1928);
--warning: oklch(0.8721 0.0864 68.5474);
--warning-foreground: oklch(0.1797 0.0043 308.1928);
--bitcoin: oklch(0.7214 0.1337 49.9802);
--bitcoin-foreground: oklch(0.1797 0.0043 308.1928);
--qr: oklch(0.9276 0.0058 264.5313);
--qr-foreground: oklch(0.1797 0.0043 308.1928);
}
/*
* Emerald Forest Palette
* Deep greens with soft sage neutrals
*/
[data-theme='emeraldforest'] {
--radius: 0.5rem;
--background: oklch(0.9793 0.0077 145.5161);
--foreground: oklch(0.2464 0.0358 168.9829);
--card: oklch(0.9649 0.0108 145.4913);
--card-foreground: oklch(0.2464 0.0358 168.9829);
--popover: oklch(0.9793 0.0077 145.5161);
--popover-foreground: oklch(0.2464 0.0358 168.9829);
--primary: oklch(0.5767 0.1258 156.2896); /* emerald */
--primary-foreground: oklch(0.9860 0.0025 165.0756);
--secondary: oklch(0.8935 0.0214 156.7700);
--secondary-foreground: oklch(0.3633 0.0586 159.6692);
--muted: oklch(0.9274 0.0118 150.6461);
--muted-foreground: oklch(0.4883 0.0348 172.3051);
--accent: oklch(0.9398 0.0317 164.2277);
--accent-foreground: oklch(0.4557 0.0902 161.0214);
--destructive: oklch(0.5714 0.2121 27.2502);
--border: oklch(0.8935 0.0214 156.7700);
--input: oklch(0.9293 0.0141 156.9525);
--ring: oklch(0.5767 0.1258 156.2896);
--success: oklch(0.6610 0.1560 154.8128); /* leaf green */
--success-foreground: oklch(1 0 0);
--warning: oklch(0.7012 0.1322 65.5000); /* amber */
--warning-foreground: oklch(0.2464 0.0358 168.9829);
--bitcoin: oklch(0.6920 0.2041 42.4293); /* warm orange */
--bitcoin-foreground: oklch(1 0 0);
--qr: oklch(0.9793 0.0077 145.5161);
--qr-foreground: oklch(0.2464 0.0358 168.9829);
}
[data-theme='emeraldforest'].dark {
--background: oklch(0.1554 0.0140 178.0345);
--foreground: oklch(0.9650 0.0064 164.9697);
--card: oklch(0.1965 0.0190 176.6910);
--card-foreground: oklch(0.9650 0.0064 164.9697);
--popover: oklch(0.1703 0.0163 177.0235);
--popover-foreground: oklch(0.9650 0.0064 164.9697);
--primary: oklch(0.7355 0.1793 154.0472); /* bright emerald */
--primary-foreground: oklch(0.1703 0.0163 177.0235);
--secondary: oklch(0.2896 0.0276 171.3798);
--secondary-foreground: oklch(0.9297 0.0128 164.7776);
--muted: oklch(0.2503 0.0187 172.1743);
--muted-foreground: oklch(0.7753 0.0200 164.4487);
--accent: oklch(0.3031 0.0438 164.4442);
--accent-foreground: oklch(0.9059 0.0980 161.8651);
--destructive: oklch(0.5181 0.1747 25.7610);
--border: oklch(0.2852 0.0226 172.0143);
--input: oklch(0.3190 0.0263 171.8953);
--ring: oklch(0.7355 0.1793 154.0472);
--success: oklch(0.7403 0.1521 151.7821);
--success-foreground: oklch(0.1554 0.0140 178.0345);
--warning: oklch(0.8237 0.1015 52.6294);
--warning-foreground: oklch(0.1554 0.0140 178.0345);
--bitcoin: oklch(0.7869 0.1601 51.8584);
--bitcoin-foreground: oklch(0.1554 0.0140 178.0345);
--qr: oklch(0.9650 0.0064 164.9697);
--qr-foreground: oklch(0.1554 0.0140 178.0345);
}
/*
* Light Green Palette
* Lime primary on cool blue neutrals
*/
[data-theme='lightgreen'] {
--radius: 1rem;
--background: oklch(0.9892 0.0054 117.9205);
--foreground: oklch(0.2077 0.0398 265.7549);
--card: oklch(1 0 0);
--card-foreground: oklch(0.2077 0.0398 265.7549);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.2077 0.0398 265.7549);
--primary: oklch(0.8871 0.2122 128.5041); /* lime */
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.3717 0.0392 257.2870);
--secondary-foreground: oklch(0.9842 0.0034 247.8575);
--muted: oklch(0.9683 0.0069 247.8956);
--muted-foreground: oklch(0.5544 0.0407 257.4166);
--accent: oklch(0.9819 0.0181 155.8263);
--accent-foreground: oklch(0.4479 0.1083 151.3277);
--destructive: oklch(0.6368 0.2078 25.3313);
--border: oklch(0.9288 0.0126 255.5078);
--input: oklch(0.9288 0.0126 255.5078);
--ring: oklch(0.8871 0.2122 128.5041);
--success: oklch(0.7227 0.1920 149.5793); /* fresh green */
--success-foreground: oklch(0 0 0);
--warning: oklch(0.7686 0.1647 70.0804); /* amber */
--warning-foreground: oklch(0 0 0);
--bitcoin: oklch(0.6920 0.2041 42.4293); /* warm orange */
--bitcoin-foreground: oklch(1 0 0);
--qr: oklch(1 0 0);
--qr-foreground: oklch(0.2077 0.0398 265.7549);
}
[data-theme='lightgreen'].dark {
--background: oklch(0.1288 0.0406 264.6952);
--foreground: oklch(0.9842 0.0034 247.8575);
--card: oklch(0.2077 0.0398 265.7549);
--card-foreground: oklch(0.9842 0.0034 247.8575);
--popover: oklch(0.2077 0.0398 265.7549);
--popover-foreground: oklch(0.9842 0.0034 247.8575);
--primary: oklch(0.8871 0.2122 128.5041); /* lime */
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.2795 0.0368 260.0310);
--secondary-foreground: oklch(0.9842 0.0034 247.8575);
--muted: oklch(0.2795 0.0368 260.0310);
--muted-foreground: oklch(0.7107 0.0351 256.7878);
--accent: oklch(0.3925 0.0896 152.5353);
--accent-foreground: oklch(0.8871 0.2122 128.5041);
--destructive: oklch(0.4437 0.1613 26.8994);
--border: oklch(0.2795 0.0368 260.0310);
--input: oklch(0.2795 0.0368 260.0310);
--ring: oklch(0.8871 0.2122 128.5041);
--success: oklch(0.7227 0.1920 149.5793);
--success-foreground: oklch(0.1288 0.0406 264.6952);
--warning: oklch(0.7686 0.1647 70.0804);
--warning-foreground: oklch(0.1288 0.0406 264.6952);
--bitcoin: oklch(0.7869 0.1601 51.8584);
--bitcoin-foreground: oklch(0.1288 0.0406 264.6952);
--qr: oklch(0.9842 0.0034 247.8575);
--qr-foreground: oklch(0.1288 0.0406 264.6952);
}
/*
* Neo Brutalist Palette
* Black borders, primary-color blocks, zero radius
*/
[data-theme='neobrut'] {
--radius: 0px;
--background: oklch(1 0 0);
--foreground: oklch(0 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0 0 0);
--primary: oklch(0.6489 0.2370 26.9728); /* red */
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.9680 0.2110 109.7692); /* yellow */
--secondary-foreground: oklch(0 0 0);
--muted: oklch(0.9551 0 0);
--muted-foreground: oklch(0.3211 0 0);
--accent: oklch(0.5635 0.2408 260.8178); /* blue */
--accent-foreground: oklch(1 0 0);
--destructive: oklch(0 0 0);
--border: oklch(0 0 0);
--input: oklch(0 0 0);
--ring: oklch(0.6489 0.2370 26.9728);
--success: oklch(0.7323 0.2492 142.4953); /* bright green */
--success-foreground: oklch(0 0 0);
--warning: oklch(0.9680 0.2110 109.7692); /* bright yellow */
--warning-foreground: oklch(0 0 0);
--bitcoin: oklch(0.7800 0.1900 60.0000); /* bright orange */
--bitcoin-foreground: oklch(0 0 0);
--qr: oklch(1 0 0);
--qr-foreground: oklch(0 0 0);
}
[data-theme='neobrut'].dark {
--background: oklch(0 0 0);
--foreground: oklch(1 0 0);
--card: oklch(0.3211 0 0);
--card-foreground: oklch(1 0 0);
--popover: oklch(0.3211 0 0);
--popover-foreground: oklch(1 0 0);
--primary: oklch(0.7044 0.1872 23.1858); /* bright red */
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.9691 0.2005 109.6228); /* yellow */
--secondary-foreground: oklch(0 0 0);
--muted: oklch(0.2178 0 0);
--muted-foreground: oklch(0.8452 0 0);
--accent: oklch(0.6755 0.1765 252.2592); /* blue */
--accent-foreground: oklch(0 0 0);
--destructive: oklch(1 0 0);
--border: oklch(1 0 0);
--input: oklch(1 0 0);
--ring: oklch(0.7044 0.1872 23.1858);
--success: oklch(0.7395 0.2268 142.8504);
--success-foreground: oklch(0 0 0);
--warning: oklch(0.9691 0.2005 109.6228);
--warning-foreground: oklch(0 0 0);
--bitcoin: oklch(0.8000 0.1800 60.0000);
--bitcoin-foreground: oklch(0 0 0);
--qr: oklch(1 0 0);
--qr-foreground: oklch(0 0 0);
}
/*
* Starry Night Palette
* Van Gogh blues, golden secondary
*/
[data-theme='starrynight'] {
--radius: 0.5rem;
--background: oklch(0.9755 0.0045 258.3245);
--foreground: oklch(0.2558 0.0433 268.0662);
--card: oklch(0.9341 0.0132 251.5628);
--card-foreground: oklch(0.2558 0.0433 268.0662);
--popover: oklch(0.9856 0.0278 98.0540);
--popover-foreground: oklch(0.2558 0.0433 268.0662);
--primary: oklch(0.4815 0.1178 263.3758); /* deep blue */
--primary-foreground: oklch(0.9856 0.0278 98.0540);
--secondary: oklch(0.8567 0.1164 81.0092); /* gold */
--secondary-foreground: oklch(0.2558 0.0433 268.0662);
--muted: oklch(0.9202 0.0080 106.5563);
--muted-foreground: oklch(0.4815 0.1178 263.3758);
--accent: oklch(0.6896 0.0714 234.0387);
--accent-foreground: oklch(0.9856 0.0278 98.0540);
--destructive: oklch(0.2611 0.0376 322.5267);
--border: oklch(0.7791 0.0156 251.1926);
--input: oklch(0.6896 0.0714 234.0387);
--ring: oklch(0.8567 0.1164 81.0092);
--success: oklch(0.6610 0.1560 154.8128);
--success-foreground: oklch(0.9856 0.0278 98.0540);
--warning: oklch(0.8567 0.1164 81.0092); /* matches gold secondary */
--warning-foreground: oklch(0.2558 0.0433 268.0662);
--bitcoin: oklch(0.6920 0.2041 42.4293);
--bitcoin-foreground: oklch(0.9856 0.0278 98.0540);
--qr: oklch(0.9755 0.0045 258.3245);
--qr-foreground: oklch(0.2558 0.0433 268.0662);
}
[data-theme='starrynight'].dark {
--background: oklch(0.2204 0.0198 275.8439);
--foreground: oklch(0.9366 0.0129 266.6974);
--card: oklch(0.2703 0.0407 281.3036);
--card-foreground: oklch(0.9366 0.0129 266.6974);
--popover: oklch(0.2703 0.0407 281.3036);
--popover-foreground: oklch(0.9097 0.1440 95.1120);
--primary: oklch(0.4815 0.1178 263.3758); /* deep blue */
--primary-foreground: oklch(0.9097 0.1440 95.1120);
--secondary: oklch(0.9097 0.1440 95.1120); /* gold */
--secondary-foreground: oklch(0.2703 0.0407 281.3036);
--muted: oklch(0.2424 0.0324 281.0890);
--muted-foreground: oklch(0.6243 0.0412 262.0375);
--accent: oklch(0.8469 0.0524 264.7751);
--accent-foreground: oklch(0.2204 0.0198 275.8439);
--destructive: oklch(0.5280 0.1200 357.1130);
--border: oklch(0.3072 0.0287 281.7681);
--input: oklch(0.4815 0.1178 263.3758);
--ring: oklch(0.9097 0.1440 95.1120);
--success: oklch(0.7403 0.1521 151.7821);
--success-foreground: oklch(0.2204 0.0198 275.8439);
--warning: oklch(0.9097 0.1440 95.1120);
--warning-foreground: oklch(0.2204 0.0198 275.8439);
--bitcoin: oklch(0.7869 0.1601 51.8584);
--bitcoin-foreground: oklch(0.2204 0.0198 275.8439);
--qr: oklch(0.9366 0.0129 266.6974);
--qr-foreground: oklch(0.2204 0.0198 275.8439);
}
@layer base { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border outline-ring/50;