/* FWF Apps Design System — Foundation (tokens + base) The brand foundation every FWF app loads: semantic tokens, both themes (dark default + light via [data-fwf-app-theme]), base reset/typography, the focus ring, and the global reduced-motion override. No layout, no components. This file sits under docs/fwf-overarching-design-notes.md and docs/fwfa-app-design-notes.md: keep primitives in --fwf/--fwfa reference roles and expose reusable semantic roles for components to consume. Declares the layer order so à-la-carte includes still cascade correctly. `fwfa.reset` is declared first (lowest priority) so a consuming app can drop its own reset in there — or rely on the minimal one we ship below — instead of an UNLAYERED reset, which beats every layered DS rule regardless of specificity and silently collapses component padding. See docs/fwfa-component-contract.md. */ @layer fwfa.reset, fwfa.tokens, fwfa.base, fwfa.components, fwfa.patterns; /* Minimal global reset, in the lowest layer so it can never override tokens, base, components, or patterns. Ships border-box + a body-margin reset so a consuming app needs NO reset of its own. It deliberately does NOT zero padding or margins on `*`: a consumer's UNLAYERED `* { padding: 0 }` reset is exactly the footgun this guards against (it beats layered rules and collapses e.g. `.fwfa-table td` padding). Need a heavier reset? Put it in a layer BEFORE fwfa.components — this fwfa.reset layer, or your own app layer — never unlayered. */ @layer fwfa.reset { *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } } @layer fwfa.tokens { :root, [data-fwf-app-theme="dark"] { /* Core FWF brand primitives (--fwfa-fwf-*) are GENERATED from the single source (fwf-tokens/source.json) into ./fwfa-primitives.css, which fwf-apps.css imports ahead of this file. Do NOT hand-copy primitive values back in here — that fork is exactly what silently drifts from tokens.css. Edit source.json + run `node fwf-tokens/build.mjs`. The app-only primitives below are not brand tokens (no source.json entry), so they stay hand-authored here. */ /* App-owned navy ramp — NOT general-purpose tokens and NOT the brand navy. This is a deep TEAL ramp (note the zero-red hues) owned by specific apps: 950 #020e15 — FreshVibe deepest + this showcase's body bg 925 #051520 — OE .draft-sidecar background 900/850/800/700 — FreshVibe's navy DEFAULT/light/dark ramp (tailwind.config.ts) For new app chrome reach for --fwfa-shell-bg (calmed brand navy) or the canonical --fwfa-fwf-navy / --fwfa-fwf-muted-blue — never these. Kept (not deleted) only because FreshVibe + OE consume them downstream; retiring the ramp means migrating those apps first. */ --fwfa-app-navy-950: #020e15; --fwfa-app-navy-925: #051520; --fwfa-app-navy-900: #001a24; --fwfa-app-navy-850: #00202e; --fwfa-app-navy-800: #002a39; --fwfa-app-navy-700: #003d52; --fwfa-app-status: #6fab1b; /* Tell the UA which scheme is active so native controls, scrollbars, and form widgets render in kind — consumers shouldn't have to set this themselves. */ color-scheme: dark; /* Semantic colour roles */ /* Dark-mode ground: a deep brand navy (NOT a neutral near-black). The whole app deliberately reads as one navy family — the page, the chrome and every surface are the same hue, separated by lightness/translucency, not by switching hue. This is the deepest step; everything else lifts off it with white-alpha. */ --fwfa-page-bg: #030D1A; --fwfa-page-bg-soft: #0a1626; /* Chrome frame (sidebar gutter, topbar, inset surround). A deepened brand navy that sits one step ABOVE the page ground — a quiet frame around the content, same hue, marginally lighter. Brand navy itself stays untouched for logo/brand moments and the light-theme primary button. */ --fwfa-shell-bg: color-mix(in srgb, var(--fwfa-fwf-navy) 80%, black); --fwfa-shell-bg-muted: rgba(255, 255, 255, 0.02); /* Surfaces lift off the navy ground with neutral white-alpha — no separate hue. Over the navy page these read as lighter navy, which is why the surface story is now a single family. */ --fwfa-surface: rgba(255, 255, 255, 0.02); --fwfa-surface-hover: rgba(255, 255, 255, 0.05); --fwfa-surface-strong: rgba(255, 255, 255, 0.095); /* OPAQUE twin of --fwfa-surface: the flattened result of the 2% white lift baked onto the navy ground (resolves to #08121F). Use it for surfaces that float over other content — modals, popovers, menus, toasts — where a translucent fill would let the content behind bleed through. Tracks --fwfa-page-bg automatically. */ --fwfa-surface-opaque: color-mix(in srgb, var(--fwfa-page-bg) 98%, white); /* Modal/overlay scrim — the dim behind a centred dialog or sheet. Deep-navy at 60% so content reads through faintly; pair with `backdrop-blur` for the full treatment. The `.fwfa-scrim` component uses this; apps on Tailwind get it as `bg-scrim` (was approximated with bg-black/70). Theme-independent: a dark dim works over both themes. */ --fwfa-scrim: rgba(2, 8, 13, 0.6); /* Cards and panels carry NO fill in dark — they sit flat on the navy ground and are defined by their border alone. Light re-points this to the white surface so light cards still lift off the page. */ --fwfa-card-bg: transparent; /* Editable form-control fill (inputs, selects, textareas, menus). A plain 2% white lift over the navy ground — same neutral white-alpha as --fwfa-surface, so forms read as a faint navy well, not a separate hue. No sky tint: over the deep navy page the white-alpha already carries the family. The light theme re-points this to plain white (see below). */ --fwfa-field-bg: rgba(255, 255, 255, 0.02); --fwfa-border: rgba(255, 255, 255, 0.2); --fwfa-border-strong: rgba(255, 255, 255, 0.3); --fwfa-border-faint: rgba(255, 255, 255, 0.045); --fwfa-text: #ffffff; --fwfa-text-soft: #ccd4d7; --fwfa-text-muted: #99aab0; --fwfa-accent: var(--fwfa-fwf-yellow); --fwfa-accent-strong: var(--fwfa-fwf-orange); --fwfa-accent-calm: var(--fwfa-fwf-sky); --fwfa-success: var(--fwfa-fwf-green); --fwfa-warning: var(--fwfa-fwf-yellow); --fwfa-danger: var(--fwfa-fwf-orange); --fwfa-info: var(--fwfa-fwf-sky); /* Theme-aware brand asset. Use `.fwfa-fwf-logo` instead of a raw in app chrome so light mode swaps to the navy-on-light mark automatically. */ --fwfa-fwf-logo: url("/fwfa/fwf-logo-dark.svg"); /* @kind other */ /* FreshVibe product mark — theme-aware like --fwfa-fwf-logo. The ProductMark component / .fwfa-product-mark class read these, so apps never hardcode a freshvibe-*.svg path and light mode swaps automatically. */ --fwfa-product-wordmark: url("/fwfa/freshvibe.ai-on-dark.svg"); /* @kind other */ --fwfa-product-icon: url("/fwfa/freshvibe-favicon-dark.svg"); /* @kind other */ /* Terminal — the embedded xterm / tool-call console palette. A terminal is a dark machine surface in EVERY app theme, so these are constant: they are NOT re-declared in the light block, and a light-themed subtree inherits them from :root. Literal hex (not var()) because buildTerminalTheme() reads them with getComputedStyle to build xterm's ITheme, which needs concrete values; each is annotated with the canonical primitive it matches. Cursor rides the accent (a functional mark = a legitimate accent spend); selection is neutral. */ --fwfa-terminal-bg: #001320; --fwfa-terminal-fg: #ccd4d7; --fwfa-terminal-cursor: #fec601; /* == --fwf-yellow (accent) */ --fwfa-terminal-selection: rgba(255, 255, 255, 0.16); --fwfa-terminal-ansi-black: #0a2138; --fwfa-terminal-ansi-red: #ff5a3c; --fwfa-terminal-ansi-green: #6cbe45; /* == --fwf-green */ --fwfa-terminal-ansi-yellow: #fec601; /* == --fwf-yellow */ --fwfa-terminal-ansi-blue: #77bddb; /* == --fwf-sky */ --fwfa-terminal-ansi-magenta: #c77dbb; --fwfa-terminal-ansi-cyan: #6fd3c6; --fwfa-terminal-ansi-white: #ccd4d7; --fwfa-terminal-ansi-bright-black: #335561; /* == --fwf-muted-blue */ --fwfa-terminal-ansi-bright-red: #ff7a52; --fwfa-terminal-ansi-bright-green: #8fd86b; --fwfa-terminal-ansi-bright-yellow: #ffd84d; --fwfa-terminal-ansi-bright-blue: #a0d4e8; --fwfa-terminal-ansi-bright-magenta: #d9a0d0; --fwfa-terminal-ansi-bright-cyan: #97e0d6; --fwfa-terminal-ansi-bright-white: #ffffff; /* Primary-button ink (label colour) and fill steps. Dark: white block, dark label — the label is the canonical brand navy (matches the brand DS "ink on light" rule), not the app-only teal ramp. --fwfa-primary-ink resolves from the nearest theme ancestor so nested specimens with a different theme always pick up the right ink, even when a light page root is an ancestor. Light re-points ink to white and fill steps to navy. */ --fwfa-primary-ink: var(--fwfa-fwf-navy); --fwfa-primary-hover: #ececec; --fwfa-primary-active: #d9d9d9; /* Typography DELIBERATE app divergence from the brand type scale in fwf-tokens/source.json: the app runs one step tighter for dense product UI. Mapping (don't "fix" to match): --fwfa-type-hero == brand --t-h1 (clamp 2→3rem) ← note the one-step name offset --fwfa-type-h1 = app-only intermediate (clamp 1.75→2.5rem, no brand equiv) --fwfa-type-h2/h3 run smaller than brand --t-h2/h3 on purpose. Families + body/sm/xs match brand. See token-drift audit doc for the full diff. */ --fwfa-font-display: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif; --fwfa-font-body: "Wonder Unit Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --fwfa-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --fwfa-type-hero: clamp(2rem, calc(1.55rem + 1.94vw), 3rem); --fwfa-type-h1: clamp(1.75rem, calc(1.4rem + 1.2vw), 2.5rem); --fwfa-type-h2: clamp(1.35rem, calc(1.18rem + 0.6vw), 1.75rem); --fwfa-type-h3: 1.125rem; --fwfa-type-body: 1rem; --fwfa-type-sm: 0.875rem; /* The functional UI-label step: form labels, button text, tab names. One notch below body/sm so labels group tightly with their control without competing with content. NOT the decorative mono/uppercase kicker register. */ --fwfa-type-label: 0.8125rem; --fwfa-type-xs: 0.75rem; --fwfa-type-micro: 0.6875rem; --fwfa-leading-tight: 1.12; /* Snug leading for short single-line UI text (labels, controls) — looser than tight (headings) so descenders clear, tighter than body (prose). */ --fwfa-leading-snug: 1.3; --fwfa-leading-body: 1.55; /* Weight for the small mono/uppercase label register (kicker, badge, table headers — decorative metadata). Form labels are NOT in this register: they're functional and live in the readable UI scale (see .fwfa-label). Medium — 700 reads too heavy at micro/xs sizes. */ --fwfa-weight-label: 500; /* Layout */ --fwfa-space-1: 0.25rem; --fwfa-space-2: 0.5rem; --fwfa-space-3: 0.75rem; --fwfa-space-4: 1rem; --fwfa-space-5: 1.5rem; --fwfa-space-6: 2rem; --fwfa-space-7: 3rem; --fwfa-space-8: 4rem; --fwfa-page-pad: clamp(1.5rem, 5vw, 5rem); --fwfa-content-max: 73.75rem; --fwfa-shell-max: 82rem; --fwfa-sidebar-width: 21rem; --fwfa-topbar-height: 3rem; --fwfa-grid-min: 16rem; --fwfa-grid-gap: var(--fwfa-space-4); --fwfa-stack-gap: var(--fwfa-space-4); --fwfa-cluster-gap: var(--fwfa-space-3); /* The statusbar is the thinner in-surface chrome bar (heads the main column), distinct from the shell-spanning topbar. */ --fwfa-statusbar-height: 2.75rem; /* Responsive breakpoints — the shared min-width vocabulary (see docs/MOBILE.md). CSS still can't use custom properties inside @media *conditions*, so these are the documented source of truth for JS, container queries, and review; the component @media rules restate the value with a comment naming the token. Keep the two in sync by hand. Component queries guard just *below* md (47.99em) to style the phone/narrow range; the 40rem shell auto-collapse is a separate threshold (sidebar crowds the main), not the md breakpoint. */ --fwfa-bp-sm: 30rem; /* 480px — large phone */ --fwfa-bp-md: 48rem; /* 768px — tablet / phone-landscape */ --fwfa-bp-lg: 64rem; /* 1024px — desktop */ /* Safe-area insets — fall back to 0 off-device (desktop, non-notched). Apps must ship for these to read non-zero. Edge-anchored chrome (topbar, sidebar, scrim, scrolling main) pads by these so content clears notches, the home indicator, and rounded display corners. See docs/MOBILE.md. */ --fwfa-safe-top: env(safe-area-inset-top, 0px); /* @kind other */ --fwfa-safe-right: env(safe-area-inset-right, 0px); /* @kind other */ --fwfa-safe-bottom: env(safe-area-inset-bottom, 0px); /* @kind other */ --fwfa-safe-left: env(safe-area-inset-left, 0px); /* @kind other */ /* Shape and depth */ /* Radius — aligned to the core FWF scale: 0.25rem for product controls (button, input), 0.375rem for containers (card, panel, badge, note, modal), 0.5rem (lg) as the app radius ceiling for larger bespoke surfaces such as the inset workspace main. The app caps at lg — there is no xl/2xl step. */ --fwfa-radius-xs: 0.125rem; --fwfa-radius-sm: 0.25rem; --fwfa-radius-md: 0.375rem; --fwfa-radius-lg: 0.5rem; --fwfa-radius-pill: 9999px; --fwfa-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.22); --fwfa-shadow-float: 0 16px 48px rgba(0, 0, 0, 0.42); /* Resting elevation for flat grouping surfaces (panel/card). The dark theme reads depth from translucency over the navy, so it needs none; the light theme is flat white separated only by a hairline border, so a whisper of shadow restores the page→surface hierarchy. Re-pointed in the light block. */ --fwfa-shadow-hairline: none; /* Focus ring — a solid offset outline (drawn in the base layer). Sky reads 8.3:1 on the dark shell; the light theme repoints the COLOUR to navy because sky on white is only ~2:1, under the WCAG 3:1 non-text-contrast floor. Width and offset are theme-agnostic, so they live here only. */ --fwfa-focus-ring: var(--fwfa-accent-calm); --fwfa-focus-ring-width: 2px; --fwfa-focus-ring-offset: 3px; --fwfa-tap: 2.75rem; --fwfa-control: 1.8rem; --fwfa-control-compact: 1.6rem; /* Text-button consistency floor (~64px, the Material value): evens short labels like Save / OK / Delete so button rows line up, without bloating dense layouts. A floor, not a fixed width — longer labels expand past it. Applies to the standard button only; icon buttons stay square (--fwfa-control) and the compact variant stays content-sized for density. */ --fwfa-button-min: 4rem; /* Motion */ --fwfa-dur-fast: 120ms; /* @kind other */ --fwfa-dur-base: 200ms; /* @kind other */ --fwfa-dur-slow: 320ms; /* @kind other */ --fwfa-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */ /* Callout icons — Lucide glyphs as mask-images (tinted via background-color at the call site, so they theme-switch for free). No icon background, per the FWF callout pattern. */ --fwfa-icon-info: url("data:image/svg+xml,"); /* @kind other */ --fwfa-icon-tip: url("data:image/svg+xml,"); /* @kind other */ --fwfa-icon-warn: url("data:image/svg+xml,"); /* @kind other */ --fwfa-icon-success: url("data:image/svg+xml,"); /* @kind other */ --fwfa-icon-danger: url("data:image/svg+xml,"); /* @kind other */ /* Check — a masked glyph (tinted via background-color at the call site), used for the current-selection tick in menus. Stroke %23000 like the callout icons. */ --fwfa-icon-check: url("data:image/svg+xml,"); /* @kind other */ /* Chevron — the select / disclosure arrow. Unlike the masked callout icons this is a background-image (a