/* ===================================================================== Courageous x Grace Family Church - SHARED DESIGN TOKENS One token set for BOTH apps (experience site + registration/check-in) so the website and the registration pages feel like one product. Meta polish pass 2026-11-01. Isolated proposal file: nothing here is live until Henry integrates it. Load order per app: experience: app.css -> courageous-tokens.css -> courageous-grace.css registration: style.css -> courageous-tokens.css -> registration-grace.css The app sheets keep working without this file; this file is the single source of truth for the values both apps share. Palette source: the current public Grace Family Church site, pulled 2026-11-01 (brand/SOURCE.txt): Grace orange #E05829, navy #111820, blue #00568C. Type: Montserrat (the public site's geometric sans), with the registration app's existing fallback stack. Contrast (WCAG 2.x, computed 2026-11-01, full table in DESIGN.md): - White text sits ONLY on --orange-btn #C8461A (4.83:1) or darker. - Brand orange #E05829 never carries small white text (3.75:1); small text ON brand orange is navy (4.76:1). - Orange TEXT on light surfaces is --orange-ink #B83F14 (5.59:1). - Every text pair below is >= 4.5:1 in the mode where it is used. ===================================================================== */ :root { /* Brand constants (mode-independent) */ --grace-orange: #E05829; --grace-navy: #111820; --grace-blue: #00568C; /* Type + shape + rhythm (shared) */ --font: "Montserrat", "Avenir Next", "Century Gothic", "Segoe UI", system-ui, -apple-system, sans-serif; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --target: 44px; /* minimum hit target, both apps, no exceptions for controls */ /* Light mode (default) */ --bg: #FFF9F5; /* warm neutral, from registration --bg */ --bg-grad: linear-gradient(180deg, #FFF9F5 0%, #FFF3EC 100%); --fg: #111820; /* navy as ink: 17.4:1 on --bg */ --muted: #5A6570; /* 5.70:1 on --bg */ --panel: #FFFFFF; --panel-2: #FFF3EC; /* warm tint panel (registration --sand) */ --line: #EADFD6; --line-strong: #D8CCC2; --accent: #C8461A; /* button orange: white on it is 4.83:1 */ --accent-hover: #B03E15; /* white on it is 5.92:1 */ --accent-ink: #B83F14; /* orange text on light: 5.35:1 on --bg */ --accent-soft: #FFF3EC; --link: #00568C; /* 7.42:1 on --bg */ --hero-bg: #111820; /* navy hero in BOTH modes (see grace sheets) */ --hero-fg: #FFFFFF; --hero-soft: #C9D4DE; /* 10.4:1 on navy */ --focus: #00568C; /* 7.75:1 on white; ring is 3px + offset */ --ok: #0B7A28; --ok-bg: #E8F6EC; --warn: #8F5200; --warn-bg: #FFF2DC; --bad: #B00012; --bad-bg: #FDECEE; /* darkened from #D70015 so pill text is 5.9:1 */ --wait: #00568C; --wait-bg: #E6F0F7; --pill: #FFF3EC; --status-fg: #FFFFFF; --shadow: 0 1px 2px rgba(17,24,32,.06), 0 8px 24px rgba(17,24,32,.07); --shadow-lg: 0 2px 4px rgba(17,24,32,.08), 0 16px 40px rgba(17,24,32,.12); color-scheme: light; } /* Dark mode: intentional, not inverted. Deep navy surfaces (the brand navy family, stepped), warm orange kept for action, sky for links. Selected by data-theme="dark" (toggle) or by the device setting when the visitor has not chosen (the :not() guard in each app sheet and the pre-paint script keep the two in agreement). */ :root[data-theme="dark"] { --bg: #0D1218; /* navy-black */ --bg-grad: linear-gradient(180deg, #0D1218 0%, #101922 100%); --fg: #EDF1F5; /* 16.6:1 on --bg */ --muted: #A7B0BA; /* 7.9:1 on --bg */ --panel: #1B2530; /* stepped navy panel */ --panel-2: #232F3C; --line: #33424F; --line-strong: #43566A; --accent: #C8461A; /* same button orange; white stays 4.83:1 */ --accent-hover: #D1541F; --accent-ink: #F07345; /* bright orange text on dark: 5.35:1 on --panel */ --accent-soft: #2A2019; --link: #7FB3D9; /* 7.96:1 on navy bg */ --hero-bg: #0A0E13; --hero-fg: #FFFFFF; --hero-soft: #A7B0BA; --focus: #F07345; /* 6.16:1 on navy; ring is 3px + offset */ --ok: #5BD68A; --ok-bg: #12351F; --warn: #F2C14E; --warn-bg: #3D2E07; --bad: #FF8A8A; --bad-bg: #3D1414; --wait: #7FB3D9; --wait-bg: #14344D; --pill: #232F3C; --status-fg: #0D1218; /* dark text on the bright status fills */ --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #0D1218; --bg-grad: linear-gradient(180deg, #0D1218 0%, #101922 100%); --fg: #EDF1F5; --muted: #A7B0BA; --panel: #1B2530; --panel-2: #232F3C; --line: #33424F; --line-strong: #43566A; --accent: #C8461A; --accent-hover: #D1541F; --accent-fg: #fff; --accent-ink: #F07345; --accent-soft: #2A2019; --link: #7FB3D9; --hero-bg: #0A0E13; --hero-soft: #A7B0BA; --focus: #F07345; --ok: #5BD68A; --ok-bg: #12351F; --warn: #F2C14E; --warn-bg: #3D2E07; --bad: #FF8A8A; --bad-bg: #3D1414; --wait: #7FB3D9; --wait-bg: #14344D; --pill: #232F3C; --status-fg: #0D1218; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45); color-scheme: dark; } } /* Legacy guard: the experience app's retired "ember" value may still sit in a visitor's localStorage or a ?theme=ember link. It resolves to the new dark palette, never to the old brown one. The patched app.js also migrates the stored value to "dark" on first run. */ :root[data-theme="ember"] { --bg: #0D1218; --bg-grad: linear-gradient(180deg, #0D1218 0%, #101922 100%); --fg: #EDF1F5; --muted: #A7B0BA; --panel: #1B2530; --panel-2: #232F3C; --line: #33424F; --line-strong: #43566A; --accent: #C8461A; --accent-hover: #D1541F; --accent-fg: #fff; --accent-ink: #F07345; --accent-soft: #2A2019; --link: #7FB3D9; --hero-bg: #0A0E13; --hero-soft: #A7B0BA; --focus: #F07345; --ok: #5BD68A; --ok-bg: #12351F; --warn: #F2C14E; --warn-bg: #3D2E07; --bad: #FF8A8A; --bad-bg: #3D1414; --wait: #7FB3D9; --wait-bg: #14344D; --pill: #232F3C; --status-fg: #0D1218; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45); color-scheme: dark; } /* ---- Shared component: journey step indicator ----------------------- One journey across both products: 1 Find a group · 2 Request to join · 3 My requests · 4 Set up check-in · 5 Check in Markup (both apps, see MARKUP-PATCHES.md):
  1. Find a group
  2. Request to join
  3. My requests
  4. Set up check-in
  5. Check in
*/ .journey { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-4) 0; padding: 0; counter-reset: step; } .journey li { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel); color: var(--muted); font-size: .85rem; font-weight: 600; } .journey li::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--pill); color: var(--muted); font-size: .8rem; font-weight: 800; } .journey li.done { color: var(--fg); } .journey li.done::before { background: var(--ok-bg); color: var(--ok); content: "\2713"; } .journey li[aria-current="step"] { border-color: var(--accent); color: var(--fg); box-shadow: 0 0 0 1px var(--accent); } .journey li[aria-current="step"]::before { background: var(--accent); color: #fff; } .journey li a { color: inherit; text-decoration: none; } .journey li a:hover { text-decoration: underline; } /* ---- Shared component: theme toggle --------------------------------- A real button in each app's header. Label names the mode it will switch TO, so the control is honest before it is pressed. */ .theme-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font: inherit; font-weight: 700; cursor: pointer; } .theme-toggle::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; background: linear-gradient(90deg, var(--grace-navy) 50%, #fff 50%); border: 2px solid currentColor; box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Phone: the five-step journey stays on ONE row. Finished and upcoming steps show only their number or check; the current step shows its name. */ @media (max-width: 560px) { .journey { flex-wrap: nowrap; gap: .4rem; margin: 1.25rem 0 1.5rem; align-items: center; } .journey li { position: relative; padding: 0 .5rem; min-height: 44px; flex: 0 0 auto; font-size: 0; gap: 0; } .journey li::before { font-size: .85rem; } .journey li[aria-current="step"] { font-size: .85rem; flex: 1 1 auto; min-width: 0; white-space: nowrap; gap: .45rem; padding-right: .75rem; } .journey li a { position: absolute; inset: 0; } }