/* ============================================================ Vianney — theme token sets (14 directions: classic + A–M) ------------------------------------------------------------ Usage: . Every visual property in app CSS must reference these vars; no hard-coded colors/fonts/ radii outside this file. See HANDOFF.md for the contract. TOKEN CONTRACT --bg-app page background --bg-surface cards / panels --bg-surface-2 nested wells, table headers, subtle fills --bg-inverse dark panel (e.g. Masses card, stat band) --text-on-inverse text on --bg-inverse --text primary text --text-muted secondary text --text-faint tertiary/meta text --border hairlines --border-strong emphasic rules (section underlines) --accent brand/action color --accent-text text/icon ON accent fills --accent-soft tinted bg for accent chips/active nav --accent-2 secondary accent (gold, sage…) --danger urgent/destructive --danger-soft tinted bg --positive success/pastoral-care --positive-soft tinted bg --warn amber notices --font-display headings ≥18px --display-weight, --display-style --font-body UI text --font-mono labels/figures ('' = none; falls back to body) --radius-sm/md/lg/pill, --shadow-card, --card-border --nav-bg/--nav-text/--nav-text-active/--nav-active-bg/--nav-border --nav-pill 1 = pill-style top nav items (presbytery) --btn-primary-bg/--btn-primary-text --quote-bg/--quote-border/--quote-font/--quote-style (drafted msgs) ============================================================ */ /* ---------- CLASSIC — System Default (the Vianney brand) ---------- Rebuilt 2026-06-19 on the official brand sheet (marketing/brand/README.md): ink + parchment ground, oxblood as the action color, gold as the secondary accent, Cinzel display over Archivo body. The seal's gold-on-ink colorway lives in --bg-inverse panels. This is the DEFAULT theme; all others opt-in. */ :root[data-theme="classic"], :root:not([data-theme]) { --bg-app:#f4f2ea; --bg-surface:#ffffff; --bg-surface-2:#f6f3ea; --bg-inverse:#141c30; --text-on-inverse:#f4eee0; --text:#141c30; --text-muted:#515a6e; --text-faint:#9aa0ad; --border:#e6e1d4; --border-strong:#141c30; --accent:#7e2a20; --accent-text:#ffffff; --accent-soft:#f4e7e2; --accent-2:#c9a24b; --danger:#b3362c; --danger-soft:#fbeae7; --positive:#1d6b47; --positive-soft:#e6f1ea; --warn:#9a7b33; --font-display:'Cinzel',Georgia,'Times New Roman',serif; --display-weight:600; --display-style:normal; --font-body:'Archivo',-apple-system,'Segoe UI',Roboto,sans-serif; --font-mono:''; --radius-sm:6px; --radius-md:9px; --radius-lg:13px; --radius-pill:99px; --shadow-card:0 1px 2px rgba(20,28,48,.05),0 2px 10px rgba(20,28,48,.07); --card-border:1px solid #e6e1d4; --nav-bg:#ffffff; --nav-text:#6a6f7e; --nav-text-active:#7e2a20; --nav-active-bg:#f4e7e2; --nav-border:#e6e1d4; --nav-pill:0; --btn-primary-bg:#7e2a20; --btn-primary-text:#ffffff; --quote-bg:#f6f3ea; --quote-border:1px solid #e6e1d4; --quote-font:'Archivo',-apple-system,'Segoe UI',Roboto,sans-serif; --quote-style:normal; --warn-soft:#f5ebd4; } /* ---------- A · ORDO — warm paper editorial ---------- */ :root[data-theme="ordo"] { --bg-app:#f6f1e7; --bg-surface:#fffdf7; --bg-surface-2:#fdfaf2; --bg-inverse:#2b2419; --text-on-inverse:#f6f1e7; --text:#2b2419; --text-muted:#5f5747; --text-faint:#8b7f6a; --border:#ddd2ba; --border-strong:#2b2419; --accent:#8c2f24; --accent-text:#f9efe9; --accent-soft:#efe5d3; --accent-2:#44604a; --danger:#8c2f24; --danger-soft:#f3e0da; --positive:#44604a; --positive-soft:#e4ead9; --warn:#8a6d23; --font-display:'Newsreader',serif; --display-weight:500; --display-style:normal; --font-body:'Source Sans 3',sans-serif; --font-mono:''; --radius-sm:3px; --radius-md:3px; --radius-lg:6px; --radius-pill:99px; --shadow-card:none; --card-border:1px solid #ddd2ba; --nav-bg:transparent; --nav-text:#5f5747; --nav-text-active:#8c2f24; --nav-active-bg:#efe5d3; --nav-border:#e3d9c4; --nav-pill:0; --btn-primary-bg:#2b2419; --btn-primary-text:#f6f1e7; --quote-bg:#fdfaf2; --quote-border:1px solid #ddd2ba; --quote-font:'Newsreader',serif; --quote-style:normal; --warn-soft:#f8f0d8; } /* ---------- B · CHANCERY — crisp modern ---------- */ :root[data-theme="chancery"] { --bg-app:#f3f4f6; --bg-surface:#ffffff; --bg-surface-2:#f8f9fa; --bg-inverse:#15171c; --text-on-inverse:#ffffff; --text:#15171c; --text-muted:#4a5160; --text-faint:#9aa1ae; --border:#e4e7ec; --border-strong:#15171c; --accent:#8a2d3b; --accent-text:#ffffff; --accent-soft:#f7eaed; --accent-2:#2f5d7c; --danger:#7e1f2e; --danger-soft:#fbeaed; --positive:#1d6b47; --positive-soft:#e8f1ec; --warn:#b07c1b; --font-display:'Hanken Grotesk',sans-serif; --display-weight:800; --display-style:normal; --font-body:'Hanken Grotesk',sans-serif; --font-mono:''; --radius-sm:5px; --radius-md:8px; --radius-lg:12px; --radius-pill:99px; --shadow-card:0 1px 2px rgba(18,20,26,.04); --card-border:1px solid #e4e7ec; --nav-bg:#ffffff; --nav-text:#4a5160; --nav-text-active:#8a2d3b; --nav-active-bg:#f7eaed; --nav-border:#e4e7ec; --nav-pill:0; --btn-primary-bg:#8a2d3b; --btn-primary-text:#ffffff; --quote-bg:#f8f9fa; --quote-border:1px solid #e4e7ec; --quote-font:'Hanken Grotesk',sans-serif; --quote-style:normal; --warn-soft:#fdf4e0; } /* ---------- C · VESPERS — dusk & gold ---------- */ :root[data-theme="vespers"] { --bg-app:#f2efe9; --bg-surface:#fbfaf6; --bg-surface-2:#f6f3ea; --bg-inverse:#1a1d2e; --text-on-inverse:#f0ede4; --text:#23222b; --text-muted:#5c5a52; --text-faint:#a09d92; --border:#e2ddd0; --border-strong:#23222b; --accent:#8a6d23; --accent-text:#ffffff; --accent-soft:#f3ead3; --accent-2:#cfa84e; --danger:#93302c; --danger-soft:#f4e2de; --positive:#4a6741; --positive-soft:#e8ecdf; --warn:#8a6d23; --font-display:'Spectral',serif; --display-weight:500; --display-style:normal; --font-body:'Public Sans',sans-serif; --font-mono:''; --radius-sm:7px; --radius-md:8px; --radius-lg:13px; --radius-pill:99px; --shadow-card:0 1px 4px rgba(35,34,43,.05); --card-border:1px solid #e2ddd0; --nav-bg:#1a1d2e; --nav-text:#a7aabc; --nav-text-active:#f0ede4; --nav-active-bg:rgba(207,168,78,.13); --nav-border:rgba(255,255,255,.1); --nav-pill:0; --btn-primary-bg:#23222b; --btn-primary-text:#f2efe9; --quote-bg:#f6f3ea; --quote-border-left:2px solid #cfa84e; --quote-border:none; --quote-font:'Spectral',serif; --quote-style:italic; --warn-soft:#f3ead3; } /* ---------- D · CLOISTER — Swiss minimal ---------- */ :root[data-theme="cloister"] { --bg-app:#ffffff; --bg-surface:#ffffff; --bg-surface-2:#fafafa; --bg-inverse:#111111; --text-on-inverse:#ffffff; --text:#111111; --text-muted:#777777; --text-faint:#aaaaaa; --border:#eeeeee; --border-strong:#111111; --accent:#d72f1f; --accent-text:#ffffff; --accent-soft:#fdeae8; --accent-2:#111111; --danger:#d72f1f; --danger-soft:#fdeae8; --positive:#1d6b47; --positive-soft:#e8f1ec; --warn:#b07c1b; --font-display:'Libre Franklin',sans-serif; --display-weight:300; --display-style:normal; --font-body:'Libre Franklin',sans-serif; --font-mono:'IBM Plex Mono',monospace; --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-pill:0; --shadow-card:none; --card-border:1px solid #eeeeee; --nav-bg:#ffffff; --nav-text:#888888; --nav-text-active:#111111; --nav-active-bg:transparent; --nav-border:#111111; --nav-pill:0; --btn-primary-bg:#111111; --btn-primary-text:#ffffff; --quote-bg:transparent; --quote-border-left:2px solid #111111; --quote-border:none; --quote-font:'Libre Franklin',sans-serif; --quote-style:normal; --warn-soft:#fdf4e0; } /* ---------- E · ILLUMINATED — manuscript green & gold ---------- */ :root[data-theme="illuminated"] { --bg-app:#f8f4ea; --bg-surface:#fffcf3; --bg-surface-2:#faf6e8; --bg-inverse:#1f3d2b; --text-on-inverse:#f3ecd9; --text:#21351f; --text-muted:#6e6850; --text-faint:#a89e7e; --border:#ddcfa8; --border-strong:#1f3d2b; --accent:#1f3d2b; --accent-text:#f3ecd9; --accent-soft:#e7ecdc; --accent-2:#cdaa55; --danger:#7c241b; --danger-soft:#f2dcd5; --positive:#1f3d2b; --positive-soft:#e7ecdc; --warn:#8a6d23; --font-display:'Cormorant Garamond',serif; --display-weight:500; --display-style:normal; --font-body:'Source Sans 3',sans-serif; --font-mono:''; --radius-sm:3px; --radius-md:4px; --radius-lg:6px; --radius-pill:99px; --shadow-card:none; --card-border:1px solid #ddcfa8; --nav-bg:#1f3d2b; --nav-text:#bccfc1; --nav-text-active:#1f3d2b; --nav-active-bg:#cdaa55; --nav-border:rgba(255,255,255,.12); --nav-pill:0; --btn-primary-bg:#1f3d2b; --btn-primary-text:#f3ecd9; --quote-bg:#faf6e8; --quote-border:1px solid #e4d9b8; --quote-font:'Cormorant Garamond',serif; --quote-style:normal; --warn-soft:#f8f0d8; } /* ---------- F · PRESBYTERY — soft & friendly ---------- */ :root[data-theme="presbytery"] { --bg-app:#f4f3ef; --bg-surface:#ffffff; --bg-surface-2:#f7f6f1; --bg-inverse:#3c4439; --text-on-inverse:#ffffff; --text:#272b25; --text-muted:#5c6157; --text-faint:#a9aca4; --border:#e8e7e1; --border-strong:#3c4439; --accent:#5f7a5e; --accent-text:#ffffff; --accent-soft:#eef2ec; --accent-2:#48604a; --danger:#b3433c; --danger-soft:#fdf1ef; --positive:#5f7a5e; --positive-soft:#eef2ec; --warn:#b07c1b; --font-display:'Albert Sans',sans-serif; --display-weight:800; --display-style:normal; --font-body:'Albert Sans',sans-serif; --font-mono:''; --radius-sm:11px; --radius-md:14px; --radius-lg:20px; --radius-pill:99px; --shadow-card:0 1px 4px rgba(40,44,38,.06); --card-border:none; --nav-bg:#ffffff; --nav-text:#7c8078; --nav-text-active:#3c4439; --nav-active-bg:#ffffff; --nav-border:#e8e7e1; --nav-pill:1; --btn-primary-bg:#5f7a5e; --btn-primary-text:#ffffff; --quote-bg:#f7f6f1; --quote-border:none; --quote-font:'Albert Sans',sans-serif; --quote-style:normal; --warn-soft:#fdf4e0; } /* ---------- G · MATINS — dawn timeline ---------- */ :root[data-theme="matins"] { --bg-app:#eef2f6; --bg-surface:#ffffff; --bg-surface-2:#f4f7fa; --bg-inverse:#1f3a5f; --text-on-inverse:#ffffff; --text:#16243a; --text-muted:#5d6b7e; --text-faint:#9aa7b6; --border:#dde4ec; --border-strong:#1f3a5f; --accent:#1f3a5f; --accent-text:#ffffff; --accent-soft:#e3eaf2; --accent-2:#ffce6b; --danger:#c0392b; --danger-soft:#fbe9e5; --positive:#2e7d4f; --positive-soft:#e7f2ec; --warn:#c9a227; --font-display:'IBM Plex Sans',sans-serif; --display-weight:700; --display-style:normal; --font-body:'IBM Plex Sans',sans-serif; --font-mono:''; --radius-sm:8px; --radius-md:9px; --radius-lg:12px; --radius-pill:99px; --shadow-card:0 1px 3px rgba(22,32,48,.05); --card-border:1px solid #dde4ec; --nav-bg:#1f3a5f; --nav-text:#b6c6da; --nav-text-active:#1f3a5f; --nav-active-bg:#ffffff; --nav-border:rgba(255,255,255,.14); --nav-pill:0; --btn-primary-bg:#1f3a5f; --btn-primary-text:#ffffff; --quote-bg:#f4f7fa; --quote-border:none; --quote-font:'IBM Plex Sans',sans-serif; --quote-style:italic; --warn-soft:#fef7e0; } /* ---------- H · COMPLINE — true dark mode ---------- */ :root[data-theme="compline"] { color-scheme:dark; --bg-app:#15151a; --bg-surface:#1c1c22; --bg-surface-2:#101014; --bg-inverse:#101014; --text-on-inverse:#ece8df; --text:#ece8df; --text-muted:#8e8e9a; --text-faint:#6e6e7a; --border:#2a2a32; --border-strong:#d9a441; --accent:#d9a441; --accent-text:#15151a; --accent-soft:rgba(217,164,65,.1); --accent-2:#d9a441; --danger:#a8333e; --danger-soft:rgba(224,112,122,.08); --positive:#7fb89a; --positive-soft:rgba(127,184,154,.1); --warn:#d9a441; --font-display:'Spectral',serif; --display-weight:500; --display-style:normal; --font-body:'Outfit',sans-serif; --font-mono:''; --radius-sm:8px; --radius-md:9px; --radius-lg:12px; --radius-pill:99px; --shadow-card:none; --card-border:1px solid #2a2a32; --nav-bg:#101014; --nav-text:#8e8e9a; --nav-text-active:#d9a441; --nav-active-bg:rgba(217,164,65,.1); --nav-border:#232329; --nav-pill:0; --btn-primary-bg:#d9a441; --btn-primary-text:#15151a; --quote-bg:rgba(217,164,65,.06); --quote-border-left:2px solid #d9a441; --quote-border:none; --quote-font:'Spectral',serif; --quote-style:italic; --warn-soft:rgba(217,164,65,.12); } /* ---------- I · ROSARY — terracotta & clay ---------- */ :root[data-theme="rosary"] { --bg-app:#f7efe6; --bg-surface:#fffaf2; --bg-surface-2:#f7efe6; --bg-inverse:#5a2e18; --text-on-inverse:#f7efe6; --text:#3d2415; --text-muted:#7a5a40; --text-faint:#b78757; --border:#e0cdbb; --border-strong:#5a2e18; --accent:#a14d2c; --accent-text:#ffffff; --accent-soft:#f3e3cf; --accent-2:#c07a3f; --danger:#a8332e; --danger-soft:#f6e0da; --positive:#7a7a45; --positive-soft:#eef0dd; --warn:#8a5a23; --font-display:'Lora',serif; --display-weight:600; --display-style:normal; --font-body:'Albert Sans',sans-serif; --font-mono:''; --radius-sm:10px; --radius-md:10px; --radius-lg:14px; --radius-pill:99px; --shadow-card:none; --card-border:1px solid #e0cdbb; --nav-bg:#f1e3d3; --nav-text:#7a5a40; --nav-text-active:#ffffff; --nav-active-bg:#a14d2c; --nav-border:#e0cdbb; --nav-pill:0; --btn-primary-bg:#a14d2c; --btn-primary-text:#ffffff; --quote-bg:#f7efe6; --quote-border:none; --quote-font:'Lora',serif; --quote-style:italic; --warn-soft:#f8edd4; } /* ---------- J · REGISTRY — the parish ledger ---------- */ :root[data-theme="registry"] { --bg-app:#fbf8ee; --bg-surface:#fbf8ee; --bg-surface-2:#f6f1de; --bg-inverse:#4a1d1d; --text-on-inverse:#e8d9b0; --text:#2e1a12; --text-muted:#6e5c44; --text-faint:#b09a72; --border:#e4dcc4; --border-strong:#4a1d1d; --accent:#7e2a20; --accent-text:#fbeee6; --accent-soft:#f1e4d2; --accent-2:#e8d9b0; --danger:#7e2a20; --danger-soft:#f1ddd6; --positive:#56601f; --positive-soft:#ecedd6; --warn:#8a5a23; --font-display:'Lora',serif; --display-weight:600; --display-style:normal; --font-body:'Libre Franklin',sans-serif; --font-mono:'IBM Plex Mono',monospace; --radius-sm:3px; --radius-md:3px; --radius-lg:5px; --radius-pill:99px; --shadow-card:none; --card-border:1px solid #e4dcc4; --nav-bg:#4a1d1d; --nav-text:#cdb29b; --nav-text-active:#4a1d1d; --nav-active-bg:#e8d9b0; --nav-border:transparent; --nav-pill:0; --btn-primary-bg:#4a1d1d; --btn-primary-text:#e8d9b0; --quote-bg:transparent; --quote-border-left:2px solid #b09a72; --quote-border:none; --quote-font:'Lora',serif; --quote-style:italic; --warn-soft:#f8edd4; } /* ---------- K · BULLETIN — the morning edition ---------- */ :root[data-theme="bulletin"] { --bg-app:#f4f1e8; --bg-surface:#f4f1e8; --bg-surface-2:#ebe6d6; --bg-inverse:#1c1b18; --text-on-inverse:#f1ede2; --text:#1c1b18; --text-muted:#4a4536; --text-faint:#8d8672; --border:#cfc9b8; --border-strong:#1c1b18; --accent:#9e2b20; --accent-text:#f1ede2; --accent-soft:#ece0d2; --accent-2:#1c1b18; --danger:#9e2b20; --danger-soft:#eedcd5; --positive:#4a5a32; --positive-soft:#e5e8d6; --warn:#8a6d23; --font-display:'Newsreader',serif; --display-weight:600; --display-style:normal; --font-body:'Source Sans 3',sans-serif; --font-mono:''; --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-pill:0; --shadow-card:none; --card-border:1px solid #cfc9b8; --nav-bg:#f4f1e8; --nav-text:#8d8672; --nav-text-active:#1c1b18; --nav-active-bg:transparent; --nav-border:#1c1b18; --nav-pill:0; --btn-primary-bg:#1c1b18; --btn-primary-text:#f1ede2; --quote-bg:transparent; --quote-border-left:2px solid #1c1b18; --quote-border:none; --quote-font:'Newsreader',serif; --quote-style:italic; --warn-soft:#f8edd4; } /* ---------- L · STILLNESS — airy & weightless ---------- */ :root[data-theme="stillness"] { --bg-app:#fdfdfe; --bg-surface:#fdfdfe; --bg-surface-2:#f7f7f9; --bg-inverse:#2a2733; --text-on-inverse:#ffffff; --text:#2a2733; --text-muted:#9a98a4; --text-faint:#b4b2bc; --border:#ececf0; --border-strong:#2a2733; --accent:#6d5a8c; --accent-text:#ffffff; --accent-soft:#efecf4; --accent-2:#6d5a8c; --danger:#a8333e; --danger-soft:#fbf7f7; --positive:#4f7263; --positive-soft:#edf2ef; --warn:#b07c1b; --font-display:'Manrope',sans-serif; --display-weight:300; --display-style:normal; --font-body:'Manrope',sans-serif; --font-mono:''; --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-pill:99px; --shadow-card:none; --card-border:none; /* flat: separation by hairline + air */ --nav-bg:#fdfdfe; --nav-text:#9a98a4; --nav-text-active:#2a2733; --nav-active-bg:transparent; --nav-border:#ececf0; --nav-pill:0; --btn-primary-bg:#2a2733; --btn-primary-text:#ffffff; --quote-bg:transparent; --quote-border-left:1.5px solid #d9d4e4; --quote-border:none; --quote-font:'Manrope',sans-serif; --quote-style:normal; --warn-soft:#fdf4e0; } /* ---------- M · ORATORY — the focused inbox ---------- */ :root[data-theme="oratory"] { --bg-app:#f5f7f7; --bg-surface:#ffffff; --bg-surface-2:#f0f3f3; --bg-inverse:#15201f; --text-on-inverse:#ffffff; --text:#13201e; --text-muted:#5d6b69; --text-faint:#a8b4b2; --border:#e4e9e9; --border-strong:#13201e; --accent:#0f766e; --accent-text:#ffffff; --accent-soft:#e6f2f0; --accent-2:#b07c1b; --danger:#b3433c; --danger-soft:#fdf2f2; --positive:#0f766e; --positive-soft:#e6f2f0; --warn:#b07c1b; --font-display:'IBM Plex Sans',sans-serif; --display-weight:700; --display-style:normal; --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace; --radius-sm:7px; --radius-md:8px; --radius-lg:9px; --radius-pill:99px; --shadow-card:0 1px 2px rgba(15,30,30,.04); --card-border:1px solid #e4e9e9; --nav-bg:#15201f; --nav-text:#7d8c8a; --nav-text-active:#ffffff; --nav-active-bg:rgba(255,255,255,.12); --nav-border:transparent; --nav-pill:0; --btn-primary-bg:#0f766e; --btn-primary-text:#ffffff; --quote-bg:#f0f3f3; --quote-border:none; --quote-font:'IBM Plex Sans',sans-serif; --quote-style:normal; --warn-soft:#fdf4e0; } /* ============================================================ Structure variant: topnav When data-nav="topnav", the sidebar is hidden and a top header bar takes its place. The nav tokens above style it. ============================================================ */ :root[data-nav="topnav"] #side { display: none !important; } :root[data-nav="topnav"] main { padding-left: 22px !important; } :root[data-nav="topnav"] #aipanel { left: 10px !important; } #topnav { display: none; position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); z-index: 10; align-items: center; gap: 0; padding: 0 16px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } :root[data-nav="topnav"] #topnav { display: flex; } :root[data-nav="topnav"] body.emg-on #topnav { top: 38px; } :root[data-nav="topnav"] main { padding-top: 66px !important; } :root[data-nav="topnav"] body.emg-on main { padding-top: 104px !important; } #topnav .tn-brand { font-size: 16px; font-weight: 700; color: var(--nav-text-active); margin-right: 16px; flex-shrink: 0; text-decoration: none; } #topnav a.tn-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-sm); /* presbytery/--nav-pill:1 overridden to pill below */ color: var(--nav-text); text-decoration: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; } /* pill nav items when --nav-pill:1 (presbytery) */ :root[style*="--nav-pill:1"] #topnav a.tn-link, :root[data-theme="presbytery"] #topnav a.tn-link { border-radius: var(--radius-pill); } #topnav a.tn-link.on { color: var(--nav-text-active); background: var(--nav-active-bg); } #topnav a.tn-link:hover:not(.on) { color: var(--nav-text-active); } #topnav .tn-emg { margin-left: auto; flex-shrink: 0; color: var(--danger); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 10px; } #topnav .tn-gap { flex: 1; } /* The link row: a single horizontal, horizontally-scrollable strip between the fixed brand (left) and the user/sign-out cluster (right). Without this the