/* ============================================================================= BEHOLD ISRAEL · DESIGN TOKENS (v2 — global brand foundation) ----------------------------------------------------------------------------- THE SINGLE SOURCE OF TRUTH for every Behold Israel digital property: · beholdisrael.org (WordPress / Avada) — the body.home layer reads these · shop (Shopify theme settings) — reads tokens.json · mobile app — reads tokens.json · Command Center dashboard (Next.js) — Tailwind config reads tokens.json · landing pages — link this file directly tokens.json in this folder mirrors these values 1:1 for machine consumers. If a value changes, change it HERE and regenerate/patch tokens.json in the same commit. Never fork a value into a consumer. LINEAGE: promoted from BI_Wordpress/Homepage Redesign/design-system/tokens.css (homepage-scoped, `body.home`). Every value that was valid there is kept. Anchor sections: pages/home/donation-section.html, israel-decree-section.html. STRUCTURE 1. Primitives — raw palette ramps, type, space, radii, shadow, motion… (never change per theme; safe to reference anywhere) 2. Semantics — role-based tokens that flip between dark and light. Default (:root) is DARK. `[data-theme="light"]` flips. Put data-theme on for a whole page, or on ANY section to force that section's tone (dark ↔ light alternation on marketing pages works this way). CONVENTION: everything is `--bi-*`. Consumers should reference SEMANTIC tokens (--bi-bg, --bi-ink, --bi-primary…) and reach for primitives only when building a new semantic role. ========================================================================== */ /* ============================================================================= 1. PRIMITIVES ============================================================================= */ :root { /* ---- Brand blue ramp (the ONLY non-neutral hue in the core system) ---- */ --bi-blue-50: #EAF0FF; --bi-blue-100: #CFDCFF; --bi-blue-200: #A6BEFF; --bi-blue-300: #6F97FF; --bi-blue-400: #3D79FF; --bi-blue-500: #1862FF; /* BI Blue — CTAs, links, accents */ --bi-blue-600: #0c4fd4; /* alt deep blue (live-events) */ --bi-blue-700: #0e44b8; /* hover / pressed (anchor value) */ --bi-blue-800: #0B327F; --bi-blue-900: #0F1031; /* deep navy — the glow partner, not a text color */ /* Legacy names (kept — many shipped blocks reference them) */ --bi-blue: var(--bi-blue-500); --bi-blue-hover: var(--bi-blue-700); --bi-blue-deep: var(--bi-blue-600); --bi-navy: var(--bi-blue-900); /* ---- Neutral ramp · DARK side (near-black → grays) ---- */ --bi-night-0: #050509; /* deepest gradient stop */ --bi-night-1: #07070b; /* base near-black */ --bi-night-2: #0a0a12; /* gradient top stop / elevated */ --bi-night-3: #101017; /* raised surface (cards, inputs) */ --bi-night-4: #16161f; /* second raised step */ --bi-gray-600: #5b5f6b; /* disabled text on dark */ --bi-gray-500: #8a8f9c; /* muted / kickers / captions on dark */ --bi-gray-400: #9aa0ad; /* secondary labels on dark */ --bi-gray-300: #c9ccd2; /* body copy on dark */ --bi-gray-200: #dfe2e8; /* chip text on dark */ --bi-gray-100: #e9ebf0; /* on dark */ --bi-gray-50: #eef0f4; /* ghost button text on dark */ --bi-white: #ffffff; /* ---- Neutral ramp · LIGHT side ---- */ --bi-paper-0: #ffffff; /* primary light surface */ --bi-paper-1: #f6f6f6; /* alt light surface (alternation) */ --bi-paper-2: #E5E7E8; /* section gray (alternation) */ --bi-paper-3: #d6d9dd; /* light borders / dividers (solid) */ --bi-ink-900: #111111; /* headings on light */ --bi-ink-800: #222222; /* on light */ --bi-ink-600: #5b5b5b; /* body copy on light */ --bi-ink-550: #676767; /* muted / kickers on light (AA on every paper) */ --bi-ink-500: #747474; /* legacy muted — AA on white only, not on paper-1/2 */ --bi-ink-400: #9a9a9a; /* disabled on light */ /* ---- Alpha helpers ---- */ --bi-white-a03: rgba(255,255,255,0.03); --bi-white-a06: rgba(255,255,255,0.06); --bi-white-a10: rgba(255,255,255,0.10); --bi-white-a14: rgba(255,255,255,0.14); --bi-white-a28: rgba(255,255,255,0.28); --bi-white-a60: rgba(255,255,255,0.60); --bi-navy-a08: rgba(15,16,49,0.08); --bi-navy-a18: rgba(15,16,49,0.18); --bi-navy-a85: rgba(15,16,49,0.85); --bi-blue-a05: rgba(24,98,255,0.05); --bi-blue-a10: rgba(24,98,255,0.10); --bi-blue-a18: rgba(24,98,255,0.18); --bi-blue-a35: rgba(24,98,255,0.35); --bi-blue-a55: rgba(24,98,255,0.55); --bi-black-a90: rgba(0,0,0,0.90); /* ---- Accent dot (warm) — the small dot inside info chips ---- Also used as the uppercase state label on event cards (.bi-event__state), the shipped Israel Decree homepage pattern; pending leadership confirmation. */ --bi-accent-dot: #E8C87A; --bi-accent-dot-ring: rgba(232,200,122,0.16); /* ---- Sub-brand: GenZion ONLY — never on core BI surfaces ---- */ --bi-gold: #DFBA4A; --bi-gold-dark: #B8860B; --bi-purple: #7B2D8E; /* ---- Status hues (functional; used mostly by the product surface) ---- Two steps each: the *-dark value sits on near-black (desaturated, so it never fights the blue), the *-light value sits on white (AA on white). */ --bi-success-dark: #4CC38A; --bi-success-light: #1E7F52; --bi-warning-dark: #E2A544; --bi-warning-light: #9A5B00; --bi-danger-dark: #F0707A; --bi-danger-light: #C22F3A; --bi-info-dark: #6F97FF; --bi-info-light: #0B327F; /* blue-800: distinct from primary-hover (#0e44b8); 11.8:1 on white */ /* Solid danger fills (delete button, danger counter). --bi-danger is tuned for text on a tint; white text on it fails AA on dark (2.9:1). These darker steps carry white text at AA: 4.9:1 dark, 6.0:1 light. */ --bi-danger-solid-dark: #c8423a; --bi-danger-solid-light: #b8322a; /* ---- Chart series (theme-independent) ---- Six series, blue first, no purple/lavender (that is the GenZion hue). Ordered so 1..6 alternates dark/light in luminance (L* 47 62 71 62 31 67) and adjacent pairs stay apart for protan/deutan/tritan readers. Charts always ship a legend + direct labels: on white, 2/3/4/6 sit below 3:1, on dark, 5 does. Working set is 1-4; 5-6 exist for a rare fifth/sixth line. */ --bi-chart-1: #1862FF; /* BI blue */ --bi-chart-2: #2BA3C9; /* cyan */ --bi-chart-3: #7FB0FF; /* light blue (blue-300 step) */ --bi-chart-4: #2FA88F; /* teal */ --bi-chart-5: #0F3FA8; /* deep blue — dark-mode contrast 2.1:1, use for dashed/secondary lines with a direct label */ --bi-chart-6: #9AA3B5; /* steel gray */ /* ---- Typography ---- */ --bi-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif; --bi-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* code, token names, kbd */ /* Montserrat is the only typeface. Weights loaded: 400 500 600 700 800. (The old --bi-font-display Avenir Next role is retired.) */ --bi-weight-regular: 400; --bi-weight-medium: 500; --bi-weight-semibold: 600; --bi-weight-bold: 700; --bi-weight-black: 800; /* DISPLAY scale — marketing surfaces (WordPress, Shopify, landing pages) */ --bi-display-h1: clamp(40px, 6vw, 72px); --bi-display-h1-lh: 1.02; --bi-display-h1-tracking: -0.025em; --bi-display-h1-weight: 800; --bi-display-h2: clamp(30px, 4.4vw, 50px); /* anchor value */ --bi-display-h2-lh: 1.06; --bi-display-h2-tracking: -0.02em; --bi-display-h2-weight: 800; --bi-display-h3: clamp(22px, 2.4vw, 30px); --bi-display-h3-lh: 1.15; --bi-display-h3-tracking: -0.01em; --bi-display-h3-weight: 700; --bi-display-h4: clamp(18px, 1.6vw, 20px); --bi-display-h4-lh: 1.3; --bi-display-h4-tracking: -0.005em; --bi-display-h4-weight: 700; --bi-display-lead: clamp(17px, 1.5vw, 20px); --bi-display-lead-lh: 1.6; --bi-display-body: clamp(15.5px, 1.3vw, 17px); /* anchor value */ --bi-display-body-lh: 1.72; --bi-display-measure: 46ch; --bi-display-small: 14px; --bi-display-small-lh: 1.6; --bi-display-caption: 12.5px; --bi-display-caption-tracking: 0.12em; --bi-display-kicker: 12px; --bi-display-kicker-tracking: 0.26em; --bi-display-kicker-weight: 600; --bi-display-kicker-rule: 26px; /* the blue lead rule width */ /* Legacy aliases (homepage tokens.css names) */ --bi-h2: var(--bi-display-h2); --bi-h2-weight: var(--bi-display-h2-weight); --bi-h2-lh: var(--bi-display-h2-lh); --bi-h2-tracking: var(--bi-display-h2-tracking); --bi-body-size: var(--bi-display-body); --bi-body-lh: var(--bi-display-body-lh); --bi-kicker-size: var(--bi-display-kicker); --bi-kicker-tracking: var(--bi-display-kicker-tracking); /* COMPACT scale — product surfaces (Command Center, app UI, admin) */ --bi-compact-h1: 24px; --bi-compact-h1-lh: 1.25; --bi-compact-h1-weight: 700; --bi-compact-h1-tracking: -0.015em; --bi-compact-h2: 20px; --bi-compact-h2-lh: 1.3; --bi-compact-h2-weight: 700; --bi-compact-h2-tracking: -0.01em; --bi-compact-h3: 16px; --bi-compact-h3-lh: 1.4; --bi-compact-h3-weight: 600; --bi-compact-body: 14px; --bi-compact-body-lh: 1.5; --bi-compact-small: 12px; --bi-compact-small-lh: 1.5; --bi-compact-micro: 11px; --bi-compact-micro-lh: 1.4; --bi-compact-micro-tracking: 0.06em; --bi-compact-label-weight: 600; --bi-compact-control: 13px; /* control labels: buttons, tabs, chips, table cells, nav items */ /* ROLE sizes reused across surfaces */ --bi-card-title: 18px; /* card titles (display scale) */ --bi-kpi-value: 26px; /* KPI figures, app screen titles (compact scale) */ /* ---- Spacing (4-based) ---- */ --bi-space-1: 4px; --bi-space-2: 8px; --bi-space-3: 12px; --bi-space-4: 16px; --bi-space-5: 20px; --bi-space-6: 24px; --bi-space-8: 32px; --bi-space-10: 40px; --bi-space-12: 48px; --bi-space-16: 64px; --bi-space-20: 80px; --bi-space-24: 96px; --bi-space-32: 128px; /* ---- Radii ---- */ --bi-radius-xs: 6px; /* compact inputs, tags */ --bi-radius-sm: 8px; /* small controls, menu items, chips-in-rows */ --bi-radius-tile: 10px; /* icon tiles, brand mark, toasts, alerts */ --bi-radius-popover: 12px; /* menus, popovers */ --bi-radius-card: 14px; /* content / event cards */ --bi-radius-media: 16px; /* framed media, large cards, product gallery */ --bi-radius-pill: 999px; /* CTAs, chips, badges */ /* ---- Shadows (color-tinted, layered — never flat gray) ---- */ --bi-shadow-media: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(24,98,255,0.10), inset 0 0 0 1px rgba(255,255,255,0.03); --bi-shadow-cta: 0 10px 30px -10px rgba(24,98,255,0.65); --bi-shadow-cta-hover: 0 18px 42px -12px rgba(24,98,255,0.80); --bi-shadow-cta-sm: 0 6px 16px -8px rgba(24,98,255,0.55); /* compact (sm/xs) primary buttons */ --bi-shadow-ghost-hover: 0 16px 34px -16px rgba(255,255,255,0.25); --bi-shadow-card-dark-hover: 0 22px 48px -22px rgba(24,98,255,0.55); --bi-shadow-card-light: 0 2px 12px rgba(16,24,64,0.06); --bi-shadow-card-light-hover: 0 18px 40px -12px rgba(16,24,64,0.14); --bi-shadow-play: 0 12px 40px -8px rgba(0,0,0,0.7); --bi-shadow-play-hover: 0 18px 54px -8px rgba(24,98,255,0.75); /* compact elevations (product surface) */ --bi-elev-1: 0 1px 2px rgba(5,5,9,0.30), 0 0 0 1px rgba(255,255,255,0.04); --bi-elev-2: 0 6px 18px -6px rgba(5,5,9,0.55), 0 0 0 1px rgba(255,255,255,0.05); --bi-elev-3: 0 18px 48px -16px rgba(5,5,9,0.75), 0 0 0 1px rgba(24,98,255,0.10); --bi-elev-1-light: 0 1px 2px rgba(16,24,64,0.06), 0 0 0 1px rgba(15,16,49,0.06); --bi-elev-2-light: 0 6px 18px -6px rgba(16,24,64,0.12), 0 0 0 1px rgba(15,16,49,0.06); --bi-elev-3-light: 0 18px 48px -16px rgba(16,24,64,0.20), 0 0 0 1px rgba(15,16,49,0.06); /* ---- Motion ---- */ --bi-ease: cubic-bezier(.2,.7,.2,1); /* the house curve */ --bi-ease-out: cubic-bezier(0,0,.2,1); --bi-dur-fast: .2s; /* color / border swaps */ --bi-dur-base: .25s; /* transform lifts, shadows */ --bi-dur-slow: .4s; /* overlays, opacity fades */ --bi-reveal-dur: .8s; /* entrance reveal */ --bi-reveal-d1: .05s; --bi-reveal-d2: .18s; --bi-lift: -3px; /* hover translateY for CTAs / cards */ /* ---- Z-index ---- */ --bi-z-below: -1; --bi-z-base: 0; --bi-z-raised: 1; --bi-z-content: 2; --bi-z-overlay: 3; --bi-z-sticky: 100; --bi-z-dropdown: 200; --bi-z-modal: 300; --bi-z-toast: 400; /* ---- Layout ---- */ --bi-inner-max: 1180px; /* content max-width */ --bi-inner-pad: clamp(20px, 5vw, 48px); /* content side pad */ --bi-section-pad: clamp(60px, 9vw, 100px); /* section vertical pad */ --bi-section-pad-tight: clamp(44px, 6vw, 72px); --bi-grid-gap: clamp(36px, 5vw, 72px); /* 2-col split gap */ --bi-card-gap: 16px; /* card grid gap */ --bi-logo-header: clamp(140px, 12vw, 176px); /* header logo — sized by WIDTH, never height (min 120px per brand) */ --bi-logo-footer: 128px; /* footer / drawer logo width */ --bi-logo-hero: clamp(200px, 22vw, 280px); /* hero-scale mark (brand panels, sign-in); 280 = half the 560px retina file, the documented max */ --bi-stack-bp: 860px; /* (reference only) split → stack */ /* Breakpoints — CSS custom properties can't drive @media, so these are the canonical values to type by hand everywhere: --bi-bp-sm 560px phone landscape / phablet --bi-bp-md 860px 2-col split stacks below this (anchor value) --bi-bp-lg 1180px inner max reached --bi-bp-xl 1440px wide desktop */ /* ---- Grain texture (dark recipe) ---- */ --bi-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --bi-grain-opacity: 0.05; --bi-grain-opacity-light: 0.025; } /* ============================================================================= 2. SEMANTIC TOKENS ---------------------------------------------------------------------------- DARK is the default and primary tone. Apply `data-theme="light"` to for a light page (Shopify, app), or to any section to force its tone. ============================================================================= */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bi-bg: var(--bi-night-1); --bi-bg-1: var(--bi-night-2); /* legacy: gradient top */ --bi-bg-2: var(--bi-night-0); /* legacy: gradient bottom*/ --bi-bg-elevated: var(--bi-night-2); --bi-surface: var(--bi-night-3); --bi-surface-2: var(--bi-night-4); --bi-surface-card: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%); --bi-surface-chip: var(--bi-white-a03); /* Text */ --bi-ink: var(--bi-white); --bi-body: var(--bi-gray-300); --bi-body-strong: var(--bi-gray-100); --bi-muted: var(--bi-gray-500); --bi-muted-2: var(--bi-gray-400); --bi-disabled: var(--bi-gray-600); --bi-chip-text: var(--bi-gray-200); /* Lines */ --bi-frame: var(--bi-white-a10); /* media / card frame */ --bi-hairline: var(--bi-white-a14); /* chips, dividers */ --bi-hairline-2: var(--bi-white-a06); /* softer dividers */ --bi-hover-tint: var(--bi-white-a06); /* hover / open tint on nav + menu rows */ --bi-ghost-border: var(--bi-white-a28); /* ghost BUTTON outline (anchor value) */ --bi-ghost-border-hover: var(--bi-white-a60); --bi-control-border: rgba(255,255,255,0.16); /* compact fields, checks, switches, button groups */ --bi-ghost-text: var(--bi-gray-50); /* Action */ --bi-primary: var(--bi-blue-500); --bi-primary-hover: var(--bi-blue-700); --bi-on-primary: var(--bi-white); --bi-link: var(--bi-blue-400); /* slightly lifted for AA on near-black body text */ --bi-link-hover: var(--bi-blue-300); --bi-focus-ring: var(--bi-white); --bi-focus-ring-offset: 3px; /* Status */ --bi-success: var(--bi-success-dark); --bi-warning: var(--bi-warning-dark); --bi-danger: var(--bi-danger-dark); --bi-info: var(--bi-info-dark); --bi-success-bg: rgba(76,195,138,0.12); --bi-warning-bg: rgba(226,165,68,0.12); --bi-danger-bg: rgba(240,112,122,0.12); --bi-info-bg: rgba(24,98,255,0.14); --bi-danger-solid: var(--bi-danger-solid-dark); /* Charts (grid / axis recessive; area = primary fill under a line) */ --bi-chart-grid: rgba(255,255,255,0.07); --bi-chart-axis: rgba(255,255,255,0.18); --bi-chart-area: rgba(24,98,255,0.22); /* Composites */ --bi-glow: radial-gradient(120% 90% at 82% 18%, rgba(24,98,255,0.18) 0%, rgba(24,98,255,0.05) 34%, transparent 62%), radial-gradient(100% 120% at 6% 96%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, var(--bi-night-2) 0%, var(--bi-night-1) 60%, var(--bi-night-0) 100%); --bi-glow-alt: /* mirrored origin for consecutive dark sections */ radial-gradient(120% 90% at 14% 18%, rgba(24,98,255,0.16) 0%, rgba(24,98,255,0.04) 34%, transparent 62%), radial-gradient(100% 120% at 94% 96%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, var(--bi-night-2) 0%, var(--bi-night-1) 60%, var(--bi-night-0) 100%); --bi-dark-glow: var(--bi-glow); /* legacy name */ --bi-app-wash: /* the glow, dimmed (blue .14 vs .18) — the ONLY glow on product surfaces, fixed behind the app shell */ radial-gradient(110% 70% at 88% -10%, rgba(24,98,255,0.14) 0%, rgba(24,98,255,0.04) 32%, transparent 60%), radial-gradient(90% 90% at -6% 104%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, var(--bi-night-2) 0%, var(--bi-night-1) 55%, var(--bi-night-0) 100%); --bi-grain-alpha: var(--bi-grain-opacity); --bi-shadow-card: none; --bi-shadow-card-hover: var(--bi-shadow-card-dark-hover); --bi-elev-1-current: var(--bi-elev-1); --bi-elev-2-current: var(--bi-elev-2); --bi-elev-3-current: var(--bi-elev-3); /* Media placeholder (until real art loads) */ --bi-media-ph: linear-gradient(135deg, #0c1330 0%, #0a0a16 60%, #07070b 100%); } [data-theme="light"] { color-scheme: light; --bi-bg: var(--bi-paper-0); --bi-bg-1: var(--bi-paper-0); --bi-bg-2: var(--bi-paper-1); --bi-bg-elevated: var(--bi-paper-1); --bi-surface: var(--bi-paper-0); --bi-surface-2: var(--bi-paper-1); --bi-surface-card: var(--bi-paper-0); --bi-surface-chip: var(--bi-paper-0); --bi-ink: var(--bi-ink-900); --bi-body: var(--bi-ink-600); --bi-body-strong: var(--bi-ink-800); --bi-muted: var(--bi-ink-550); --bi-muted-2: var(--bi-ink-550); --bi-disabled: var(--bi-ink-400); --bi-chip-text: var(--bi-ink-800); --bi-frame: var(--bi-navy-a08); --bi-hairline: var(--bi-navy-a08); --bi-hairline-2: rgba(15,16,49,0.05); --bi-hover-tint: rgba(15,16,49,0.05); --bi-ghost-border: var(--bi-navy-a18); --bi-ghost-border-hover: var(--bi-blue-500); --bi-control-border: rgba(15,16,49,0.16); --bi-ghost-text: var(--bi-ink-900); --bi-primary: var(--bi-blue-500); --bi-primary-hover: var(--bi-blue-700); --bi-on-primary: var(--bi-white); --bi-link: var(--bi-blue-500); --bi-link-hover: var(--bi-blue-700); --bi-focus-ring: var(--bi-blue-500); --bi-focus-ring-offset: 3px; --bi-success: var(--bi-success-light); --bi-warning: var(--bi-warning-light); --bi-danger: var(--bi-danger-light); --bi-info: var(--bi-info-light); --bi-success-bg: rgba(30,127,82,0.10); --bi-warning-bg: rgba(154,91,0,0.10); --bi-danger-bg: rgba(194,47,58,0.10); --bi-info-bg: rgba(24,98,255,0.08); --bi-danger-solid: var(--bi-danger-solid-light); --bi-chart-grid: rgba(15,16,49,0.08); --bi-chart-axis: rgba(15,16,49,0.22); --bi-chart-area: rgba(24,98,255,0.16); --bi-glow: radial-gradient(90% 70% at 88% 8%, rgba(24,98,255,0.06) 0%, rgba(24,98,255,0.015) 38%, transparent 64%), linear-gradient(180deg, var(--bi-paper-0) 0%, var(--bi-paper-0) 100%); --bi-glow-alt: radial-gradient(90% 70% at 12% 8%, rgba(24,98,255,0.05) 0%, rgba(24,98,255,0.012) 38%, transparent 64%), linear-gradient(180deg, var(--bi-paper-1) 0%, var(--bi-paper-1) 100%); --bi-light-glow: var(--bi-glow); /* legacy name */ --bi-app-wash: radial-gradient(90% 60% at 90% -8%, rgba(24,98,255,0.07) 0%, rgba(24,98,255,0.015) 36%, transparent 62%), linear-gradient(180deg, #f7f7f9 0%, #f4f4f6 100%); --bi-grain-alpha: var(--bi-grain-opacity-light); --bi-shadow-card: var(--bi-shadow-card-light); --bi-shadow-card-hover: var(--bi-shadow-card-light-hover); --bi-elev-1-current: var(--bi-elev-1-light); --bi-elev-2-current: var(--bi-elev-2-light); --bi-elev-3-current: var(--bi-elev-3-light); --bi-media-ph: linear-gradient(135deg, #e9edf6 0%, #f3f4f7 60%, #ffffff 100%); } /* Legacy light-recipe names from the homepage token set (theme-independent) */ :root { --bi-light: var(--bi-paper-0); --bi-light-2: var(--bi-paper-1); --bi-light-3: var(--bi-paper-2); --bi-ink-light: var(--bi-ink-900); --bi-body-light: var(--bi-ink-600); --bi-muted-light: var(--bi-ink-550); --bi-hairline-light: var(--bi-navy-a08); } /* ============================================================================= 3. SHOW SCOPES — broadcast accents (CONNECT productions) ---------------------------------------------------------------------------- The ONLY way a non-blue hue enters a Behold Israel surface. Each of the eight CONNECT broadcasts owns one accent tone, drawn from its artwork, and it is defined only under `[data-show=""]`. Outside a show surface these tokens do not exist — that is the boundary. Inside one, `--bi-show-accent` replaces Signal Blue for the primary CTA and the headline accent phrase only (see styleguide/components-broadcast.css); type, radii, spacing, cards, chips, hairlines, the kicker rule and the seam stay core. Five tokens per show. The LIGHT block is written first and the DARK block second on purpose: the dark block's `[data-show][data-theme="dark"]` selector then wins for a dark show section on a light page, while a bare `[data-show]` inside light still resolves light. --bi-show-accent the tone (>= 3:1 as large text on the surface) --bi-show-accent-hover hover / pressed step (same direction as core) --bi-show-on-accent text on the accent (>= 4.5:1) --bi-show-accent-soft 16% / 12% tint for show chips --bi-show-wash the --bi-glow recipe with the show tone in place of blue; replaces the glow on the show surface Original artwork hex per show → BROADCASTS-NOTES.md. CONNECT itself has no tokens: it uses the core palette unchanged, and so does Truth Be Told: its artwork tone is the brand's own Night, so a scoped accent only read as dimmed Signal Blue. Seven scopes, not eight. ============================================================================= */ /* ---- The Anchor Podcast · artwork tone #D27626 ---- */ [data-theme="light"] [data-show="anchor-podcast"], [data-show="anchor-podcast"][data-theme="light"] { --bi-show-accent: #B0491A; --bi-show-accent-hover: #8C3A14; --bi-show-on-accent: #ffffff; --bi-show-accent-soft: rgba(176,73,26,0.12); --bi-show-wash: radial-gradient(90% 70% at 88% 8%, rgba(176,73,26,0.10) 0%, rgba(176,73,26,0.025) 38%, transparent 64%), linear-gradient(180deg, #ffffff 0%, #ffffff 100%); } [data-show="anchor-podcast"], [data-show="anchor-podcast"][data-theme="dark"] { --bi-show-accent: #D27626; --bi-show-accent-hover: #E28A3A; --bi-show-on-accent: #07070b; --bi-show-accent-soft: rgba(210,118,38,0.16); --bi-show-wash: radial-gradient(120% 90% at 82% 18%, rgba(210,118,38,0.18) 0%, rgba(210,118,38,0.05) 34%, transparent 62%), radial-gradient(100% 120% at 6% 96%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, #0a0a12 0%, #07070b 60%, #050509 100%); } /* ---- Authors' Corner · artwork tone #F2BD4B ---- */ [data-theme="light"] [data-show="authors-corner"], [data-show="authors-corner"][data-theme="light"] { --bi-show-accent: #7F6A14; --bi-show-accent-hover: #655410; --bi-show-on-accent: #ffffff; --bi-show-accent-soft: rgba(127,106,20,0.12); --bi-show-wash: radial-gradient(90% 70% at 88% 8%, rgba(127,106,20,0.10) 0%, rgba(127,106,20,0.025) 38%, transparent 64%), linear-gradient(180deg, #ffffff 0%, #ffffff 100%); } [data-show="authors-corner"], [data-show="authors-corner"][data-theme="dark"] { --bi-show-accent: #F2BD4B; --bi-show-accent-hover: #F7CB6A; --bi-show-on-accent: #07070b; --bi-show-accent-soft: rgba(242,189,75,0.16); --bi-show-wash: radial-gradient(120% 90% at 82% 18%, rgba(242,189,75,0.18) 0%, rgba(242,189,75,0.05) 34%, transparent 62%), radial-gradient(100% 120% at 6% 96%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, #0a0a12 0%, #07070b 60%, #050509 100%); } /* ---- Q&A CONNECT · artwork tone #A43340 ---- */ [data-theme="light"] [data-show="connect-qa"], [data-show="connect-qa"][data-theme="light"] { --bi-show-accent: #A8303E; --bi-show-accent-hover: #8B2734; --bi-show-on-accent: #ffffff; --bi-show-accent-soft: rgba(168,48,62,0.12); --bi-show-wash: radial-gradient(90% 70% at 88% 8%, rgba(168,48,62,0.10) 0%, rgba(168,48,62,0.025) 38%, transparent 64%), linear-gradient(180deg, #ffffff 0%, #ffffff 100%); } [data-show="connect-qa"], [data-show="connect-qa"][data-theme="dark"] { --bi-show-accent: #C73D4B; --bi-show-accent-hover: #AD3241; --bi-show-on-accent: #ffffff; --bi-show-accent-soft: rgba(199,61,75,0.16); --bi-show-wash: radial-gradient(120% 90% at 82% 18%, rgba(199,61,75,0.18) 0%, rgba(199,61,75,0.05) 34%, transparent 62%), radial-gradient(100% 120% at 6% 96%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, #0a0a12 0%, #07070b 60%, #050509 100%); } /* ---- Explore the Bible · artwork tone #E1943C ---- */ [data-theme="light"] [data-show="explore-the-bible"], [data-show="explore-the-bible"][data-theme="light"] { --bi-show-accent: #A5661A; --bi-show-accent-hover: #875314; --bi-show-on-accent: #ffffff; --bi-show-accent-soft: rgba(165,102,26,0.12); --bi-show-wash: radial-gradient(90% 70% at 88% 8%, rgba(165,102,26,0.10) 0%, rgba(165,102,26,0.025) 38%, transparent 64%), linear-gradient(180deg, #ffffff 0%, #ffffff 100%); } [data-show="explore-the-bible"], [data-show="explore-the-bible"][data-theme="dark"] { --bi-show-accent: #E1943C; --bi-show-accent-hover: #EBA553; --bi-show-on-accent: #07070b; --bi-show-accent-soft: rgba(225,148,60,0.16); --bi-show-wash: radial-gradient(120% 90% at 82% 18%, rgba(225,148,60,0.18) 0%, rgba(225,148,60,0.05) 34%, transparent 62%), radial-gradient(100% 120% at 6% 96%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, #0a0a12 0%, #07070b 60%, #050509 100%); } /* ---- Let's Connect · artwork tone #5F7572 ---- */ [data-theme="light"] [data-show="lets-connect"], [data-show="lets-connect"][data-theme="light"] { --bi-show-accent: #4B6663; --bi-show-accent-hover: #3B524F; --bi-show-on-accent: #ffffff; --bi-show-accent-soft: rgba(75,102,99,0.12); --bi-show-wash: radial-gradient(90% 70% at 88% 8%, rgba(75,102,99,0.10) 0%, rgba(75,102,99,0.025) 38%, transparent 64%), linear-gradient(180deg, #ffffff 0%, #ffffff 100%); } [data-show="lets-connect"], [data-show="lets-connect"][data-theme="dark"] { --bi-show-accent: #7C9B96; --bi-show-accent-hover: #8FACA7; --bi-show-on-accent: #07070b; --bi-show-accent-soft: rgba(124,155,150,0.16); --bi-show-wash: radial-gradient(120% 90% at 82% 18%, rgba(124,155,150,0.18) 0%, rgba(124,155,150,0.05) 34%, transparent 62%), radial-gradient(100% 120% at 6% 96%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, #0a0a12 0%, #07070b 60%, #050509 100%); } /* ---- MidEast & Beyond · artwork tone #348490 ---- */ [data-theme="light"] [data-show="mideast-beyond"], [data-show="mideast-beyond"][data-theme="light"] { --bi-show-accent: #1F6570; --bi-show-accent-hover: #17505A; --bi-show-on-accent: #ffffff; --bi-show-accent-soft: rgba(31,101,112,0.12); --bi-show-wash: radial-gradient(90% 70% at 88% 8%, rgba(31,101,112,0.10) 0%, rgba(31,101,112,0.025) 38%, transparent 64%), linear-gradient(180deg, #ffffff 0%, #ffffff 100%); } [data-show="mideast-beyond"], [data-show="mideast-beyond"][data-theme="dark"] { --bi-show-accent: #3E9AA8; --bi-show-accent-hover: #4FAEBC; --bi-show-on-accent: #07070b; --bi-show-accent-soft: rgba(62,154,168,0.16); --bi-show-wash: radial-gradient(120% 90% at 82% 18%, rgba(62,154,168,0.18) 0%, rgba(62,154,168,0.05) 34%, transparent 62%), radial-gradient(100% 120% at 6% 96%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, #0a0a12 0%, #07070b 60%, #050509 100%); } /* ---- Round Table · artwork tone #725E50 ---- */ [data-theme="light"] [data-show="round-table"], [data-show="round-table"][data-theme="light"] { --bi-show-accent: #7A5A3E; --bi-show-accent-hover: #5F4630; --bi-show-on-accent: #ffffff; --bi-show-accent-soft: rgba(122,90,62,0.12); --bi-show-wash: radial-gradient(90% 70% at 88% 8%, rgba(122,90,62,0.10) 0%, rgba(122,90,62,0.025) 38%, transparent 64%), linear-gradient(180deg, #ffffff 0%, #ffffff 100%); } [data-show="round-table"], [data-show="round-table"][data-theme="dark"] { --bi-show-accent: #B08D6E; --bi-show-accent-hover: #BE9C7E; --bi-show-on-accent: #07070b; --bi-show-accent-soft: rgba(176,141,110,0.16); --bi-show-wash: radial-gradient(120% 90% at 82% 18%, rgba(176,141,110,0.18) 0%, rgba(176,141,110,0.05) 34%, transparent 62%), radial-gradient(100% 120% at 6% 96%, rgba(15,16,49,0.85) 0%, transparent 55%), linear-gradient(180deg, #0a0a12 0%, #07070b 60%, #050509 100%); } /* ============================================================================= 3b. BOOK SCOPE CONTRACT — campaign pages (book landing pages) ---------------------------------------------------------------------------- A book landing page is a short-lived marketing surface whose colour comes from the book's cover — the ground as well as the accent. The design system does not catalogue those pages; it governs them. FIXED on a campaign page: type, spacing, radii, motion and every core component. SUPPLIED by the book: the WHOLE palette, defined only under `[data-book=""]` — · the base ramp bg + two/three surfaces + hairlines · the text ramp ink / body / muted · the accent + hover, on-accent, soft · the atmosphere a second cover hue for washes and imagery only · every semantic slot that would otherwise resolve to Signal Blue: primary, link, focus ring, info, hover tint, the glow, the blue-tinted shadows. There is NO Signal Blue inside a book scope. It is the property mechanism (§3c) without the light block: campaign pages are dark-only, so there is one block per book. Implementation: the block declares the six `--bi-book-*` slots and then RE-MAPS the semantic layer (§2) — the same names every component already reads — so text, links, surfaces and focus need no component rules. What core hard-codes to blue (seam, dots, rings, play button, card hover) is re-pointed by styleguide/components-campaign.css. Six named slots: --bi-book-accent the tone: CTA fill, headline phrase, kicker rule, seam, dots, stage badge. >= 3:1 on the book's bg --bi-book-accent-hover hover / pressed step, 4–14 L* away from on-accent --bi-book-on-accent text on the accent, >= 4.5:1 on accent AND hover --bi-book-accent-soft the accent at ~18% for chips, rings, ghost hover --bi-book-wash the glow recipe on the book's own ground: accent 12–16% + optional atmosphere stop, ending on bg --bi-book-atmosphere a SECOND cover hue. Hero washes, gradients and imagery treatment ONLY — never text, controls or icons. Shows have no such slot; covers carry two. plus the base override: bg, bg-1/2, bg-elevated, surface, surface-2, surface-card, surface-chip, ink, body, body-strong, muted, muted-2, chip-text, frame, hairline, hairline-2, hover-tint, ghost-border(-hover), control-border, ghost-text, primary(-hover), on-primary, link(-hover), focus-ring, info, info-bg, glow, glow-alt, media-ph, and the shadows that carry a blue tint (cta, cta-hover, cta-sm, media, card-hover, elev-3). PER-BOOK VALUES DO NOT LIVE HERE. They live in the book's rollout manifest, BOOK-ROLLOUT/books/.json → palette, and the landing-page template writes the block from there. Gate before Stage 3: `broadcasts/_build/contrast.py --book-file ` (exit 0) — text on bg and on every surface >= 4.5:1, accent on bg >= 3:1, on-accent >= 4.5:1, hover delta, soft/wash stops; the atmosphere is not gated. Contract page: campaigns/book-landing-pages.html. Mock: applications/ book-landing-page.html. Rollout hand-off: campaigns/ROLLOUT-HANDOFF.md. Mirrored in tokens.json → book..dark.{slots…, base:{…}}; checked by broadcasts/_build/check_tokens.py. ============================================================================= */ /* ---- _template · copy into the book's LP, fill from the manifest ---- [data-book=""] { --bi-book-accent: <#rrggbb · cover's dominant hue, >= 3:1 on bg>; --bi-book-accent-hover: <#rrggbb · 4–14 L* away from on-accent>; --bi-book-on-accent: <#rrggbb · the book's darkest ground or white, >= 4.5:1>; --bi-book-accent-soft: ; --bi-book-wash: radial-gradient(120% 90% at 82% 18%, rgba(,0.16) 0%, rgba(,0.05) 34%, transparent 62%), radial-gradient(70% 60% at 12% 100%, rgba(,0.12) 0%, transparent 60%), linear-gradient(180deg, 0%, 60%, 100%); --bi-book-atmosphere: <#rrggbb · the cover's secondary hue; washes and imagery only>; base override · the ground comes from the cover too --bi-bg: ; --bi-bg-1: ; --bi-bg-2: ; --bi-bg-elevated: ; --bi-surface: ; --bi-surface-2: ; --bi-surface-card: ; --bi-surface-chip: ; --bi-ink: ; --bi-body: ; --bi-body-strong: ; --bi-muted: ; --bi-muted-2: ; --bi-chip-text: ; --bi-frame / --bi-hairline: ; --bi-hairline-2: ; --bi-hover-tint: ; --bi-ghost-border: ; --bi-ghost-border-hover: ; --bi-control-border: ; --bi-ghost-text: ; --bi-primary: var(--bi-book-accent); --bi-primary-hover: var(--bi-book-accent-hover); --bi-on-primary: var(--bi-book-on-accent); --bi-link: = 4.5:1 on bg>; --bi-link-hover: ; --bi-focus-ring: var(--bi-book-accent); --bi-info: ; --bi-info-bg: ; --bi-glow: var(--bi-book-wash); --bi-glow-alt: ; --bi-media-ph: ; --bi-shadow-card: none; --bi-shadow-card-hover: ; --bi-shadow-cta / -hover / -sm: ; --bi-shadow-media: ; --bi-elev-3: ; } ---- */ /* ---- _example = the approved Elijah Mandate palette ---- EXAMPLE ONLY, NOT A TOKEN. Reproduces `BI Elijah Mandate LP/app/globals.css` verbatim — the nine cover colours the LP ships — mapped onto the slots, no re-derivation: ink #0a0e1f → bg · ink-2 #11162b → surface · ink-3 #1a2040 → surface-2 / card · bone #f5efe4 → ink · parchment #ece2cc → body · ember #d9a24e → accent (also focus, primary) · gilt #f0c878 → accent-hover and link · flame-soft #ffb070 → link-hover · flame #ff6a1a → atmosphere. Muted and hairlines are bone at the alphas the LP uses (text-bone/70, border-bone/10). It exists so applications/book-landing-page.html renders and so the contract page has a worked example; a real book never references it. Gate result (contrast.py --book _example): see the contract page §Gates — an approved palette is reported, not altered. */ [data-book="_example"] { --bi-book-accent: #d9a24e; --bi-book-accent-hover: #f0c878; --bi-book-on-accent: #0a0e1f; --bi-book-accent-soft: rgba(217,162,78,0.18); --bi-book-wash: radial-gradient(120% 90% at 82% 18%, rgba(217,162,78,0.16) 0%, rgba(217,162,78,0.05) 34%, transparent 62%), radial-gradient(70% 60% at 12% 100%, rgba(255,106,26,0.12) 0%, transparent 60%), linear-gradient(180deg, #11162b 0%, #0a0e1f 60%, #0a0e1f 100%); --bi-book-atmosphere: #ff6a1a; /* base override · the Elijah Mandate ground */ --bi-bg: #0a0e1f; --bi-bg-1: #11162b; --bi-bg-2: #0a0e1f; --bi-bg-elevated: #11162b; --bi-surface: #11162b; --bi-surface-2: #1a2040; --bi-surface-card: #1a2040; --bi-surface-chip: rgba(245,239,228,0.04); --bi-ink: #f5efe4; --bi-body: #ece2cc; --bi-body-strong: #f5efe4; --bi-muted: rgba(245,239,228,0.70); --bi-muted-2: rgba(245,239,228,0.80); --bi-chip-text: #ece2cc; --bi-frame: rgba(245,239,228,0.10); --bi-hairline: rgba(245,239,228,0.10); --bi-hairline-2: rgba(245,239,228,0.06); --bi-hover-tint: rgba(217,162,78,0.08); --bi-ghost-border: rgba(245,239,228,0.28); --bi-ghost-border-hover: rgba(245,239,228,0.60); --bi-control-border: rgba(245,239,228,0.16); --bi-ghost-text: #f5efe4; --bi-primary: var(--bi-book-accent); --bi-primary-hover: var(--bi-book-accent-hover); --bi-on-primary: var(--bi-book-on-accent); --bi-link: #f0c878; --bi-link-hover: #ffb070; --bi-focus-ring: var(--bi-book-accent); --bi-info: #f0c878; --bi-info-bg: rgba(217,162,78,0.14); --bi-glow: var(--bi-book-wash); --bi-glow-alt: radial-gradient(120% 90% at 14% 18%, rgba(217,162,78,0.14) 0%, rgba(217,162,78,0.04) 34%, transparent 62%), radial-gradient(70% 60% at 88% 100%, rgba(255,106,26,0.10) 0%, transparent 60%), linear-gradient(180deg, #11162b 0%, #0a0e1f 60%, #0a0e1f 100%); --bi-media-ph: linear-gradient(135deg, #1a2040 0%, #11162b 60%, #0a0e1f 100%); --bi-shadow-card: none; --bi-shadow-card-hover: 0 22px 48px -22px rgba(217,162,78,0.45); --bi-shadow-cta: 0 10px 30px -10px rgba(217,162,78,0.65); --bi-shadow-cta-hover: 0 18px 42px -12px rgba(217,162,78,0.80); --bi-shadow-cta-sm: 0 6px 16px -8px rgba(217,162,78,0.55); --bi-shadow-media: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(217,162,78,0.10), inset 0 0 0 1px rgba(245,239,228,0.03); --bi-elev-3: 0 18px 48px -16px rgba(5,5,9,0.75), 0 0 0 1px rgba(217,162,78,0.10); } /* ============================================================================= 3c. PROPERTY SCOPES — sites that carry another identity on the BI system ---------------------------------------------------------------------------- A property is a site that belongs to someone else's identity but runs on the Behold Israel system: the type, spacing, radii, motion and every core component are fixed; what the property owns is its mark and ONE scoped palette, defined only under `[data-property=""]`. It is the show mechanism (§3) with two additions a whole site needs and a show section does not: a text-safe accent step for Paper, and a BASE override that re-maps the semantic surface/ink slots so the light theme reads as the property's own paper rather than Behold Israel's. Outside the scope none of this exists. THE SCOPE IS PER SURFACE, never on or : put the attribute on the header, the drawer, each section and the footer. A Behold Israel band inside the site (the handoff strip) opts out by not carrying it and runs on core; there is no way to un-scope a nested element, so a page-wide scope would have no way back. check_tokens.py fails the build if or carries data-property. Signal Blue is NOT used inside a property scope. The kicker rule, the seam, links, the active nav tint, focus on Paper, the caption dot and the card hover all take the property accent (styleguide/components-property.css). A property scope re-points COLOUR only: accent, ground, ink, hairlines, link, focus, hover. Shape, size, weight, case and spacing are core and are never scoped. Slots per property (one per ground the site uses): --bi-prop-accent the tone: CTA fill, kicker rule, dots, badges --bi-prop-accent-hover hover / pressed step, 4–14 L* away from on-accent --bi-prop-on-accent text on the accent, >= 4.5:1 on accent AND hover --bi-prop-accent-text the accent as TEXT: headline phrase, links, active nav, info. >= 4.5:1 on every property paper. When a property's accent already clears 4.5:1 on its paper, accent-text equals accent (as it does on Night for every property). --bi-prop-accent-soft ~14–16% tint for chips, selected states, hover --bi-prop-wash the --bi-glow recipe with the accent in place of blue --bi-prop-mark-header the property mark's header width (sized by width, never height); --bi-prop-mark-footer the footer / drawer width, the mark's minimum on screen plus the base override (bg, surfaces, ink, hairlines, link, focus, info, media placeholder, card shadows) — the same names the semantic layer uses. Mirrored in tokens.json → property..{dark,light}; checked by broadcasts/_build/check_tokens.py. ============================================================================= */ /* ---- amirtsarfati.com · the deployed site's palette, read off the live DOM ---- Values below were read as COMPUTED styles from https://amirtsarfati.com on 2026-09-20 (the deployed CSS chunk carries the same :root as the repo's app/globals.css). The site is LIGHT ONLY and has two grounds: warm paper (#FAFAF8 page, #F5EFE1 sand sections and card bodies, white cards, tan #D8C9A8 borders, navy #1B2B4B headings, charcoal #2E2E2E body) and NAVY BANDS (#1B2B4B: the nav, the hero, the books shelf, the quote veil, the footer) carrying #FAFAF8 text, the gold as eyebrow/link colour and white cards. Gold #C8973A (hover #b0802f) is the accent on both grounds. The first block is the paper (the bare scope, any [data-theme="light"] context, and a light island inside a band, e.g. the white cards on the navy books shelf); the second is the NAVY BAND: a section that carries data-theme="dark" inside the scope, exactly the way core sections alternate tone. It is not a page-level dark theme — there is none for this property. AA substitutions, kept only where a live text pairing fails 4.5:1: · text ON the gold: live white 2.6:1 → ink #111111 (7.1:1; navy 5.3:1 but 4.0:1 on the hover) · gold AS text on the paper (eyebrows, links, "VISIT"): live 2.3:1 on the sand → same-hue step #8A6520 (4.6:1 sand / 5.1:1 #FAFAF8 / 5.3:1 white). On the navy band gold is 5.3:1 as text, so accent-text = accent there. · the paper's charcoal/60, /50, /40 text (3.7, 2.8, 2.2:1) → /70 (4.9:1); the band's #FAFAF8/50 legal line (4.5:1) → /60 (5.8:1) Everything else is the live value. No radius, size or weight is scoped: components are core. */ [data-property="amirtsarfati"], [data-theme="light"] [data-property="amirtsarfati"], [data-property="amirtsarfati"][data-theme="light"], [data-property="amirtsarfati"] [data-theme="light"] { /* a light island inside a navy band: the white cards on the books shelf */ --bi-prop-accent: #C8973A; /* --color-accent, .btn-primary, chips, discs' icons */ --bi-prop-accent-hover: #b0802f; /* --color-accent-hover */ --bi-prop-on-accent: #111111; /* AA: live white on gold 2.6:1 */ --bi-prop-accent-text: #8A6520; /* AA: live gold text 2.3:1 on the sand */ --bi-prop-accent-soft: rgba(200,151,58,0.10); /* bg-accent/10 */ --bi-prop-wash: linear-gradient(180deg, #FAFAF8 0%, #FAFAF8 100%); /* flat: the site has no glow */ --bi-prop-mark-header: 160px; /* Navbar width={160}; the live footer sizes by height, 120px is the width minimum */ --bi-prop-mark-footer: 120px; /* base override · the paper */ --bi-bg: #FAFAF8; /* body, bg-light sections */ --bi-bg-1: #FAFAF8; --bi-bg-2: #F5EFE1; /* bg-sand sections, card bodies, handoff */ --bi-bg-elevated: #F5EFE1; --bi-surface: #FFFFFF; /* cards */ --bi-surface-2: #F5EFE1; --bi-surface-card: #FFFFFF; --bi-surface-chip: #FFFFFF; --bi-ink: #1B2B4B; /* h2 text-primary */ --bi-body: #2E2E2E; /* body, text-charcoal */ --bi-body-strong: #2E2E2E; /* card h3 */ --bi-muted: rgba(46,46,46,0.70); /* text-charcoal/70 (card copy) */ --bi-muted-2: rgba(46,46,46,0.80); /* text-charcoal/80 (about bullets) */ --bi-chip-text: #2E2E2E; --bi-frame: #D8C9A8; /* border-border */ --bi-hairline: #D8C9A8; --bi-hairline-2: rgba(216,201,168,0.50); /* border-border/50 */ --bi-hover-tint: rgba(200,151,58,0.10); /* hover:bg-accent/10 */ --bi-ghost-border: rgba(200,151,58,0.60); /* .btn-secondary */ --bi-ghost-border-hover: #C8973A; --bi-control-border: #D8C9A8; --bi-ghost-text: #8A6520; /* AA: .btn-secondary gold label */ --bi-link: #8A6520; /* AA: text-accent links */ --bi-link-hover: #6E501A; /* AA: hover #b0802f is 3.1:1 */ --bi-focus-ring: #8A6520; /* AA: ring-accent 2.3:1 vs sand */ --bi-info: #8A6520; --bi-info-bg: rgba(200,151,58,0.10); --bi-glow: var(--bi-prop-wash); --bi-glow-alt: linear-gradient(180deg, #F5EFE1 0%, #F5EFE1 100%); /* bg-sand, flat */ --bi-media-ph: linear-gradient(135deg, #F5EFE1 0%, #FAFAF8 60%, #FFFFFF 100%); --bi-shadow-card: 0 2px 20px rgba(27,43,75,0.08); /* --shadow-card */ --bi-shadow-card-hover: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10); /* hover:shadow-lg */ } /* NAVY BAND · a section, header or footer carrying data-theme="dark" inside the scope */ [data-property="amirtsarfati"][data-theme="dark"], [data-property="amirtsarfati"] [data-theme="dark"] { --bi-prop-accent: #C8973A; /* 5.3:1 on the navy */ --bi-prop-accent-hover: #b0802f; --bi-prop-on-accent: #111111; /* AA: live white on gold 2.6:1 */ --bi-prop-accent-text: #C8973A; /* eyebrows, footer heads and BI link: live */ --bi-prop-accent-soft: rgba(200,151,58,0.16); --bi-prop-wash: linear-gradient(180deg, #1B2B4B 0%, #1B2B4B 100%); /* bg-primary, flat */ --bi-prop-mark-header: 160px; --bi-prop-mark-footer: 120px; /* base override · the navy */ --bi-bg: #1B2B4B; /* bg-primary: nav, hero, books, footer */ --bi-bg-1: #1B2B4B; --bi-bg-2: #1B2B4B; --bi-bg-elevated: #1B2B4B; --bi-surface: #FFFFFF; /* white cards on the navy */ --bi-surface-2: #1B2B4B; /* the mobile drawer panel */ --bi-surface-card: #FFFFFF; --bi-surface-chip: rgba(250,250,248,0.10); /* .btn-secondary's white/10 fill */ --bi-ink: #FAFAF8; /* h1, h2, nav links (text-light) */ --bi-body: #F5EFE1; /* hero subtitle (text-sand) */ --bi-body-strong: #FAFAF8; --bi-muted: rgba(250,250,248,0.60); /* text-light/60 trust line · 5.8:1 (the /50 legal line fails, takes this) */ --bi-muted-2: rgba(250,250,248,0.70); /* text-light/70 footer links · 7.4:1 */ --bi-chip-text: #FAFAF8; --bi-frame: rgba(250,250,248,0.10); /* border-light/10 footer rule */ --bi-hairline: rgba(250,250,248,0.10); --bi-hairline-2: rgba(250,250,248,0.06); --bi-hover-tint: rgba(250,250,248,0.06); --bi-ghost-border: rgba(250,250,248,0.40); /* hero secondary: border-light/40 */ --bi-ghost-border-hover: #C8973A; /* hover:border-accent */ --bi-control-border: rgba(250,250,248,0.16); --bi-ghost-text: #FAFAF8; /* hero secondary: text-light */ --bi-link: #C8973A; /* footer "Behold Israel →" */ --bi-link-hover: #E2B75E; /* hover:text-accent/80 lifts; accent-light keeps 4.5:1+ */ --bi-focus-ring: #FAFAF8; --bi-info: #C8973A; --bi-info-bg: rgba(200,151,58,0.16); --bi-glow: var(--bi-prop-wash); --bi-glow-alt: linear-gradient(180deg, #1B2B4B 0%, #1B2B4B 100%); --bi-media-ph: linear-gradient(135deg, #1B2B4B 0%, #16223c 60%, #10192c 100%); --bi-shadow-card: none; --bi-shadow-card-hover: 0 10px 15px -3px rgba(0,0,0,0.30), 0 4px 6px -4px rgba(0,0,0,0.30); }