/* * Generated from src/_data/palettes.json — edit the JSON, not this file. * * Layer 1 (--p-*): raw palette values. The active palette sits on :root; any other palette can be * previewed with (or ?palette=slug, see js/site.js). * Layer 2 (--bg, --text, …): semantic roles for light and dark. Components only use these. */ :root { --p-bg: #F6F1E4; --p-surface: #FDFAF2; --p-text: #032E50; --p-muted: #5F6F7E; --p-accent: #BF8239; --p-hover: #032E50; --p-gold: #E4BB6D; --p-teal: #255165; --p-teal2: #255165; --p-navy: #062C49; --p-red: #BF8239; --p-line: #E6DBC4; --p-dark-bg: #032E50; --p-dark-surface: #062C49; --p-dark-text: #FACE72; --p-dark-muted: #B5A98C; --p-dark-line: #255165; } :root[data-palette="master"] { --p-bg: #FBF5E8; --p-surface: #FFFCF4; --p-text: #042C5D; --p-muted: #5E6B7E; --p-accent: #EC8423; --p-hover: #C13127; --p-gold: #F7C764; --p-teal: #1D6679; --p-teal2: #38A09C; --p-navy: #044E7A; --p-red: #A33B2B; --p-line: #E7D9C0; --p-dark-bg: #042C5D; --p-dark-surface: #0A3A6E; --p-dark-text: #FBE2BC; --p-dark-muted: #A9B6C8; --p-dark-line: #1D4F86; } :root[data-palette="rangoli-diya"] { --p-bg: #EEEDE5; --p-surface: #F7F6F0; --p-text: #063A62; --p-muted: #5F6E7A; --p-accent: #F18D2A; --p-hover: #DC3139; --p-gold: #F0C387; --p-teal: #075A74; --p-teal2: #217165; --p-navy: #063A62; --p-red: #DC3139; --p-line: #DCD8C8; --p-dark-bg: #063A62; --p-dark-surface: #075A74; --p-dark-text: #EEEDE5; --p-dark-muted: #A9BCC6; --p-dark-line: #1F5F7E; } :root[data-palette="peacock-arch"] { --p-bg: #F4F1E8; --p-surface: #FCFAF4; --p-text: #064064; --p-muted: #6E7566; --p-accent: #EA7D24; --p-hover: #C33F1C; --p-gold: #F2A73C; --p-teal: #1D7B7B; --p-teal2: #8A926D; --p-navy: #064064; --p-red: #C33F1C; --p-line: #CFD9D6; --p-dark-bg: #064064; --p-dark-surface: #0B5670; --p-dark-text: #F4F1E8; --p-dark-muted: #A8BDB8; --p-dark-line: #1D7B7B; } :root[data-palette="lotus-mandala"] { --p-bg: #F5F1DA; --p-surface: #FCF9EA; --p-text: #04294E; --p-muted: #5C6C7C; --p-accent: #F7C764; --p-hover: #C13127; --p-gold: #F7C764; --p-teal: #044E7A; --p-teal2: #6DADB9; --p-navy: #044E7A; --p-red: #C13127; --p-line: #E3DCBE; --p-dark-bg: #04294E; --p-dark-surface: #044E7A; --p-dark-text: #F5F1DA; --p-dark-muted: #9DB5C6; --p-dark-line: #046491; } :root[data-palette="watercolor-taj"] { --p-bg: #F3F6F5; --p-surface: #FFFFFF; --p-text: #0E4F7D; --p-muted: #647A88; --p-accent: #F1B159; --p-hover: #06719B; --p-gold: #F1B159; --p-teal: #38A09C; --p-teal2: #7CC3C2; --p-navy: #0E4F7D; --p-red: #06719B; --p-line: #DEE7E2; --p-dark-bg: #0E4F7D; --p-dark-surface: #06719B; --p-dark-text: #F3F6F5; --p-dark-muted: #B2CBD3; --p-dark-line: #38A09C; } :root[data-palette="royal-ornamental"] { --p-bg: #F6F1E4; --p-surface: #FDFAF2; --p-text: #032E50; --p-muted: #5F6F7E; --p-accent: #BF8239; --p-hover: #032E50; --p-gold: #E4BB6D; --p-teal: #255165; --p-teal2: #255165; --p-navy: #062C49; --p-red: #BF8239; --p-line: #E6DBC4; --p-dark-bg: #032E50; --p-dark-surface: #062C49; --p-dark-text: #FACE72; --p-dark-muted: #B5A98C; --p-dark-line: #255165; } :root[data-palette="elephant-floral"] { --p-bg: #FBE2BC; --p-surface: #FFF3DF; --p-text: #0B3351; --p-muted: #6B6255; --p-accent: #EC8423; --p-hover: #A33B2B; --p-gold: #EDBD68; --p-teal: #1D6679; --p-teal2: #3C8FB0; --p-navy: #04375F; --p-red: #A33B2B; --p-line: #E9CFA6; --p-dark-bg: #0B3351; --p-dark-surface: #04375F; --p-dark-text: #FBE2BC; --p-dark-muted: #B6B39A; --p-dark-line: #1D6679; } :root { color-scheme: light; --bg: var(--p-bg); --surface: var(--p-surface); --text: var(--p-text); --muted: var(--p-muted); --accent: var(--p-accent); --hover: var(--p-hover); --gold: var(--p-gold); --teal: var(--p-teal); --teal2: var(--p-teal2); --head: var(--p-navy); --brand: var(--p-navy); --red: var(--p-red); --line: var(--p-line); --card-bg: var(--p-surface); --cta-text: #fff; --bar: var(--p-navy); --paper: var(--p-surface); --paper-text: var(--p-text); --shadow: 0 .5rem 1.5rem rgba(4, 44, 93, .10); --sec-line: transparent; --field: var(--p-surface); --code-bg: var(--p-navy); --code-text: var(--p-bg); --mark: color-mix(in srgb, var(--p-gold) 40%, transparent); --knob-left: .125rem; --toggle-glyph: "\2600"; --wall-0: var(--p-line); --wall-1: var(--p-gold); --wall-2: var(--p-teal2); --wall-3: var(--p-teal); --wall-4: var(--p-navy); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--p-dark-bg); --surface: var(--p-dark-surface); --text: var(--p-dark-text); --muted: var(--p-dark-muted); --hover: var(--p-gold); --teal: var(--p-gold); --teal2: var(--p-dark-muted); --head: var(--p-dark-text); --brand: var(--p-gold); --red: var(--p-accent); --line: var(--p-dark-line); --card-bg: var(--p-dark-bg); --cta-text: var(--p-dark-bg); --bar: var(--p-gold); --paper: #FBF5E8; --paper-text: #042C5D; --shadow: 0 .75rem 1.875rem rgba(0, 0, 0, .4); --sec-line: color-mix(in srgb, var(--p-gold) 47%, transparent); --field: var(--p-dark-bg); --code-bg: #01162B; --code-text: var(--p-dark-text); --mark: color-mix(in srgb, var(--p-gold) 33%, transparent); --knob-left: 1.25rem; --toggle-glyph: "\263E"; --wall-0: var(--p-dark-line); --wall-1: var(--p-dark-muted); --wall-2: var(--p-accent); --wall-3: var(--p-gold); --wall-4: var(--p-dark-text); } } :root[data-theme="dark"] { color-scheme: dark; --bg: var(--p-dark-bg); --surface: var(--p-dark-surface); --text: var(--p-dark-text); --muted: var(--p-dark-muted); --hover: var(--p-gold); --teal: var(--p-gold); --teal2: var(--p-dark-muted); --head: var(--p-dark-text); --brand: var(--p-gold); --red: var(--p-accent); --line: var(--p-dark-line); --card-bg: var(--p-dark-bg); --cta-text: var(--p-dark-bg); --bar: var(--p-gold); --paper: #FBF5E8; --paper-text: #042C5D; --shadow: 0 .75rem 1.875rem rgba(0, 0, 0, .4); --sec-line: color-mix(in srgb, var(--p-gold) 47%, transparent); --field: var(--p-dark-bg); --code-bg: #01162B; --code-text: var(--p-dark-text); --mark: color-mix(in srgb, var(--p-gold) 33%, transparent); --knob-left: 1.25rem; --toggle-glyph: "\263E"; --wall-0: var(--p-dark-line); --wall-1: var(--p-dark-muted); --wall-2: var(--p-accent); --wall-3: var(--p-gold); --wall-4: var(--p-dark-text); }