/* iwant2eat — theme tokens
* 5 named themes, switched by the data-theme attribute on .
* Default (no attribute) = market.
*
* Drop-in: BEFORE app.css.
* Then in MainLayout.razor:
*/
:root,
[data-theme="market"] {
--bg: #fff8ef;
--surface: #ffffff;
--surface-2: #fff2e0;
--text: #1d2419;
--text-2: #5a6155;
--muted: #8a8f85;
--border: #ecdfc8;
--primary: #0a8a3f;
--primary-2: #0d6f34;
--primary-ink: #ffffff;
--accent: #ff6b1f;
--accent-2: #f59e0b;
--success: #0a8a3f;
--danger: #c43a2a;
--chip-bg: #fff2e0;
--chip-text: #7a3a0a;
--chip-border: #f5d8b4;
--shadow-sm: 0 1px 2px rgba(34,28,18,.06), 0 2px 6px rgba(34,28,18,.05);
--shadow-md: 0 6px 20px rgba(34,28,18,.10);
--font-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--display-weight: 700;
--display-tracking: -0.02em;
/* Tweak knobs — bake your chosen values from the prototype here. */
--radius: 10px;
--pad: 0.85rem;
--gap: 0.9rem;
--card-pad: 1rem;
--font-scale: 1;
}
[data-theme="editorial"] {
--bg: #f7f3ec;
--surface: #ffffff;
--surface-2: #efe9dc;
--text: #1a1a1a;
--text-2: #4a4a4a;
--muted: #8a8377;
--border: #e2dccd;
--primary: #1a1a1a;
--primary-2: #000000;
--primary-ink: #ffffff;
--accent: #b85728;
--accent-2: #7a5b2a;
--success: #3a7a3a;
--danger: #a13822;
--chip-bg: #efe9dc;
--chip-text: #3a3a3a;
--chip-border: #d8d0bd;
--shadow-sm: 0 1px 2px rgba(0,0,0,.06);
--shadow-md: 0 8px 24px rgba(0,0,0,.10);
--font-display: 'DM Serif Display', 'Times New Roman', serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--display-weight: 400;
--display-tracking: -0.01em;
}
[data-theme="modern"] {
--bg: #ffffff;
--surface: #ffffff;
--surface-2: #f6f6f5;
--text: #0f0f0e;
--text-2: #3d3d3a;
--muted: #8a8a85;
--border: #ececea;
--primary: #0f0f0e;
--primary-2: #000000;
--primary-ink: #ffffff;
--accent: #22a559;
--accent-2: #0f0f0e;
--success: #22a559;
--danger: #d9402a;
--chip-bg: #f4f4f2;
--chip-text: #1a1a18;
--chip-border: #e6e6e2;
--shadow-sm: 0 0 0 1px rgba(0,0,0,.04);
--shadow-md: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
--font-display: 'Helvetica Neue', Helvetica, 'Inter', sans-serif;
--font-body: 'Helvetica Neue', Helvetica, 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--display-weight: 600;
--display-tracking: -0.025em;
}
[data-theme="midnight"] {
--bg: #0e1110;
--surface: #181c1a;
--surface-2: #22272a;
--text: #f3eee2;
--text-2: #bfb9aa;
--muted: #85807a;
--border: #2c322f;
--primary: #fb923c;
--primary-2: #f97316;
--primary-ink: #1d1108;
--accent: #84cc16;
--accent-2: #facc15;
--success: #84cc16;
--danger: #f87171;
--chip-bg: #22272a;
--chip-text: #e8dfc8;
--chip-border: #373d3a;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-md: 0 12px 32px rgba(0,0,0,.5);
--font-display: 'DM Sans', system-ui, sans-serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--display-weight: 700;
--display-tracking: -0.02em;
}
/* Per-theme tweaks that affect more than just colors — same overrides
* the prototype uses. Keep this section here so themes.css is the single
* source of theme truth. */
[data-theme="editorial"] .section-title,
[data-theme="editorial"] .hero-eyebrow {
border-top: 2px solid var(--text);
padding-top: 0.5rem;
}
/* Midnight theme — the binder-paper backdrops on /recipes/{id} and
* /r/{token} hard-code a cream `background-color` that doesn't react
* to the dark palette, so the light --text disappears against it.
* Force the paper darker (and the printed-form lined background to
* vanish) only for these themes so the body text stays legible. */
[data-theme="midnight"] .printable-recipe,
[data-theme="midnight"] .rs-paper {
background-color: var(--surface);
color: var(--text);
background-image: none;
}
/* Same problem on the static legal pages (/dmca, /terms, /privacy,
* /data-deletion). Each renders three callouts with hard-coded light
* backgrounds — agent-box, address, legal-warn. Map them to the dark
* surface palette so the inherited light --text reads. */
[data-theme="midnight"] .legal-page .agent-box,
[data-theme="midnight"] .legal-page address,
[data-theme="midnight"] .legal-page .legal-warn {
background-color: var(--surface-2);
border-color: var(--border);
color: var(--text);
}
/* Inline `` snippets on the legal + help pages have their own
* light pill background (#f2f2f0 / #f4f4f4). Switch to the chip
* palette which is already theme-aware. */
[data-theme="midnight"] .legal-page code,
[data-theme="midnight"] .help-page code {
background-color: var(--chip-bg);
color: var(--chip-text);
}
/* Help page's lead paragraph forces `color: #333`, which renders as
* dark grey on the dark background — barely visible. Reset to the
* theme's primary text color for midnight so it matches body weight. */
[data-theme="midnight"] .help-page .lead {
color: var(--text);
}
/* Form inputs default to white-on-dark-text via the browser stylesheet
* (or .form-control's hard-coded `background: #fff` in app.css). Looks
* completely out of place on the dark theme — re-skin every input /
* textarea / select and the recipe-editor contenteditable to use the
* surface palette. !important is needed because themes.css loads BEFORE
* app.css (so legacy selectors win on regular themes), but here we
* explicitly want the dark palette to override. */
[data-theme="midnight"] .form-control,
[data-theme="midnight"] input[type="text"],
[data-theme="midnight"] input[type="email"],
[data-theme="midnight"] input[type="password"],
[data-theme="midnight"] input[type="search"],
[data-theme="midnight"] input[type="number"],
[data-theme="midnight"] input[type="tel"],
[data-theme="midnight"] input[type="url"],
[data-theme="midnight"] textarea,
[data-theme="midnight"] select,
[data-theme="midnight"] .recipe-editor {
background-color: var(--surface) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
[data-theme="midnight"] .form-control::placeholder,
[data-theme="midnight"] input::placeholder,
[data-theme="midnight"] textarea::placeholder,
[data-theme="midnight"] .recipe-editor:empty::before {
color: var(--muted) !important;
}
/* AdminUsers grid — admin-row tint and totals-row tint hard-code light
* green; in midnight that flips to "white-on-white"-style invisibility.
* Re-skin both with the dark surface palette. */
[data-theme="midnight"] .users-table tr.row-admin td {
background-color: var(--surface-2);
color: var(--text);
}
[data-theme="midnight"] .users-table tfoot .summary-row td {
background-color: var(--surface-2);
color: var(--text);
border-top-color: var(--border);
}
/* Recipe-grid sticky-note cards hard-code `background-color: #fdfaf0`
* (cream paper) and rely on `color: inherit` for the title — which
* becomes the light --text on midnight, leaving title text invisible.
* Re-skin the card to the dark surface so the title and meta read. */
[data-theme="midnight"] .card {
background-color: var(--surface);
color: var(--text);
}