/* ========================================================================== KodeshWay — shared design tokens (Parchment Revival) CANONICAL SOURCE. Edit here, then run each site's build/sync_design.sh. DO NOT hand-edit the synced copies in /assets/design/. Mirrors the iOS app's PARCHMENT design (the design law since 2026-07-06, DESIGN_PRINCIPLES.md → Parchment Revival): warm cream page, gold as the single brand accent, serif display type, dark-inset gold cards, ember reserved for Lumen. The stock-iOS / royal-blue / glass direction is RETIRED — no #4169E1, no glass chrome, no cold system grays. Every hex here is read from the iOS app's asset catalog / KodeshWayColors (Packages/KodeshWayUI) — when iOS and this file disagree, iOS wins and this file gets fixed. LIGHT is the default (matches the app's parchment-first identity); dark values live under [data-theme="dark"]. theme.js stamps data-theme on before first paint and injects the sun/moon toggle — both modes are first-class, exactly like the app. ========================================================================== */ :root { /* ---- Fonts (no self-hosted web fonts — Cinzel stays banned) ------------ */ /* UI sans = SF Pro on Apple, best-effort elsewhere. */ --kw-font-ui: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Display serif = New York on Apple (KodeshWayFont.systemSerif), */ /* Georgia elsewhere — page titles, collapsing headers. */ --kw-font-serif: ui-serif, "New York", Georgia, "Times New Roman", serif; /* Verse + italic accents = Georgia exactly (KodeshWayFont.georgia / */ /* georgiaItalic) — verse text, subtitles, captions. */ --kw-font-verse: Georgia, "Times New Roman", serif; --kw-font-hebrew: "SBL Hebrew", "Cardo", "Times New Roman", serif; --kw-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- Type scale (px → rem, base 16; mirrors KodeshWayFont) -------------- */ --kw-fs-page-title: 2.125rem; /* 34 — page title, display serif */ --kw-fs-card-large: 1.25rem; /* 20 — large card title */ --kw-fs-card: 1.0625rem;/* 17 — card title */ --kw-fs-verse: 1rem; /* 16 — verse text (Georgia) */ --kw-fs-body: 0.9375rem;/* 15 — body / row title */ --kw-fs-body-2: 0.875rem; /* 14 — secondary body / Georgia-italic */ --kw-fs-small: 0.8125rem;/* 13 — tertiary / help */ --kw-fs-pill: 0.75rem; /* 12 — pill / chip */ --kw-fs-cta: 0.6875rem;/* 11 — CTA / button */ --kw-fs-eyebrow: 0.625rem; /* 10 — eyebrow (uppercase + tracking) */ --kw-lh-tight: 1.2; --kw-lh-body: 1.55; --kw-lh-prose: 1.65; /* ---- Tracking (kern relative to font size) ----------------------------- */ --kw-track-eyebrow: 0.18em; --kw-track-label: 0.16em; --kw-track-caps: 0.12em; /* ---- Spacing (mirrors KodeshWaySpacing) -------------------------------- */ --kw-space-xxs: 4px; --kw-space-xs: 4px; --kw-space-sm: 8px; --kw-space-md: 12px; --kw-space-lg: 16px; --kw-space-lg-plus: 20px; --kw-space-xl: 24px; --kw-space-xxl: 32px; --kw-space-xxxl: 48px; --kw-page-h: 20px; /* card-to-edge (pageHorizontal) */ --kw-card-pad: 16px; /* content inside cards (cardInternal) */ /* ---- Corner radii (mirrors KodeshWayCornerRadius) ----------------------- */ --kw-r-xs: 8px; --kw-r-sm: 12px; --kw-r-md: 14px; --kw-r-lg: 18px; --kw-r-xl: 20px; /* cards / sheets — the parchment ceiling */ --kw-r-capsule: 999px; /* true pills/capsules — always fully rounded */ /* RETIRED (glass era): the 30px .ios26 radius is dead with the glass reversal. Alias kept only so a stale consumer doesn't break — it now resolves to the parchment card radius. Do not use in new CSS. */ --kw-r-ios26: var(--kw-r-xl); --kw-r-ios26-min: 0px; /* ---- Colour — LIGHT (default; parchment) ------------------------------- */ /* Surfaces (iOS: KodeshWayPageBackground / CardSurface / TabBarSurface / SurfaceHero / SurfaceMuted / BgBase — light values) */ --kw-bg: #F0EAD6; /* page — warm parchment cream */ --kw-surface: #E8DFC8; /* card — warm sand */ --kw-surface-2: #F4EEE3; /* chrome / tab-bar surface */ --kw-surface-hero:#FFFCF5; /* hero / lifted sheet */ --kw-surface-muted:#F5F2ED;/* muted panel */ --kw-grouped-bg: #F0EAD6; --kw-bg-base: #F5F2EB; /* sheets/modals — elevated above the page */ /* Dark-inset card — the gilt hero card. SAME in both modes (iOS KodeshWayCardDarkInset is mode-invariant). */ --kw-inset: #1C1410; --kw-inset-text: #F5EDD8; /* light text on the dark card */ --kw-inset-muted: #9A8A6A; --kw-inset-accent: #C8B080; /* warm gold accents on the dark card */ --kw-inset-dim: #6A5A3A; /* Text (iOS KodeshWayTextPrimary/Secondary/Tertiary, light) */ --kw-label: #1A1A26; --kw-label-2: #333340; --kw-label-3: #4C4C59; --kw-label-on-accent: #1C1408; /* deep ink on gold fills (kodeshWayInk) */ /* Accent — GOLD, the single brand accent (iOS KodeshWayGold / DeepGold light). Royal blue #4169E1 is RETIRED. */ --kw-accent: #A8742A; --kw-accent-hover: #8C6B21; /* deep gold — pressed/hover, muted labels */ --kw-accent-deep: #8C6B21; /* Lumen — warm ember, reserved for Lumen surfaces only (iOS kodeshWayLumen light). Never the general accent. */ --kw-lumen: #8B3A14; /* Yeshua presence gradient (only where He is present — see iOS law) */ --kw-yeshua-light: #F5915A; --kw-yeshua-deep: #CD4623; --kw-separator: rgba(0, 0, 0, 0.06); /* hairline-faint */ --kw-fill: rgba(0, 0, 0, 0.04); /* hairline-subtle fills */ /* Gold hairline card borders — the iOS parchment card signature (KodeshWayCardView: 0.5px kodeshWayGold @16%, @22% on the dark inset). Same in both modes, exactly like the app. */ --kw-card-border: rgba(168, 116, 42, 0.16); --kw-inset-border: rgba(168, 116, 42, 0.22); /* Gold hairline for the ❖ ornament rules (45% alpha, like KodeshWayDiamondTitleRule). */ --kw-rule-gold: rgba(168, 116, 42, 0.45); /* ---- Glass — RETIRED. Kept only as solid parchment fallbacks so any stale .kw-glass consumer renders as opaque warm chrome, not glass. Do not use in new CSS; replace with --kw-surface-2. ------------------- */ --kw-glass-blur: none; --kw-glass-tint: #F4EEE3; --kw-glass-border: rgba(0, 0, 0, 0.06); --kw-glass-highlight: none; --kw-glass-solid: #F4EEE3; --kw-scrim: rgba(0, 0, 0, 0.32); /* ---- Card elevation shadow (light) -------------------------------------- */ --kw-card-shadow: 0 1px 2px rgba(28, 20, 8, 0.05), 0 6px 16px rgba(28, 20, 8, 0.07); /* ---- Aurora peak alpha (Lumen surfaces only — ember palette) ----------- */ --kw-aurora-alpha: 0.45; /* ---- Motion (mirrors KodeshWayAnimation) -------------------------------- */ --kw-dur-quick: 0.2s; --kw-dur: 0.3s; --kw-dur-slow: 0.5s; --kw-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ---- Colour — DARK (via [data-theme="dark"], stamped by theme.js) -------- */ [data-theme="dark"] { /* Surfaces (iOS dark values — warm near-black, never #000/#1C1C1E) */ --kw-bg: #14100E; --kw-surface: #221C18; --kw-surface-2: #241D1A; --kw-surface-hero:#211F26; --kw-surface-muted:#17161C; --kw-grouped-bg: #14100E; --kw-bg-base: #1E1814; /* Dark-inset stays #1C1410; its foreground pairs flip (iOS kodeshWayDarkInset* dark values — the card sits on a dark page, so text warms and dims one step). */ --kw-inset: #1C1410; --kw-inset-text: #F5EDD8; --kw-inset-muted: #6A5A3A; --kw-inset-accent: #C8B080; --kw-inset-dim: #8A7455; --kw-label: #F2F2F2; --kw-label-2: #D9D6D1; --kw-label-3: #BFBDB8; --kw-label-on-accent: #1C1408; /* Gold lifts in dark (iOS kodeshWayGoldOnParchment dark) so it stays legible on the warm near-black. */ --kw-accent: #C49040; --kw-accent-hover: #D9B24C; --kw-accent-deep: #998052; --kw-lumen: #C06030; --kw-separator: rgba(255, 255, 255, 0.06); --kw-fill: rgba(255, 255, 255, 0.04); /* Gold borders lift with the dark-mode gold so they stay visible. */ --kw-card-border: rgba(196, 144, 64, 0.18); --kw-inset-border: rgba(196, 144, 64, 0.24); --kw-rule-gold: rgba(196, 144, 64, 0.45); --kw-glass-tint: #241D1A; --kw-glass-border: rgba(255, 255, 255, 0.06); --kw-glass-solid: #241D1A; --kw-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }