/** * BLADE BOSS — DESIGN TOKENS v2 * One file, every surface. The P4 token contract (signed D-225, rulings D-224), built in P5 step 1 (D-298). * * 1. CONTRACT, light — the app's :root set (app.css v4) verbatim, plus the three accepted names * (--brand-ink, --warm-fg, --danger-soft). The light set lives on :root, so a page * with no data-theme attribute is light. * 2. CONTRACT, dark — the same names under [data-theme="dark"] (from signup v4's --sg-* family). * 3. SITE — the public site's own tokens, --site- prefix, light and dark. Never an app name. * 4. SHAPE + MOTION — theme-neutral, the app's verbatim. * 5. LEGACY (v1) — every name the site used before v2, with its exact v1 value, so every page that * hasn't moved onto the contract renders exactly as it did. Frozen: these do NOT * follow the theme. Each page drops them when it is rebuilt; the block is deleted * when the last page has moved (target: the end of the 2027 season). * * D-299 (Chris + LMP, Oct 25): dark depth steps, a custom green in place of stock emerald, a real deep band, * no headline glow. * * Theme: is printed only on pages rebuilt on the contract (their registry * entry carries 'theme'). The pre-paint head script applies the person's choice (ui.theme for members, * localStorage "bb-theme" for guests). The phone's own setting is never read (D-203): no prefers-color-scheme. * * Rules (P4 §7): the site adds, never redefines, an app token. #F57842 is a fill, never text; the text on it * is --warm-fg. One shared file: LMP owns it, SITE proposes changes. */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1 · CONTRACT, LIGHT (app.css v4 :root, verbatim + 3 accepted names) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { color-scheme: light; /* ground and surfaces */ --bg: #EEF2EE; --surface: #FFFFFF; --surface-2: #F3F6F3; --surface-3: #E6ECE7; --line: rgba(14, 40, 22, 0.08); --line-2: rgba(14, 40, 22, 0.14); --glass: rgba(255, 255, 255, 0.72); --glass-edge: rgba(255, 255, 255, 0.9); --scrim: rgba(10, 26, 16, 0.36); /* ink */ --ink: #0E1D14; --ink-2: #536359; --ink-3: #8B988F; /* R1: large text and non-text only in light */ /* brand and action */ --brand: #1E5E34; /* fill; always white text (R6) */ --brand-2: #2A7A48; --brand-soft: rgba(30, 94, 52, 0.09); --brand-ink: #1E5E34; /* green as text (accepted, D-224) */ --blade: #23A55E; /* fill and icon green (R5) */ --blade-soft: rgba(35, 165, 94, 0.13); /* warm (orange) */ --warm: #F57842; /* fill and badge only, never text */ --warm-fg: #0E1D14; /* the text on every orange fill (R4, D-224) */ --warm-ink: #A8441A; /* orange as text (R2); D-315: was #BE4E1B, now 4.5:1 on every light surface incl. tints */ --warm-soft: rgba(245, 120, 66, 0.13); /* status and data */ --est-soft: #FFF4CC; --est-ink: #7A5A00; --water: #2F7FD0; /* large text or icon (R3) */ --water-soft: rgba(47, 127, 208, 0.12); --soil: #B07A2A; /* large text or icon (R3) */ --soil-soft: rgba(176, 122, 42, 0.13); --violet: #7C5CC4; --violet-soft: rgba(124, 92, 196, 0.12); --danger: #B23A27; /* D-315: was #C2412D, now 4.5:1 on every light surface */ --danger-soft: rgba(194, 65, 45, 0.12); /* accepted, D-224 */ /* depth and toast */ --sh-1: 0 1px 2px rgba(14, 40, 22, 0.05), 0 8px 22px -10px rgba(14, 40, 22, 0.14); --sh-2: 0 2px 6px rgba(14, 40, 22, 0.06), 0 22px 48px -18px rgba(14, 40, 22, 0.28); --sh-btn: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 10px 22px -10px rgba(30, 94, 52, 0.75); --toast-bg: #0E1D14; --toast-fg: #F2F7F3; --toast-accent: #5BD493; /* type (D-211): the app's faces; site CSS reads --site-font-* and never these two */ --font-disp: "Instrument Sans", "Instrument Sans Fallback", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --font-num: "Barlow Semi Condensed", "Barlow Semi Condensed Fallback", ui-rounded, -apple-system, system-ui, sans-serif; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 2 · CONTRACT, DARK (same names) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0E151D; --surface: #16212D; --surface-2: #1B2836; --surface-3: #22303F; --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.16); --glass: rgba(22, 33, 45, 0.62); --glass-edge: rgba(255, 255, 255, 0.12); --scrim: rgba(0, 0, 0, 0.60); --ink: #FFFFFF; --ink-2: rgba(255, 255, 255, 0.72); --ink-3: rgba(255, 255, 255, 0.50); --brand: #1E5E34; --brand-2: #2A7A48; --brand-soft: rgba(91, 212, 147, 0.12); --brand-ink: #5BD493; --blade: #2FBF71; --blade-soft: rgba(47, 191, 113, 0.16); --warm: #F57842; --warm-fg: #0E1D14; --warm-ink: #FFA678; --warm-soft: rgba(245, 120, 66, 0.16); --est-soft: rgba(240, 200, 80, 0.16); --est-ink: #E8C766; --water: #6FAFE8; --water-soft: rgba(111, 175, 232, 0.14); --soil: #CE9A4F; --soil-soft: rgba(206, 154, 79, 0.16); --violet: #B39DEA; --violet-soft: rgba(179, 157, 234, 0.14); --danger: #F87171; --danger-soft: rgba(248, 113, 113, 0.16); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 22px -10px rgba(0, 0, 0, 0.50); --sh-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 22px 48px -18px rgba(0, 0, 0, 0.65); --toast-bg: #ECF2EC; --toast-fg: #0E1D14; --toast-accent: #1E5E34; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3 · SITE (--site- prefix; light, then dark) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { --site-bg-deep: #DCE6DA; /* the band, the footer */ --site-glass-2: rgba(255, 255, 255, 0.66); --site-hl-glow: 0 0 0 transparent; --site-glow: 0 0 80px rgba(30, 94, 52, 0.10); --site-warm-press: #E86A2E; --site-plate: rgba(10, 15, 21, 0.78); /* labels over photos and canvas: not themed */ --site-plate-ink: #FFFFFF; --site-ghost: rgba(14, 40, 22, 0.05); /* the big section words */ --site-ghost-stroke: rgba(14, 40, 22, 0.13); --site-chart-svc: #2E63B0; --site-chart-bag: #0E8A60; --site-chart-plan: #6E4FC4; --site-chart-svc-t: rgba(46, 99, 176, 0.2); --site-chart-bag-t: rgba(14, 138, 96, 0.2); /* type (D-211) */ --site-font-disp: "Montserrat", "Montserrat Fallback", -apple-system, system-ui, sans-serif; --site-font-body: "Open Sans", "Open Sans Fallback", -apple-system, system-ui, sans-serif; --site-w-disp: 900; --site-track-disp: -0.03em; /* layout */ --site-max: 1180px; --site-gut-l: max(18px, env(safe-area-inset-left, 0px)); --site-gut-r: max(18px, env(safe-area-inset-right, 0px)); --site-nav-h: calc(74px + env(safe-area-inset-top, 0px)); } :root[data-theme="dark"] { --site-bg-deep: #070A0E; /* D-299: a real deep band (the brand navy was 1.02:1 against the ground) */ --site-glass-2: rgba(22, 33, 45, 0.55); --site-hl-glow: 0 0 0 transparent; /* D-299: the headline glow goes */ --site-glow: 0 0 80px rgba(30, 94, 52, 0.18); --site-ghost: rgba(255, 255, 255, 0.045); --site-ghost-stroke: rgba(255, 255, 255, 0.11); --site-chart-svc: #4F7FC9; --site-chart-bag: #0FA876; --site-chart-plan: #9A7BE0; --site-chart-svc-t: rgba(79, 127, 201, 0.26); --site-chart-bag-t: rgba(15, 168, 118, 0.26); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 4 · SHAPE + MOTION (theme-neutral, the app's verbatim) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { --r-card: 26px; --r-ctl: 16px; --gutter: 18px; --tabbar-h: 66px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --dur-xs: 140ms; --dur-s: 220ms; --dur-m: 360ms; --dur-l: 520ms; --ease-out: cubic-bezier(.2, .8, .2, 1); /* the app's; the site adopts it (D-224) */ --ease-io: cubic-bezier(.65, 0, .35, 1); --spring-press: cubic-bezier(.3, 1.15, .5, 1); --spring-card: cubic-bezier(.34, 1.3, .64, 1); --spring-sheet: cubic-bezier(.32, 1.18, .4, 1); --spring: var(--spring-card); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 5 · LEGACY (v1), FROZEN — exact v1 values, never themed Every page not yet rebuilt on the contract reads only these, so it renders exactly as before. Removed name by name as pages move; the block goes when the last page has moved. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { /* ━━━ Brand Colors ━━━ */ --bb-green: #1E5E34; --bb-green-light: #2A7A48; --bb-green-dark: #0A2818; --bb-green-muted: #87A96B; --bb-green-mint: #E8F5E9; --bb-green-bright: #10B981; --bb-mint: #E8F5E9; /* alias → same as --bb-green-mint (legacy compat) */ --bb-orange: #F57842; --bb-high-vis-orange: var(--bb-orange); /* legacy alias — used in blog CTAs + dashboard */ --bb-orange-hover: #E86A2E; --bb-orange-active: #D95F28; --bb-orange-glow: rgba(245, 120, 66, 0.3); --bb-orange-subtle: rgba(245, 120, 66, 0.08); --bb-navy: #0A0F15; --bb-navy-light: #131B26; /* ━━━ Neutrals ━━━ */ --bb-white: #FFFFFF; --bb-off-white: #F9F9F7; --bb-snow: #FAFAFA; --bb-smoke: #F5F5F5; --bb-ash: #E0E0E0; --bb-light-gray: #ECECEC; --bb-mid-gray: #9A9A9A; --bb-charcoal: #1A1A1A; --bb-black: #000000; /* ━━━ Semantic ━━━ */ --bb-success: var(--bb-green-bright); --bb-error: #EF4444; --bb-warning: #F59E0B; --bb-info: #3B82F6; /* ━━━ Glassmorphism ━━━ */ --bb-glass-bg: rgba(255, 255, 255, 0.05); --bb-glass-border: rgba(255, 255, 255, 0.08); --bb-glass-bg-light: rgba(255, 255, 255, 0.85); --bb-glass-border-light: rgba(0, 0, 0, 0.06); /* ━━━ Typography ━━━ */ --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem); --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem); --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem); --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem); --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4rem); /* ━━━ Spacing Scale (8px base) ━━━ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 5rem; --space-14: 6rem; --space-16: 8rem; /* ━━━ Shadows ━━━ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.2); --shadow-glow: 0 0 40px rgba(30, 94, 52, 0.15); --shadow-orange-glow: 0 0 30px rgba(245, 120, 66, 0.2); /* ━━━ Borders ━━━ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ━━━ Easings ━━━ (--ease-out: see the :root:not([data-theme]) rule below the block) */ --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); /* ━━━ Durations ━━━ */ --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; --duration-page: 400ms; /* ━━━ Z-Index Scale ━━━ */ --z-base: 1; --z-above: 10; --z-sticky: 50; --z-nav: 9999; --z-overlay: 10100; --z-modal: 10200; --z-toast: 10300; /* ━━━ Layout ━━━ */ --max-width: 1200px; --max-width-sm: 800px; --max-width-xs: 600px; --content-max: var(--max-width); --page-gutter: clamp(16px, 4vw, 40px); --nav-height: 72px; --nav-height-mobile: 60px; --footer-gap: var(--space-8); /* ━━━ Safe areas ━━━ */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* The one shared name: --ease-out. Contract pages (and the app, which always prints data-theme) use the app's curve (D-224); a page not yet rebuilt has no data-theme and keeps its v1 curve, so it moves exactly as it did. */ :root:not([data-theme]) { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ━━━ Reduced motion (v1, unchanged) ━━━ */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-page: 0ms; } html { scroll-behavior: auto; } }