/* ============================================================
lulla.fi — Theme Profiles
------------------------------------------------------------
A "profile" re-skins the ENTIRE kit by overriding the design
tokens on a wrapper — no component changes. Works because every
component (bespoke or shadcn-ported) reads its colour, border,
radius, font, and shadow from the CSS variables in
colors_and_type.css. Override the variables → everything follows.
USAGE
-----
Load AFTER colors_and_type.css (and shadcn-theme.css if used):
Then set the profile anywhere up the tree (usually ):
Switch at runtime:
document.documentElement.dataset.profile = "night";
This file is intentionally NOT @imported by colors_and_type.css
so the design-system token manifest stays single-valued/clean.
============================================================ */
/* Brand-profile display faces (see the brand profiles at the end of this file) */
/* ============================================================
Profile · LO-FI
Greyscale, hand-drawn, flat. Everything (accents included)
desaturates to greys so it reads as a sketch, not a theme.
============================================================ */
[data-profile="lofi"] {
/* parchment ramp → paper greys */
--parchment-50: #ffffff;
--parchment-100: #fbfbfa;
--parchment-200: #f1f1ef;
--parchment-300: #e5e5e2;
--parchment-400: #cfcfcb;
--parchment-500: #b3b3ae;
/* ink ramp → pencil greys */
--ink-300: #b8b8b4;
--ink-400: #9a9a96;
--ink-500: #7c7c78;
--ink-700: #55554f;
--ink-800: #3a3a35;
--ink-900: #26261f;
/* accents desaturate to grey — a wireframe has no colour */
--sage-50: #eeeeeb; --sage-100: #e2e2de; --sage-300: #b7b7b2;
--sage-500: #55554f; --sage-600: #47473f; --sage-700: #3a3a35;
--fg-on-sage: #ffffff;
--clay-50: #eeeeeb; --clay-500: #6b6b64; --clay-700: #47473f; --fg-on-clay: #ffffff;
--warning-50: #f2f0ea; --warning-500: #8a8577; --warning-700: #56534a;
--danger-50: #f0eded; --danger-500: #6b6b64; --danger-700: #47473f;
--success-500: #6b6b64; --success-700: #47473f;
/* borders read as drawn pencil lines */
--line: #26261f;
--line-soft: #c7c7c2;
--line-strong: #26261f;
/* hand-drawn type everywhere */
--font-display: "Bradley Hand", "Comic Sans MS", cursive;
--font-sans: "Bradley Hand", "Comic Sans MS", cursive;
--font-mono: "Bradley Hand", "Comic Sans MS", cursive;
/* flat: no soft shadows, minimal radius */
--radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px;
--shadow-soft: none;
--shadow-lift: 2px 2px 0 rgba(38,38,31,.14);
--shadow-overlay: 3px 3px 0 rgba(38,38,31,.18);
/* shadcn bridge follows automatically via colors_and_type aliases,
but pin the ones that reference raw values just in case */
--ring: #26261f;
}
/* a touch of hand-drawn character on the common surfaces */
[data-profile="lofi"] * { box-shadow: none !important; }
[data-profile="lofi"] .rounded-lg,
[data-profile="lofi"] .rounded-md,
[data-profile="lofi"] [class*="rounded"] { border-radius: 5px 4px 6px 4px / 4px 6px 4px 5px; }
[data-profile="lofi"] img { filter: grayscale(1) contrast(.9); opacity: .85; }
/* ============================================================
Profile · NIGHT
Warm, low-glare dark. Same calm palette, inverted for evening.
============================================================ */
[data-profile="night"] {
--parchment-50: #26241f;
--parchment-100: #211f1b;
--parchment-200: #2f2c26;
--parchment-300: #3a362f;
--parchment-400: #4a4539;
--parchment-500: #5c5647;
--ink-300: #6b6559;
--ink-400: #8a8375;
--ink-500: #a49c8c;
--ink-700: #cfc7b6;
--ink-800: #e6ded0;
--ink-900: #f3ecdf;
/* accents keep hue, lift lightness for dark bg */
--sage-50: #2b332c; --sage-100: #33402f; --sage-300: #6f9a72;
--sage-500: #8fbf8f; --sage-600: #a3cfa1; --sage-700: #b9dcb5; --fg-on-sage: #1b2a1c;
--clay-50: #3a2e26; --clay-500: #d79a72; --clay-700: #eab894; --fg-on-clay: #2a1c12;
--warning-500: #d9b46a; --warning-700: #e6c98a;
--danger-500: #d98a7a; --danger-700: #e6a99a; --danger-50: #3a2724;
--success-500: #8fbf8f; --success-700: #b9dcb5;
--line: #423d33;
--line-soft: #332f28;
--line-strong: #5c5647;
--shadow-soft: 0 1px 2px rgba(0,0,0,.35);
--shadow-lift: 0 8px 24px rgba(0,0,0,.45);
--shadow-overlay: 0 24px 60px rgba(0,0,0,.55);
}
/* Calm is the default (no data-profile / data-profile="calm") — base tokens. */
[data-profile="calm"] { /* explicit no-op for clarity */ }
/* ============================================================
Profile · SYSTEM 7 (Mac SE/30 · System 7.5/7.6 retro skin)
------------------------------------------------------------
Built-in from day 0 as an OPT-IN full skin — the retro that
currently lives as tasteful "highlights" (see docs/SSE + retro
highlights.html), dialled all the way up. Because every component
reads these tokens, `data-profile="system7"` re-skins the whole
kit with no component changes. This is a STARTER — refine the
ramp when you commit to shipping it; add it to
as a 4th option when ready.
============================================================ */
[data-profile="system7"] {
/* surfaces → classic 8-bit desktop greys (with a faint warm cast) */
--parchment-50: #ffffff;
--parchment-100: #dcdcdc; /* the iconic desktop grey */
--parchment-200: #cccccc;
--parchment-300: #bdbdbd;
--parchment-400: #9a9a9a;
--parchment-500: #808080;
/* ink → hard black (System 7 was 1-bit UI on grey) */
--ink-900: #000000;
--ink-800: #1a1a1a;
--ink-700: #333333;
/* accent → keep lulla sage so it still reads as lulla, not generic retro */
--accent: var(--sage-600);
--accent-hover: var(--sage-700);
--fg-on-sage: #ffffff;
/* hard 1px black outlines everywhere, chunky bevel shadows */
--line: #000000;
--line-soft: #808080;
--line-strong: #000000;
--radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; /* tight, boxy corners */
--shadow-soft: 1px 1px 0 rgba(0,0,0,.6);
--shadow-lift: 2px 2px 0 rgba(0,0,0,.55);
--shadow-overlay: 2px 2px 0 #000, 4px 4px 0 rgba(0,0,0,.3);
/* Chicago-substitute UI font (swap for a licensed Chicago/Charcoal later);
keep Newsreader off — System 7 UI was a bold humanist sans, not a serif. */
--font-display: var(--font-sans);
}
/* System 7 · NIGHT — the classic 1-bit desktop after dark: charcoal desktop,
light UI, hard outlines. Registered as BRANDS.system7.dark. */
/* ============================================================
DISTINCTIVE DETAIL 01 — the physical press.
Buttons collapse into their shadow on :active (one frame, no easing).
Applies to the shared interactive classes across token-driven pages;
reads strongest in System 7 (hard shadows), softens elsewhere.
============================================================ */
.btn:active, .choice:active, .srow:active, .mini:active, .pressbtn:active, .kbtn:active {
transform: translate(1.5px, 1.5px);
box-shadow: none !important;
}
[data-profile^="system7"] .btn, [data-profile^="system7"] .choice, [data-profile^="system7"] .pressbtn {
border: 1.5px solid var(--ink-900);
box-shadow: 2.5px 2.5px 0 var(--ink-900);
}
[data-profile^="system7"] .btn:active, [data-profile^="system7"] .choice:active, [data-profile^="system7"] .pressbtn:active {
transform: translate(2.5px, 2.5px);
}
@media (prefers-reduced-motion: reduce) {
.btn:active, .choice:active, .srow:active, .mini:active, .pressbtn:active, .kbtn:active { transform: none; }
}
[data-profile="system7-night"] {
--parchment-50: #2b2b2b;
--parchment-100: #3a3a3a; /* the desktop grey, inverted */
--parchment-200: #333333;
--parchment-300: #2b2b2b;
--parchment-400: #4f4f4f;
--parchment-500: #6a6a6a;
--ink-900: #f2f2f2; --ink-800: #e0e0e0; --ink-700: #c4c4c4; --ink-500: #9a9a9a; --ink-400: #808080; --ink-300: #6a6a6a;
--accent: var(--sage-600); --accent-hover: var(--sage-700);
--sage-50:#22302a; --sage-100:#2a3a32; --sage-300:#7fb89f; --sage-500:#9fd0b6; --sage-600:#b3dcc6; --sage-700:#c6e6d6; --fg-on-sage:#12211b;
--clay-50:#332420; --clay-500:#e0a07c; --clay-700:#eab99f; --fg-on-clay:#241713;
--warning-500:#e0c06a; --warning-700:#ecd28c; --danger-500:#e58a7a; --danger-700:#f0a996; --success-500:#9fd0b6; --success-700:#c6e6d6;
--line: #ffffff; --line-soft: #6a6a6a; --line-strong: #ffffff;
--radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px;
--shadow-soft: 1px 1px 0 rgba(0,0,0,.7); --shadow-lift: 2px 2px 0 rgba(0,0,0,.7); --shadow-overlay: 2px 2px 0 #000, 4px 4px 0 rgba(0,0,0,.5);
--font-display: var(--font-sans);
}
/* ============================================================
BRAND PROFILES (distinctive light palettes — see Theme directions.html)
------------------------------------------------------------
These are alternative DEFAULT brand looks, not light/dark modes.
Each re-skins the whole kit via the same token override mechanism.
Switch: document.documentElement.dataset.profile = "ink-marigold".
`calm` (no profile) remains the current sage baseline.
Each brand profile can still pair with `night` by layering — but
for now they are standalone light identities to choose between.
============================================================ */
/* B · Ink & Marigold — warm, editorial, confident (Fraunces display) */
[data-profile="ink-marigold"] {
--parchment-50:#fdfaf4; --parchment-100:#fbf6ee; --parchment-200:#f3ebdd; --parchment-300:#e9dec9; --parchment-400:#d8c8a9; --parchment-500:#bfa97f;
--ink-300:#8a8b83; --ink-400:#6f7169; --ink-500:#5a655f; --ink-700:#33403c; --ink-800:#26302c; --ink-900:#1c2b2a;
--sage-50:#f6ecd8; --sage-100:#f2e4c8; --sage-300:#e8bf72; --sage-500:#c67d1e; --sage-600:#a5691a; --sage-700:#8a5714; --fg-on-sage:#1c2b2a;
--clay-50:#e8efe9; --clay-500:#3f7d63; --clay-700:#2f6a52; --fg-on-clay:#ffffff;
--warning-50:#f6ecd8; --warning-500:#c67d1e; --warning-700:#8a5714;
--danger-50:#f6e6e0; --danger-500:#c0553a; --danger-700:#9a4530;
--success-500:#3f7d63; --success-700:#2f6a52;
--line:rgba(28,43,42,.13); --line-soft:rgba(28,43,42,.08); --line-strong:rgba(28,43,42,.24);
--font-display:Georgia,"Times New Roman",serif;
--ring:#c67d1e;
}
/* C · Aubergine & Blush — soft, distinctive, un-fintech (Instrument Serif display) */
[data-profile="aubergine-blush"] {
--parchment-50:#fdf6f4; --parchment-100:#fbf4f2; --parchment-200:#f6e9e6; --parchment-300:#efd9d4; --parchment-400:#e0bcb4; --parchment-500:#c5978c;
--ink-300:#9a8391; --ink-400:#846d7a; --ink-500:#7a5e70; --ink-700:#4c2f43; --ink-800:#432639; --ink-900:#3a1f33;
--sage-50:#f4e4e6; --sage-100:#eed7dc; --sage-300:#b57f9e; --sage-500:#5b2a4e; --sage-600:#4c223f; --sage-700:#3f1c34; --fg-on-sage:#fbf4f2;
--clay-50:#f6e8e2; --clay-500:#b56a52; --clay-700:#95513d; --fg-on-clay:#ffffff;
--warning-50:#f6ecd8; --warning-500:#b07d1e; --warning-700:#8a5714;
--danger-50:#f6e2e2; --danger-500:#b34a4a; --danger-700:#8f3a3a;
--success-50:#eaefdc; --success-500:#7a8a4f; --success-700:#5f6d3d;
--line:rgba(58,31,51,.13); --line-soft:rgba(58,31,51,.08); --line-strong:rgba(58,31,51,.24);
--font-display:Georgia,"Times New Roman",serif;
--ring:#5b2a4e;
}
/* D · Midnight & Chartreuse — dark, modern, high-contrast (Space Grotesk display).
This one is inherently dark (its own identity), distinct from `night`. */
[data-profile="midnight-lime"] {
--parchment-50:#0f1a17; --parchment-100:#12201b; --parchment-200:#17241f; --parchment-300:#1e2e27; --parchment-400:#2b3d34; --parchment-500:#3a4f44;
--ink-300:#7c8f85; --ink-400:#9db0a5; --ink-500:#b6c6bc; --ink-700:#d6e2da; --ink-800:#e6efe8; --ink-900:#eef3ee;
--sage-50:#1c2b24; --sage-100:#223129; --sage-300:#9fd44f; --sage-500:#c8f04f; --sage-600:#d3f56b; --sage-700:#deff88; --fg-on-sage:#0f1a17;
--clay-50:#26201c; --clay-500:#e79a6a; --clay-700:#f0b58c; --fg-on-clay:#26201c;
--warning-500:#e6c05a; --warning-700:#f0d488; --warning-50:#2a2618;
--danger-500:#e88a76; --danger-700:#f0a996; --danger-50:#2e1e1a;
--success-500:#c8f04f; --success-700:#deff88;
--line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
--font-display:"Avenir Next",Avenir,system-ui,sans-serif;
--shadow-soft:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -12px rgba(0,0,0,.6);
--ring:#c8f04f;
}
/* E · Oat & Terracotta — earthy, grounded, tactile (Archivo display) */
[data-profile="oat-terracotta"] {
--parchment-50:#faf6ef; --parchment-100:#f7f2ea; --parchment-200:#efe7da; --parchment-300:#e4d8c5; --parchment-400:#d0bda2; --parchment-500:#b39c7d;
--ink-300:#8a8177; --ink-400:#75695f; --ink-500:#6b6157; --ink-700:#3d372f; --ink-800:#332e28; --ink-900:#2a2622;
--sage-50:#f0e6d6; --sage-100:#ecdfcb; --sage-300:#dd9a72; --sage-500:#c15f3c; --sage-600:#a84e2c; --sage-700:#8a3f23; --fg-on-sage:#f7f2ea;
--clay-50:#eae7d6; --clay-500:#6f7d43; --clay-700:#586534; --fg-on-clay:#ffffff;
--warning-50:#f4ecd6; --warning-500:#c1892c; --warning-700:#946620;
--danger-50:#f4e3dc; --danger-500:#b5502f; --danger-700:#8f3e24;
--success-500:#6f7d43; --success-700:#586534;
--line:rgba(42,38,34,.13); --line-soft:rgba(42,38,34,.08); --line-strong:rgba(42,38,34,.24);
--font-display:"Arial Black","Helvetica Neue",system-ui,sans-serif;
--ring:#c15f3c;
}
/* F · Slate & Butter — trustworthy blue, warm pop (Newsreader display) */
[data-profile="slate-butter"] {
--parchment-50:#fafaf7; --parchment-100:#f6f6f2; --parchment-200:#ecece4; --parchment-300:#deded3; --parchment-400:#c2c2b4; --parchment-500:#9a9a8c;
--ink-300:#8a93a1; --ink-400:#6b7480; --ink-500:#5a6472; --ink-700:#333b47; --ink-800:#2b323c; --ink-900:#242a33;
--sage-50:#e9ecf2; --sage-100:#dde2ec; --sage-300:#8593ac; --sage-500:#3b4a63; --sage-600:#313e54; --sage-700:#283345; --fg-on-sage:#f6f6f2;
--clay-50:#f6efd8; --clay-500:#c79a2e; --clay-700:#9a7620; --fg-on-clay:#242a33;
--warning-50:#f6efd8; --warning-500:#c79a2e; --warning-700:#9a7620;
--danger-50:#f4e2e2; --danger-500:#b34a4a; --danger-700:#8f3a3a;
--success-50:#e4efe4; --success-500:#5a7d5a; --success-700:#456245;
--line:rgba(36,42,51,.12); --line-soft:rgba(36,42,51,.07); --line-strong:rgba(36,42,51,.22);
--font-display:Georgia,"Times New Roman",serif;
--ring:#3b4a63;
}
/* G · Guava — warm coral-pink, human, unexpected for money (Fraunces display) */
[data-profile="guava"] {
--parchment-50:#fffaf6; --parchment-100:#fdf3ec; --parchment-200:#fbe8dd; --parchment-300:#f6d6c6; --parchment-400:#eab29c; --parchment-500:#d98a6f;
--ink-300:#9a827a; --ink-400:#7d6459; --ink-500:#6b5248; --ink-700:#3d2a22; --ink-800:#30201a; --ink-900:#2b211d;
--sage-50:#fde6df; --sage-100:#fbd8cd; --sage-300:#f0937c; --sage-500:#e5533d; --sage-600:#cf4331; --sage-700:#b23726; --fg-on-sage:#fffaf6;
--clay-50:#fce0e6; --clay-500:#d84a6b; --clay-700:#b23955; --fg-on-clay:#fffaf6;
--warning-50:#f9ecd4; --warning-500:#cf8a1e; --warning-700:#9c6716;
--danger-50:#fbe0da; --danger-500:#cf3f33; --danger-700:#a5322a;
--success-50:#e6efdc; --success-500:#5f8a4f; --success-700:#4a6d3d;
--line:rgba(43,33,29,.12); --line-soft:rgba(43,33,29,.07); --line-strong:rgba(43,33,29,.22);
--font-display:Georgia,"Times New Roman",serif;
--ring:#e5533d;
}
/* H · Berry & Blush — deep berry + rose, sophisticated (Instrument Serif display) */
[data-profile="berry-blush"] {
--parchment-50:#fdf5f4; --parchment-100:#fbf0f0; --parchment-200:#f7e4e5; --parchment-300:#f0d2d5; --parchment-400:#e0adb4; --parchment-500:#c5848e;
--ink-300:#a08088; --ink-400:#886a72; --ink-500:#7a5b64; --ink-700:#4a2732; --ink-800:#3d1f2a; --ink-900:#331a24;
--sage-50:#f6dde3; --sage-100:#f1ccd5; --sage-300:#bf6b81; --sage-500:#7d2b46; --sage-600:#6a233b; --sage-700:#571c30; --fg-on-sage:#fdf5f4;
--clay-50:#f9e2dd; --clay-500:#c96b5a; --clay-700:#a55344; --fg-on-clay:#fdf5f4;
--warning-50:#f6ecd6; --warning-500:#b5851e; --warning-700:#8a6416;
--danger-50:#f9dede; --danger-500:#b53a44; --danger-700:#8f2d36;
--success-50:#e6efdd; --success-500:#6f8a52; --success-700:#566d3f;
--line:rgba(51,26,36,.13); --line-soft:rgba(51,26,36,.08); --line-strong:rgba(51,26,36,.24);
--font-display:Georgia,"Times New Roman",serif;
--ring:#7d2b46;
}
/* H-dark · Berry Night — Berry & Blush's own dark variant (keeps rose/berry hue, not generic green) */
[data-profile="berry-night"] {
--parchment-50:#2a1a22; --parchment-100:#241620; --parchment-200:#31202a; --parchment-300:#3d2833; --parchment-400:#4f3441; --parchment-500:#6a4655;
--ink-300:#9a7d88; --ink-400:#b89aa4; --ink-500:#c9adb6; --ink-700:#e2d0d6; --ink-800:#efe3e7; --ink-900:#f6eef1;
--sage-50:#3a2430; --sage-100:#432a38; --sage-300:#b06f88; --sage-500:#e08fa6; --sage-600:#e9a3b6; --sage-700:#f0b9c8; --fg-on-sage:#2a1a22;
--clay-50:#3a2620; --clay-500:#e0977f; --clay-700:#eab39f; --fg-on-clay:#2a1a22;
--warning-500:#e0c06a; --warning-700:#ecd28c; --warning-50:#2f2618;
--danger-500:#e58a8a; --danger-700:#f0a9a9; --danger-50:#331e1e;
--success-500:#9ec27f; --success-700:#bcd6a3;
--line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
--font-display:Georgia,"Times New Roman",serif;
--shadow-soft:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -12px rgba(0,0,0,.6);
--ring:#e08fa6;
}
/* I · Ink & Rust — near-black + warm rust, editorial/newspaper, high craft (Bricolage Grotesque display) */
[data-profile="ink-rust"] {
--parchment-50:#fbf8f1; --parchment-100:#f6f2ea; --parchment-200:#ece5d8; --parchment-300:#ddd3c0; --parchment-400:#c2b49a; --parchment-500:#9c8b6e;
--ink-300:#8a827a; --ink-400:#6b635b; --ink-500:#544d46; --ink-700:#2b2723; --ink-800:#211d1a; --ink-900:#1a1815;
--sage-50:#f4e1d6; --sage-100:#eed2c1; --sage-300:#cf8b66; --sage-500:#b5502a; --sage-600:#9a4222; --sage-700:#7d351b; --fg-on-sage:#fbf8f1;
--clay-50:#e6e6dd; --clay-500:#5c6151; --clay-700:#454a3c; --fg-on-clay:#fbf8f1;
--warning-50:#f6ecd2; --warning-500:#b5851e; --warning-700:#8a6416;
--danger-50:#f4ddd5; --danger-500:#b5432a; --danger-700:#8f3421;
--success-50:#e6ecda; --success-500:#5c6d43; --success-700:#465435;
--line:rgba(26,24,21,.14); --line-soft:rgba(26,24,21,.08); --line-strong:rgba(26,24,21,.26);
--font-display:"Avenir Next",Avenir,system-ui,sans-serif;
--ring:#b5502a;
}
/* J · Clay — sandstone/clay browns: warm, grounded, literally the "non-judgmental" budgeting palette (Fraunces display) */
[data-profile="clay"] {
--parchment-50:#faf4e9; --parchment-100:#f4ebdd; --parchment-200:#ece0cc; --parchment-300:#ddceb2; --parchment-400:#c6b18c; --parchment-500:#a89066;
--ink-300:#8a7a63; --ink-400:#6f5f49; --ink-500:#5c4d3a; --ink-700:#3d3123; --ink-800:#33291d; --ink-900:#2a2118;
--sage-50:#ece0cc; --sage-100:#e2d2b6; --sage-300:#b58f5e; --sage-500:#8a5a3c; --sage-600:#744a30; --sage-700:#5e3b26; --fg-on-sage:#faf4e9;
--clay-50:#e8ded0; --clay-500:#6f7a52; --clay-700:#565f3f; --fg-on-clay:#faf4e9;
--warning-50:#f4e8cc; --warning-500:#b5851e; --warning-700:#8a6416;
--danger-50:#f0ddd0; --danger-500:#a5502f; --danger-700:#824025;
--success-50:#e6e6cc; --success-500:#6f7a52; --success-700:#565f3f;
--line:rgba(42,33,24,.14); --line-soft:rgba(42,33,24,.08); --line-strong:rgba(42,33,24,.24);
--font-display:Georgia,"Times New Roman",serif;
--ring:#8a5a3c;
}
/* ============================================================
BRAND DARK VARIANTS — each light brand's own night mode
(tinted with its hue, not the generic sage `night`).
Registered in theme-toggle.js BRANDS[].dark.
============================================================ */
[data-profile="ink-marigold-night"] {
--parchment-50:#141f1e; --parchment-100:#111b1a; --parchment-200:#1b2726; --parchment-300:#243130; --parchment-400:#33413f; --parchment-500:#465654;
--ink-300:#7f918c; --ink-400:#9db0aa; --ink-500:#b3c4bf; --ink-700:#d6e0dc; --ink-800:#e8efec; --ink-900:#f3f7f5;
--sage-50:#2a2416; --sage-100:#33301c; --sage-300:#d0a24a; --sage-500:#e8a13a; --sage-600:#efb45c; --sage-700:#f3c67e; --fg-on-sage:#141f1e;
--clay-50:#16281f; --clay-500:#5fae8a; --clay-700:#8cc7ab; --fg-on-clay:#141f1e;
--warning-500:#e0c06a; --warning-700:#ecd28c; --warning-50:#2a2618;
--danger-500:#e58a76; --danger-700:#f0a996; --danger-50:#2e1e1a;
--success-500:#5fae8a; --success-700:#8cc7ab;
--line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
--font-display:Georgia,"Times New Roman",serif; --shadow-soft:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -12px rgba(0,0,0,.6); --ring:#e8a13a;
}
[data-profile="aubergine-night"] {
--parchment-50:#1e1420; --parchment-100:#1a111c; --parchment-200:#281a2a; --parchment-300:#332236; --parchment-400:#442f47; --parchment-500:#5c445f;
--ink-300:#9a8398; --ink-400:#b89ab4; --ink-500:#c9adc6; --ink-700:#e2d0e0; --ink-800:#efe3ee; --ink-900:#f6eef4;
--sage-50:#2c1a30; --sage-100:#36203a; --sage-300:#b06f9e; --sage-500:#d98fbf; --sage-600:#e3a3cc; --sage-700:#eeb9da; --fg-on-sage:#1e1420;
--clay-50:#301f1a; --clay-500:#e0977f; --clay-700:#eab39f; --fg-on-clay:#1e1420;
--warning-500:#e0c06a; --warning-700:#ecd28c; --warning-50:#2a2618;
--danger-500:#e58a8a; --danger-700:#f0a9a9; --danger-50:#301e1e;
--success-500:#9ec27f; --success-700:#bcd6a3;
--line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
--font-display:Georgia,"Times New Roman",serif; --shadow-soft:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -12px rgba(0,0,0,.6); --ring:#d98fbf;
}
[data-profile="slate-night"] {
--parchment-50:#161c26; --parchment-100:#131822; --parchment-200:#1e2530; --parchment-300:#28303d; --parchment-400:#3a4453; --parchment-500:#4f5c6f;
--ink-300:#8593a4; --ink-400:#a4b2c2; --ink-500:#bac6d3; --ink-700:#dae1e9; --ink-800:#eaeff3; --ink-900:#f4f7f9;
--sage-50:#2a2618; --sage-100:#33301c; --sage-300:#e0c05a; --sage-500:#f2c14e; --sage-600:#f5cf6e; --sage-700:#f8dc90; --fg-on-sage:#161c26;
--clay-50:#1c2632; --clay-500:#7fa0cc; --clay-700:#a3c0e0; --fg-on-clay:#161c26;
--warning-500:#f2c14e; --warning-700:#f8dc90; --warning-50:#2a2618;
--danger-500:#e58a8a; --danger-700:#f0a9a9; --danger-50:#301e1e;
--success-500:#8fbf8f; --success-700:#b9dcb5;
--line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
--font-display:Georgia,"Times New Roman",serif; --shadow-soft:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -12px rgba(0,0,0,.6); --ring:#f2c14e;
}
[data-profile="terracotta-night"] {
--parchment-50:#201a15; --parchment-100:#1c1712; --parchment-200:#29221b; --parchment-300:#352c23; --parchment-400:#473b2f; --parchment-500:#5f5040;
--ink-300:#9a8d7d; --ink-400:#b8a993; --ink-500:#c9bca8; --ink-700:#e2d8c9; --ink-800:#efe8dd; --ink-900:#f6f1e9;
--sage-50:#2c1c14; --sage-100:#36221a; --sage-300:#d68a63; --sage-500:#e08a63; --sage-600:#e89f7d; --sage-700:#f0b89c; --fg-on-sage:#201a15;
--clay-50:#26261a; --clay-500:#9eb06a; --clay-700:#bccc8c; --fg-on-clay:#201a15;
--warning-500:#e0c06a; --warning-700:#ecd28c; --warning-50:#2a2618;
--danger-500:#e58a72; --danger-700:#f0a996; --danger-50:#2e1e1a;
--success-500:#9eb06a; --success-700:#bccc8c;
--line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
--font-display:"Arial Black","Helvetica Neue",system-ui,sans-serif; --shadow-soft:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -12px rgba(0,0,0,.6); --ring:#e08a63;
}
[data-profile="guava-night"] {
--parchment-50:#241715; --parchment-100:#201312; --parchment-200:#2d1e1b; --parchment-300:#392824; --parchment-400:#4c352f; --parchment-500:#66463d;
--ink-300:#9a827a; --ink-400:#b89a90; --ink-500:#c9ada4; --ink-700:#e2d0c9; --ink-800:#efe3dd; --ink-900:#f6eeea;
--sage-50:#301a16; --sage-100:#3a201b; --sage-300:#f0937c; --sage-500:#f47a63; --sage-600:#f7917d; --sage-700:#faab9a; --fg-on-sage:#241715;
--clay-50:#301a20; --clay-500:#e57a94; --clay-700:#f0a0b3; --fg-on-clay:#241715;
--warning-500:#e0c06a; --warning-700:#ecd28c; --warning-50:#2a2618;
--danger-500:#e5837a; --danger-700:#f0a396; --danger-50:#2e1c1a;
--success-500:#9ec27f; --success-700:#bcd6a3;
--line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
--font-display:Georgia,"Times New Roman",serif; --shadow-soft:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -12px rgba(0,0,0,.6); --ring:#f47a63;
}
[data-profile="ink-rust-night"] {
--parchment-50:#1a1512; --parchment-100:#161210; --parchment-200:#221c18; --parchment-300:#2d2520; --parchment-400:#3e332c; --parchment-500:#54463c;
--ink-300:#9a8d82; --ink-400:#b8a99b; --ink-500:#c9bcb0; --ink-700:#e2d8ce; --ink-800:#efe8e0; --ink-900:#f6f1ea;
--sage-50:#2c1c14; --sage-100:#36221a; --sage-300:#d68a5f; --sage-500:#d68a5f; --sage-600:#e0a07c; --sage-700:#ebba9c; --fg-on-sage:#1a1512;
--clay-50:#20241a; --clay-500:#9ba883; --clay-700:#bcc8a3; --fg-on-clay:#1a1512;
--warning-500:#e0c06a; --warning-700:#ecd28c; --warning-50:#2a2618;
--danger-500:#e5836a; --danger-700:#f0a690; --danger-50:#2e1c18;
--success-500:#9ba883; --success-700:#bcc8a3;
--line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
--font-display:"Avenir Next",Avenir,system-ui,sans-serif; --shadow-soft:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -12px rgba(0,0,0,.6); --ring:#d68a5f;
}
[data-profile="clay-night"] {
--parchment-50:#201811; --parchment-100:#1c150f; --parchment-200:#292018; --parchment-300:#352a20; --parchment-400:#473a2c; --parchment-500:#5f4e3c;
--ink-300:#9a8d7a; --ink-400:#b8a98f; --ink-500:#c9bca4; --ink-700:#e2d8c6; --ink-800:#efe8db; --ink-900:#f6f1e7;
--sage-50:#2c2214; --sage-100:#36291a; --sage-300:#c69a6f; --sage-500:#c69a6f; --sage-600:#d3ac85; --sage-700:#e0bf9c; --fg-on-sage:#201811;
--clay-50:#26261a; --clay-500:#9eab6f; --clay-700:#bcc78c; --fg-on-clay:#201811;
--warning-500:#e0c06a; --warning-700:#ecd28c; --warning-50:#2a2618;
--danger-500:#d58a5f; --danger-700:#e5a683; --danger-50:#2e1e14;
--success-500:#9eab6f; --success-700:#bcc78c;
--line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);
--font-display:Georgia,"Times New Roman",serif; --shadow-soft:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -12px rgba(0,0,0,.6); --ring:#c69a6f;
}