/*
* Roux — Brand design tokens & base styles
* ------------------------------------------------------------
* Single source of truth for the Roux visual system.
* Human-readable guidelines: docs/brand-guidelines.md
*
* Usage:
*
* Then use the CSS variables below — do NOT redeclare :root tokens per page.
* Fonts (load once in ):
* Cormorant Garamond (display/serif) + Inter (UI/sans)
*/
:root {
/* ── Core palette ── */
--ink: #1E1E1E;
--cream: #F6F2E8;
--copper: #B8734A;
--copper-hover: #C9845C;
--sage: #7C8B6B;
--sage-hover: #8a997a;
--stone: #A6A69A;
/* ── Dark UI surfaces ── */
--bg: #1E1E1E;
--bg-sidebar: #222222;
--bg-raised: #272727;
--bg-input: #2E2E2E;
--border: #3A3A3A;
/* ── Semantic / status (status only — never decorative) ── */
--green: #7AAD6A;
--amber: #C4A25A;
--red: #D97B6B;
--blue: #6A9ABF;
/* ── Tinted status backgrounds (~12% wash) ── */
--green-wash: rgba(122,173,106,.12);
--amber-wash: rgba(196,162,90,.12);
--red-wash: rgba(217,123,107,.12);
--copper-wash: rgba(184,115,74,.12);
/* ── Typography ── */
--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-ui: 'Inter', system-ui, -apple-system, sans-serif;
/* ── Radius ── */
--radius-sm: 5px;
--radius: 7px;
--radius-lg: 10px;
--radius-xl: 12px;
/* ── App chrome ── */
--page-header-height: 8.25rem;
--page-header-primary-action-width: 11rem;
--empty-state-action-width: 9.5rem;
/* ── Elevation (soft, low-opacity — surfaces do most of the lifting) ── */
--shadow: 0 1px 3px rgba(0,0,0,.25);
--shadow-lg: 0 8px 28px rgba(0,0,0,.35);
/* ── Actionable controls ──
* Filled buttons and the avatar use a deep "action green" with cream text.
* These are theme-STABLE (the same in light and dark) and NOT derived from
* --copper/--cream, because text on a filled control must always stay light —
* --cream flips to dark ink in light mode, which would put dark text on the fill.
* Copper stays the accent for links, active nav and the mark; green is for doing. */
--btn-bg: #43512F;
--btn-bg-hover: #526040;
--btn-fg: #F6F2E8;
}
/* ────────────────────────────────────────────────────────────
* Theming — dark is the default (the :root tokens above).
* Light mode is opt-in via (see web/js/theme.js?v=4e9fdc52ac5ac52679727d85525deb1e0ced3e10).
*
* The token *names* never change meaning: --bg is always "page background",
* --cream is always "primary text", --stone is always "muted text" — only
* their values flip. Build UI against these variables and both themes work
* for free. The selector below is (0,2,0) specificity, so it also overrides
* any per-page :root {} token block that redeclares the dark values.
* ──────────────────────────────────────────────────────────── */
:root { color-scheme: dark; }
:root[data-theme="light"] {
color-scheme: light;
/* ── Core palette (values retuned for a light ground) ── */
--ink: #1E1E1E;
--cream: #23201A; /* primary text — dark ink on light ground */
--copper: #A25E38; /* darkened for AA contrast on cream */
--copper-hover: #8C4F2E;
--sage: #5E6D4E;
--sage-hover: #52603F;
--stone: #6E6656; /* muted text */
/* ── Light UI surfaces ── */
--bg: #FBF8F1; /* warm off-white */
--bg-sidebar: #F1EBDD; /* slightly deeper cream */
--bg-raised: #FFFFFF; /* cards lift by getting brighter, not darker */
--bg-input: #FFFFFF;
--border: #E5DDCC;
/* ── Semantic / status (darkened for contrast on light) ── */
--green: #4E8140;
--amber: #927126;
--red: #C1503C;
--blue: #3E7BA6;
/* ── Tinted status backgrounds (~12% wash) ── */
--green-wash: rgba(78,129,64,.12);
--amber-wash: rgba(146,113,38,.12);
--red-wash: rgba(193,80,60,.12);
--copper-wash: rgba(162,94,56,.12);
/* ── Elevation (warm-grey shadow reads better than black on light) ── */
--shadow: 0 1px 3px rgba(60,50,35,.12);
--shadow-lg: 0 8px 28px rgba(60,50,35,.18);
}
/* Smooth the flip between themes without animating layout. */
body { transition: background-color .18s ease, color .18s ease; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
/* Author styles must never accidentally override the native hidden contract. */
[hidden] { display: none !important; }
/* Keep signed-in content out of the first paint until its page module and data
have settled. The sidebar remains visible, so hard loads retain a stable app
frame; soft navigation keeps showing the previous page via View Transitions. */
html:not([data-app-ready]) aside#sidebar ~ main { visibility: hidden; }
/* ────────────────────────────────────────────────────────────
* Cross-document view transitions — same-origin navigations crossfade
* instead of hard-cutting (Chrome/Edge, Safari 18+; unsupported browsers
* simply load pages normally). The sidebar carries its own name so the
* browser pairs it across pages and it reads as a persistent shell rather
* than part of the fade.
* ──────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }
aside#sidebar { view-transition-name: app-sidebar; }
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
/* ────────────────────────────────────────────────────────────
* Form selects — native select chrome ignores vertical padding, so a
*