/* Los Poderes — THEME TOKENS
* ---------------------------------------------------------------------------
* This is the toggle. Load it AFTER organic.css and it overrides that file's
* :root block. Every color, font and radius on the page reads from here, so
* changing a value re-skins the whole site — no markup, no JS.
*
*
* <-- wins
*
* To switch theme: put data-theme="midnight" (or "bone") on .
* With no attribute you get Organic's default warm cream.
* ------------------------------------------------------------------------- */
/* ===========================================================================
1 — ORGANIC (default). Cream ground, terracotta accent, sage second.
=========================================================================== */
:root {
--color-bg: #f5ead8;
--color-surface: #ebddc5;
--color-text: #201e1d;
--color-accent: #c67139;
--color-accent-2: #7a8a5e;
--color-on-accent: #201e1d; /* on #c67139 → 4.60:1 */
--color-divider: color-mix(in srgb, var(--color-text) 16%, transparent);
--font-heading: "Caprasimo", system-ui, sans-serif;
--font-body: "Figtree", system-ui, sans-serif;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px;
}
/* ===========================================================================
2 — MIDNIGHT. Dark roast. Same layout, evening mood.
=========================================================================== */
[data-theme="midnight"] {
--color-bg: #1a1715;
--color-surface: #24201d;
--color-text: #f3ece1;
--color-accent: #e08c4e;
--color-accent-2: #9aab78;
--color-on-accent: #3a2417; /* on #e08c4e → 5.56:1 */
--color-divider: color-mix(in srgb, var(--color-text) 18%, transparent);
--color-neutral-100: #2e2924;
--color-neutral-200: #383129;
--color-neutral-300: #473f35;
--color-neutral-400: #5d5346;
--color-neutral-500: #7a6f5f;
--color-neutral-600: #9c9080;
--color-neutral-700: #bdb2a2;
--color-neutral-800: #dcd3c4;
--color-neutral-900: #f3ece1;
--color-accent-100: #3a2417;
--color-accent-200: #4d301c;
--color-accent-300: #6b4224;
--color-accent-400: #91582c;
--color-accent-500: #b87139;
--color-accent-600: #d38646;
--color-accent-700: #e8a163;
--color-accent-800: #f3bf90;
--color-accent-900: #fadcc2;
--color-accent-2-100: #23281a;
--color-accent-2-200: #2f3722;
--color-accent-2-300: #414c2f;
--color-accent-2-400: #57653f;
--color-accent-2-500: #6f8052;
--color-accent-2-600: #8b9c6a;
--color-accent-2-700: #a8b98a;
--color-accent-2-800: #c6d4ae;
--color-accent-2-900: #e3ecd2;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
--shadow-md: 0 3px 10px rgba(0, 0, 0, .55);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
}
/* ===========================================================================
3 — BONE. Cooler, quieter, more editorial. Ink accent over paper.
=========================================================================== */
[data-theme="bone"] {
--color-bg: #f4f2ed;
--color-surface: #e8e5dd;
--color-text: #1c1b19;
--color-accent: #9a5b3f;
--color-accent-2: #4a5f5a;
--color-on-accent: #f8ede8; /* on #9a5b3f → 4.63:1 */
--color-divider: color-mix(in srgb, var(--color-text) 14%, transparent);
--color-neutral-100: #faf9f6;
--color-neutral-200: #efedE7;
--color-neutral-300: #dedbd2;
--color-neutral-400: #c2beb2;
--color-neutral-500: #a29d8f;
--color-neutral-600: #837e70;
--color-neutral-700: #656054;
--color-neutral-800: #46423a;
--color-neutral-900: #2b2925;
--color-accent-100: #f8ede8;
--color-accent-200: #efd9cf;
--color-accent-300: #e0bcac;
--color-accent-400: #c99781;
--color-accent-500: #b0745a;
--color-accent-600: #955a41;
--color-accent-700: #78432e;
--color-accent-800: #582f1f;
--color-accent-900: #3a1e14;
--color-accent-2-100: #eef3f1;
--color-accent-2-200: #d9e3e0;
--color-accent-2-300: #bccbc6;
--color-accent-2-400: #9aada7;
--color-accent-2-500: #7a8f89;
--color-accent-2-600: #5e736d;
--color-accent-2-700: #465954;
--color-accent-2-800: #31403c;
--color-accent-2-900: #1f2926;
}
/* ===========================================================================
4 — APOTHECARY. Ink ground, gold rules, Cormorant display. The picked
direction.
=========================================================================== */
[data-theme="apothecary"] {
--color-bg: #14181a;
--color-surface: #0e1113;
--color-text: #e8e4dc;
--color-accent: #c9a961;
--color-accent-2: #8a8f8c;
--color-on-accent: #14181a; /* on #c9a961 → 7.94:1 */
--color-divider: rgba(201, 169, 97, .22);
--color-neutral-100: #14181a;
--color-neutral-200: #1b1f21;
--color-neutral-300: rgba(201, 169, 97, .16);
--color-neutral-400: rgba(201, 169, 97, .26);
--color-neutral-500: #5f6462;
--color-neutral-600: #747876;
--color-neutral-700: #8a8f8c;
--color-neutral-800: #b8b3a8;
--color-neutral-900: #e8e4dc;
--color-accent-100: #14181a;
--color-accent-200: rgba(201, 169, 97, .09);
--color-accent-300: rgba(201, 169, 97, .14);
--color-accent-400: rgba(201, 169, 97, .26);
--color-accent-500: #a98a4a;
--color-accent-600: #b89a55;
--color-accent-700: #c9a961;
--color-accent-800: #e0c188;
--color-accent-900: #f0dcb4;
--color-accent-2-100: #e8e4dc;
--color-accent-2-200: #b8b3a8;
--color-accent-2-300: #8a8f8c;
--color-accent-2-400: #6d7270;
--color-accent-2-500: #545957;
--color-accent-2-600: #3d4240;
--color-accent-2-700: #2a2e2d;
--color-accent-2-800: #1b1f21;
--color-accent-2-900: #0e1113;
/* Apothecary is a squared system — no soft radii. */
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--font-heading: "Cormorant Garamond", Georgia, serif;
--font-body: "Jost", system-ui, sans-serif;
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: 0 20px 60px rgba(0, 0, 0, .5);
}