/* ═══════════════════════════════════════════════════════════════════════ Flow Design System — Layer 2 (Brand Tokens) ───────────────────────────────────────────────────────────────────── References Layer 1 (Open Props) where applicable. Defines --flow-* tokens consumed by Layer 3 (flow_components.css). Add tokens here as new components need them — do not add tokens without at least one consumer. Spec: docs/superpowers/specs/2026-04-26-flowvue-ui-integration-design.md ═══════════════════════════════════════════════════════════════════════ */ /* ── Self-hosted brand fonts (issue #816) ───────────────────────────────── Replaces Google-hosted fonts (the tags come out in the follow-up PR that depends on these files): the widget CSP is `default-src 'self'` (no font-src, style-src has no external host), so a cross-origin font request is blocked (console CSP violation, no visible error) and every guest-facing surface fell back to system fonts. Self-hosting also drops a third-party network call that would otherwise leak a guest's IP to Google on every page load. Files live in priv/static/fonts/ (see FlowstayWeb.static_paths/0 and the endpoint's Plug.Static config) - see priv/static/fonts/README.md for source URLs, license (SIL OFL 1.1), and the subsetting rationale. Variable fonts (one file per style covers the whole weight range), latin subset only (unicode-range below covers U+00A1/U+00BF, so Spanish ¿/¡ and ñ/á/etc. render correctly). font-weight is a range so the browser can interpolate any requested weight from the single variable file. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/cormorant-garamond-latin-var-ec4225ec161bd5285480b6b197e10b2b.woff2?vsn=d') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/fonts/cormorant-garamond-latin-var-italic-b0fa095eb2a6dcb5c16b01bd4497711c.woff2?vsn=d') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/fonts/dm-sans-latin-var-aef1c6b4d4a340241e022ca547e075ac.woff2?vsn=d') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap; src: url('/fonts/dm-sans-latin-var-italic-5c48ab319348b7410b2823400885cbf0.woff2?vsn=d') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Sacramento is a single-weight script face; do not set a weight range. */ @font-face { font-family: 'Sacramento'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sacramento-latin-3f8a9f93af4d2a7206b0a312c53aedd5.woff2?vsn=d') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fonts/jetbrains-mono-latin-var-782150e6836b9b074d1a798807adcb18.woff2?vsn=d') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 100 800; font-display: swap; src: url('/fonts/jetbrains-mono-latin-var-italic-93846c447740f3184e7d94d45908c624.woff2?vsn=d') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── Brand colors ──────────────────────────── */ --flow-gold: #d4a853; --flow-bg: #0a0a0f; /* ── Gold alpha stops (added for button.ex — Task 12) ─── */ --flow-gold-a08: rgba(212, 168, 83, 0.08); --flow-gold-a12: rgba(212, 168, 83, 0.12); --flow-gold-a30: rgba(212, 168, 83, 0.30); --flow-gold-a40: rgba(212, 168, 83, 0.40); --flow-gold-a60: rgba(212, 168, 83, 0.60); /* Warm gold-tinted text (added for speak_pill — Task 12) */ --flow-gold-ink: #d4c5a0; --flow-gold-ink-50: rgba(212, 197, 160, 0.50); /* ── Ink (text on dark) ────────────────────── */ --flow-ink: rgba(255, 255, 255, 0.92); --flow-ink-2: rgba(255, 255, 255, 0.85); --flow-ink-3: rgba(255, 255, 255, 0.40); /* Additional white-alpha stops (added for button.ex — Task 12) */ --flow-ink-7: rgba(255, 255, 255, 0.70); /* Dim de-emphasis stop for fine print (added for casino walkthrough — galeon) */ --flow-ink-6: rgba(255, 255, 255, 0.60); --flow-ink-30: rgba(255, 255, 255, 0.30); /* Pure-white ink + active-dot stop (added for room_hero.ex — Task 19) */ --flow-ink-pure: #fff; --flow-ink-90: rgba(255, 255, 255, 0.90); /* ── Surface fills (transparent layers — Task 12) ─── */ --flow-surface-glass-06: rgba(255, 255, 255, 0.06); /* 0.08 stop added 2026-05-05 — two card backgrounds (.fs-flow-booking-held-card, .fs-flow-confirmation-card) reference this token; without it they fell back to inline rgba literals, leaking implementation values out of the token system. */ --flow-surface-glass-08: rgba(255, 255, 255, 0.08); --flow-surface-glass-10: rgba(255, 255, 255, 0.10); --flow-surface-glass-14: rgba(255, 255, 255, 0.14); /* ── Danger (added for action_circle danger variant — Task 12) ─── */ --flow-danger: #ff3b30; --flow-danger-shadow: rgba(255, 59, 48, 0.35); /* Hover stop for the muted mic button: keeps the white glyph ~9.4:1. */ --flow-danger-shadow-strong: rgba(255, 59, 48, 0.5); /* ── Live indicator (added for Task 7: live_chip) ─── */ --flow-live-green: #4ade80; --flow-live-green-25: rgba(74, 222, 128, 0.25); --flow-live-green-60: rgba(74, 222, 128, 0.60); --flow-bg-chip-dark: rgba(0, 0, 0, 0.30); /* ── Waveform speakers (added 2026-05-05 for layer-discipline lint) ─── */ --flow-guest-blue: #60a5fa; /* ── Spacing (added for button.ex — Task 12) ─── */ --flow-space-1: 4px; --flow-space-2: 8px; --flow-space-3: 12px; --flow-space-4: 16px; --flow-space-5: 20px; /* ── Typography ─────────────────────────────── */ --flow-font-display: 'Cormorant Garamond', Georgia, serif; --flow-font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --flow-font-script: 'Sacramento', cursive; /* ── Motion — durations ─────────────────────── */ --flow-dur-sm: 250ms; --flow-dur-md: 350ms; --flow-dur-pulse: 2000ms; /* Check-draw on-draw duration (added for check_draw.ex — Task 16) */ --flow-dur-draw: 800ms; /* ── Stroke widths (added for check_draw.ex — Task 16) ─── */ --flow-stroke-w: 1.5px; --flow-stroke-w-md: 2px; /* ── Motion — easings (link to Open Props where available) ─── */ --flow-ease-out: var(--ease-out-3); --flow-ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* ── Radii ──────────────────────────────────── */ --flow-r-pill: 20px; --flow-r-pill-lg: 50px; --flow-r-card: 10px; --flow-r-dot: 50%; /* ── macOS window controls (added for traffic_dots.ex) ── */ --flow-mac-red: #FF5F57; --flow-mac-yellow: #FFBD2E; --flow-mac-green: #28C840; /* ── Gradients (added for room_hero.ex — Task 19) ─── */ /* Bottom-up dark fade used for legibility behind hero text. */ --flow-gradient-hero-fade: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%); /* ── Scrims ──────────────────────────────────── Flat blue-navy tint used over warm hotel photography so centered text reads against any image. Lifted verbatim from the canonical design system (`colors_and_type.css` README §Backgrounds & Imagery). Single consumer today: .fs-grid-tile-tint. */ --flow-scrim-photo-navy: rgba(20, 30, 50, 0.38); /* ── Gold deep stop ──────────────────────────── The darker, less saturated companion stop in the canonical 135° gold gradient (gold-a15 → gold-deep-a10) used on the primary speak/chooser pill body. Spec value `rgba(180,140,60,.10)` lifted verbatim from `_components.css §.fv-pill--gold`. Consumer: .fs-chooser-opt.voice. */ --flow-gold-deep-a10: rgba(180, 140, 60, 0.10); --flow-gold-deep-a18: rgba(180, 140, 60, 0.18); /* ── Text shadows (added for room_hero.ex — Task 19) ─── */ /* Used to lift text off photographic backgrounds. */ --flow-shadow-text-strong: 0 1px 8px rgba(0, 0, 0, 0.60); --flow-shadow-text-soft: 0 1px 4px rgba(0, 0, 0, 0.50); /* ── Widget surfaces (added for widget_live.ex — Task 22) ─── */ /* Layered dark-mode panel backgrounds. --flow-bg is the deepest base; the elevated/soft/deep stops layer on top for the side panel, hero placeholder, inactive disc, etc. */ --flow-bg-deep: #111; --flow-bg-elevated: #1a1a1a; --flow-bg-soft: #2a2a2a; --flow-border-soft: #2a2a2a; /* Mid-gray inks for secondary copy on widget panels. */ --flow-ink-strong: #e0e0e0; --flow-ink-soft: #888; --flow-ink-faint: #64748b; --flow-ink-dim: #444; /* Failure/danger status. */ --flow-danger-bright: #ef5350; --flow-danger-surface: #1a0a0a; /* Banner-strength danger surface stops (added 2026-05-06 for error_banner.ex). The existing -surface (#1a0a0a) and -tint (#2a1a1a) are subtle backgrounds; -rich is louder, intended for floating alert banners that must read at a glance. Single consumer today: .fs-error-banner. */ --flow-danger-rich: #3b1818; --flow-danger-ink: #ffd1d1; --flow-danger-line: #b14545; /* Connecting / speaking orb tints — green-tinted dark surface. */ --flow-success-tint: #1a2a1a; --flow-danger-tint: #2a1a1a; /* Widget layout sizing. */ --flow-widget-voice-w: 320px; --flow-widget-voice-min-w: 280px; --flow-widget-orb-size: 80px; --flow-widget-hero-h: 50vh; /* Generic widget UI font stack. The display panel keeps system fonts to match host-page chrome rather than using --flow-font-display/ui. */ --flow-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ═══════════════════════════════════════════════════════════════════════ Migrated from flowvue_tokens.css (2026-05-05 — Task #9a) Added during the .fs-/.fv- two-prefix → single-prefix collapse. Value-conflict tokens get NEW names rather than blind-renaming: --fv-ease-out (cubic-bezier(.22,1,.36,1)) → --flow-ease-out-snappy (NOT --flow-ease-out which resolves to Open Props' standard cubic-bezier(0,0,0,1) — different curve character) --fv-ink-2 (rgba(255,255,255,.65)) → --flow-ink-65 (NOT --flow-ink-2 which is .85) --fv-ink-4 (rgba(255,255,255,.20)) → --flow-ink-20 Identical-value --fv-* tokens map to existing --flow-* directly via the value-equality map in the migration spec. ═══════════════════════════════════════════════════════════════════════ */ /* ── Status colors ──────────────────────────── */ --flow-di-orange: #ff9500; /* ── Surface backgrounds ────────────────────── */ --flow-bg-laptop: #111; --flow-bg-browser: #1e1e26; --flow-modal-bg: rgba(10, 10, 16, 0.42); --flow-overlay-scrim: rgba(0, 0, 0, 0.40); /* ── Additional gold alpha stops ────────────── */ --flow-gold-a06: rgba(212, 168, 83, 0.06); --flow-gold-a10: rgba(212, 168, 83, 0.10); --flow-gold-a14: rgba(212, 168, 83, 0.14); --flow-gold-a15: rgba(212, 168, 83, 0.15); --flow-gold-a16: rgba(212, 168, 83, 0.16); --flow-gold-a18: rgba(212, 168, 83, 0.18); --flow-gold-a20: rgba(212, 168, 83, 0.20); --flow-gold-a25: rgba(212, 168, 83, 0.25); --flow-gold-a28: rgba(212, 168, 83, 0.28); --flow-gold-a34: rgba(212, 168, 83, 0.34); --flow-gold-a45: rgba(212, 168, 83, 0.45); --flow-gold-a50: rgba(212, 168, 83, 0.50); --flow-gold-a55: rgba(212, 168, 83, 0.55); --flow-gold-a80: rgba(212, 168, 83, 0.80); --flow-gold-a95: rgba(212, 168, 83, 0.95); /* ── Explore-modal palette (§11.2-036) ────────── Cool slate surfaces + a brighter "champagne" gold accent. Scoped onto .fs-explore-* in flow_components.css (the global gold above is untouched). The aXX variants mirror --flow-gold-aXX so scoped `var(--flow-gold-aXX)` references re-point to champagne and all explore accents stay in sync. */ /* Frosted glass, not a slab. .fs-explore-detail already declares backdrop-filter: blur(30px) saturate(125%); at the original 0.96 alpha that blur contributed ~4% of visible pixels and the sheet read as flat black. Note this fill stacks on TOP of .fs-explore-overlay's own rgba(10,10,15,0.4) scrim, so transmitted light is the product of both: at 0.30 roughly 42% of the backdrop reaches the eye, vs 34% at 0.43, 23% at 0.62, 2% at 0.96. 2026-08-06: alpha cut 30% (0.43 -> 0.30) alongside a matching 30% cut to the blur (30px -> 21px) in flow_components.css, per Eric. If the sheet still reads too dark, the next lever is that overlay scrim, not this token. 2026-08-08: pulled BOTH levers, per Eric ("less tint, more translucent, less blur"). This token 0.30 -> 0.18, and the .fs-explore-overlay scrim 0.40 -> 0.22. Transmission is the product, so it goes 42% -> ~64%: the single largest jump in the series, and most of it comes from the scrim, which was the dominant darkener all along. Blur cut alongside it, 21px -> 14px here and 8px -> 5px on the scrim, and saturate 125% -> 115% so the backdrop's own color drives the tint instead of the fill. Watch .fs-explore-detail-highlight-desc if this goes further: 11.5px text is the first thing to fall under AA over a bright hero photo. PROVENANCE 2026-08-09: the narrative above is vc-demo's, ported here in a single step (0.96 -> 0.18). home-v2 never sat at 0.62/0.43/0.30; those values are kept because they record WHY 0.18 is the answer, not history this branch lived through. Asserted by run_glass_port_check.mjs. 2026-08-13 (Codex ZHGWw, #1488): this token travels WITH its companion .fs-explore-overlay / .fs-explore-detail rules in flow_components.css, so it lives in the glass PR, not the home PR - a token-only port left explore darker and over-blurred than the surface being asserted. 2026-09-29 (explore v3 Postcard, glass option A, per Eric "A for sure" after a real-photo A/B): the glass series is closed. The sheet goes near-solid #141414 at 0.94 over a 0.45 scrim, transmission ~3%. The card got bigger, so the photo now carries the colour and the text column needs a quiet, readable ground rather than the scene bleeding through. */ --flow-explore-surface: rgba(32, 30, 28, 0.94); /* .fs-explore-detail sheet (option A, warm #201E1C, 2026-09-29) */ --flow-explore-card: rgba(18, 22, 33, 0.72); /* no consumer since .fs-explore-card was deleted; the glass check pins it */ --flow-gold-champagne: #e6c97a; --flow-gold-champagne-top: #ecd089; /* Book CTA gradient top */ --flow-gold-champagne-bot: #d8b25e; /* Book CTA gradient bottom */ --flow-gold-champagne-ink: #241a08; /* dark text on the gold fill */ --flow-gold-champagne-glow: rgba(230, 201, 122, 0.38); --flow-gold-champagne-glow-strong: rgba(230, 201, 122, 0.58); --flow-gold-champagne-a08: rgba(230, 201, 122, 0.08); --flow-gold-champagne-a16: rgba(230, 201, 122, 0.16); --flow-gold-champagne-a28: rgba(230, 201, 122, 0.28); --flow-gold-champagne-a34: rgba(230, 201, 122, 0.34); --flow-gold-champagne-a45: rgba(230, 201, 122, 0.45); /* ── Ink stops (collision-safe naming) ──────── */ /* --flow-ink-2 (.85) and --flow-ink-3 (.40) already exist. The legacy --fv-ink-2 was .65 and --fv-ink-4 was .20 — both unique values that would collide if blind-renamed. Naming by opacity number resolves it. */ --flow-ink-65: rgba(255, 255, 255, 0.65); --flow-ink-20: rgba(255, 255, 255, 0.20); /* ── Tints / lines (white-alpha surface stops) ── */ /* --flow-surface-glass-06/10/14 already cover .06/.10/.14 stops; the names here mirror the legacy --fv-tint*/--fv-line* terminology for migration ergonomics. Where values collide they alias to the existing tokens. */ --flow-tint: rgba(255, 255, 255, 0.04); --flow-tint-2: var(--flow-surface-glass-06); /* .06 — alias */ --flow-tint-3: rgba(255, 255, 255, 0.08); --flow-line: var(--flow-surface-glass-10); /* .10 — alias */ --flow-line-2: rgba(255, 255, 255, 0.12); /* Restore upstream 0.15 alpha — the temporary alias to --flow-surface-glass-14 (= 0.14) drifted the modal frame border down 1% during the Task #9 collapse. Direct rgba keeps the value explicit; --flow-line-3 has no equivalent --flow-surface-glass stop because nothing else needs 0.15. */ --flow-line-3: rgba(255, 255, 255, 0.15); /* ── Mono font (added for --fv-font-mono migration) ─── */ --flow-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* ── Typographic scale ──────────────────────── */ --flow-fs-script: 20px; --flow-fs-display: 20px; --flow-fs-modal: 18px; --flow-fs-verb: 14px; --flow-fs-body: 13px; --flow-fs-body-sm: 11px; --flow-fs-meta: 10px; --flow-fs-label: 9px; /* ── Tracking / leading ─────────────────────── */ --flow-tracking-caps: 0.14em; --flow-tracking-label: 0.12em; --flow-lh-tight: 1.1; --flow-lh-body: 1.5; /* ── Motion — additional durations ──────────── */ --flow-dur-xs: 200ms; --flow-dur-xl: 600ms; /* ── Motion — easings ──────────────────────────────────────────────── CRITICAL: --flow-ease-out-snappy is NOT a rename of --flow-ease-out. The legacy --fv-ease-out used cubic-bezier(.22,1,.36,1) — a snappy- but-graceful curve favored for modal entrances. The existing --flow-ease-out resolves to Open Props' --ease-out-3 (cubic-bezier(0,0,0,1)), a different curve. Routing every var(--fv-ease-out) reference to --flow-ease-out-snappy preserves the visual character. */ --flow-ease-out-snappy: cubic-bezier(.22, 1, .36, 1); --flow-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ── Radii ──────────────────────────────────── */ --flow-r-xs: 5px; --flow-r-pay: 12px; --flow-r-modal: 16px; /* ── Intrinsic-grid floors ────────────────────── Minimum track width for auto-fit card grids, used as `minmax(min(100%, var(--flow-grid-card-min)), 1fr)`. The `min(100%, …)` wrapper lets auto-fit collapse to ONE column when the container is narrower than the floor instead of overflowing. Single consumer today: .fs-comparison-grid (wrap-safe replacement for its minmax(0,1fr) zero floor, which clipped instead of wrapping). 2026-06-02 mobile-reflow. */ --flow-grid-card-min: 240px; /* ── Shadows ────────────────────────────────── */ --flow-shadow-button: 0 8px 28px rgba(0, 0, 0, 0.4); --flow-shadow-chooser: 0 4px 20px var(--flow-gold-a10); --flow-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.5); --flow-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.2); --flow-shadow-dot-glow: 0 0 6px var(--flow-gold-a60), 0 0 12px var(--flow-gold-a30); /* ── Z-index ────────────────────────────────── */ --flow-z-scene: 80; --flow-z-overlay: 120; --flow-z-modal: 150; --flow-z-status: 400; /* ═══════════════════════════════════════════════════════════════════════ Semantic aliases (Risk #3 — Task #9a) The original flowvue_tokens.css had 13 bare-name aliases (--fg-1, --bg, --accent, etc.) consumed throughout flowvue_components.css. To avoid silent fallback-to-`initial` when flowvue_tokens.css is deleted, we re-prefix them as --flow-* AND keep the bare names as forward aliases pointing at the new --flow-* names. Migration plan: Task #9c rewrites consumers to use --flow-* prefixed names. Task #9c can then delete the bare-name aliases below in a follow-up commit once `git grep "var(--fg-\|var(--bg)\|var(--accent\|var(--success)\|var(--link)\|var(--danger)\|var(--warning)"` returns zero hits. ═══════════════════════════════════════════════════════════════════════ */ --flow-fg-1: var(--flow-ink); --flow-fg-2: var(--flow-ink-65); --flow-fg-3: var(--flow-ink-3); --flow-fg-muted: var(--flow-ink-20); --flow-bg-elev: var(--flow-bg-browser); --flow-accent: var(--flow-gold); --flow-accent-warm: var(--flow-gold-ink); --flow-accent-soft: var(--flow-gold-a15); --flow-success: var(--flow-live-green); --flow-link: var(--flow-guest-blue); --flow-warning: var(--flow-di-orange); /* --flow-danger and --flow-bg already exist above with matching values. */ /* Bare-name forward aliases — kept until consumers are migrated. */ --fg-1: var(--flow-fg-1); --fg-2: var(--flow-fg-2); --fg-3: var(--flow-fg-3); --fg-muted: var(--flow-fg-muted); --bg: var(--flow-bg); --bg-elev: var(--flow-bg-elev); --accent: var(--flow-accent); --accent-warm: var(--flow-accent-warm); --accent-soft: var(--flow-accent-soft); --success: var(--flow-success); --link: var(--flow-link); --danger: var(--flow-danger); --warning: var(--flow-warning); } /* ═══════════════════════════════════════════════════════════════════════ HOME V2 (S1 LIFT). The only :root addition the tested home-v2 prototype makes, lifted verbatim from its