/* ═══════════════════════════════════════════════════════════════════════ 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 ═══════════════════════════════════════════════════════════════════════ */ :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); /* ── 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; /* ── Brand blue (added 2026-05-06 for /demos index) ──────────────── Vivid marketing-page blue used by the demos index for the "FlowStay" wordmark and card-hover accent. Distinct from --flow-guest-blue (#60a5fa, softer pastel for waveform speakers). The -a08 stop is the badge background + hover-shadow soft glow; the -a40 stop is the hover border. --flow-brand-blue-soft is the badge text — same hue, lifted lightness for legibility on the dark card surface. */ --flow-brand-blue: #008FFF; --flow-brand-blue-a08: rgba(0, 143, 255, 0.08); --flow-brand-blue-a40: rgba(0, 143, 255, 0.40); --flow-brand-blue-soft: #4da6ff; /* ── Demo-index ink ──────────────────────────────────────────────── #666 mid-gray for marketing subtitle text on /demos. Sits between --flow-ink-mid (#999) and --flow-ink-faint (#64748b) — the pre- existing scale didn't cover this stop. Single consumer: .fs-demo-index-header p. */ --flow-ink-meta: #666; /* ── 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%); /* Demos-index card placeholder — shows when a property has no widget_hero_url set. Cool blue-navy gradient evokes water/depth. Single consumer: .fs-demo-index-card-image (no-image fallback). */ --flow-gradient-demo-placeholder: linear-gradient(135deg, #1a2a3a 0%, #0d1b2a 50%, #023452 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. */ --flow-explore-surface: rgba(13, 16, 24, 0.96); /* .fs-explore-detail glass */ --flow-explore-card: rgba(18, 22, 33, 0.72); /* .fs-explore-card glass */ --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); /* Layered hover for demo-index cards: soft brand-blue glow (top layer) + classic black drop shadow (bottom layer). The blue glow signals the brand-accent on hover; the black layer keeps the card grounded against the page. Single consumer: .fs-demo-index-card:hover. */ --flow-shadow-demo-card-hover: 0 12px 32px var(--flow-brand-blue-a08), 0 4px 12px 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); }