/* * Design tokens — Kiteworks brand (REBRAND) * ------------------------------------------------------------------ * DROP-IN REPLACEMENT for static/css/tokens.css. * * Every legacy --kw-* variable name is preserved, so existing component * CSS and the Tailwind theme map keep working with zero renames. Values * are repointed to the Kiteworks brand, and new brand tokens (glass, * glow, lavenders, brand fonts) are added. * * THEME MODEL (the key lever): * html.dark → DARK brand → used by the PUBLIC layout (home, catalog, detail) * html.light → LIGHT brand → used by the ADMIN layout (dashboard, audit, forms) * The app already flips aliases on html.light / html.dark — we just * redefine what each means and switch which layout uses which class. * See HANDOFF.md §3. * ------------------------------------------------------------------ */ /* Zero-CLS fallback for Host Grotesk (issue #101 — the mobile hero H1 was the * dominant Cumulative Layout Shift source: the headline painted in a system * font, then reflowed when the webfont swapped in under `font-display: swap`). * * This synthesizes a fallback face from a locally-installed Arial (→ Liberation * Sans on Linux CI, which is metric-compatible) whose box is stretched to * occupy the SAME space as Host Grotesk, so the swap causes no reflow. The * overrides were computed from the shipped Host Grotesk latin woff2 (upm 1000, * hhea ascent 1015 / descent -315 / lineGap 0, avg lc advance 0.5209) against * Arial (avg lc advance 0.4895) — see the derivation in issue #101: * size-adjust = 0.5209 / 0.4895 = 106.41% * ascent-override = (1015/1000) / 1.0641 = 95.39% * descent-override = (315/1000) / 1.0641 = 29.60% * line-gap-override= 0 = 0.00% * local()-only (no network fetch) → CSP-clean (default-src 'self'). This family * is wired into the --kw-font-headline/body stacks below, BEFORE the generic * system fallbacks, so the deterministic metric-matched face wins the swap. */ @font-face { font-family: "Host Grotesk Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Roboto"); size-adjust: 106.41%; ascent-override: 95.39%; descent-override: 29.60%; line-gap-override: 0%; } :root { /* ---- Brand palette (from the Kiteworks Brand Guideline) ---- */ --kw-deep-space: #050821; /* darkest canvas */ --kw-midnight-navy: #0D0F31; /* elevated dark surface */ --kw-navy: #111732; /* legacy name → primary ink / sidebar bg */ --kw-electric-indigo:#4D60FB; /* SIGNATURE blue — glow & accent ONLY */ --kw-blue: #4A56AF; /* legacy name → primary action (logo blue) */ --kw-glow-blue: #425CC7; --kw-violet: #8352E8; /* halo / chart accent */ --kw-soft-lavender: #DDD6FB; --kw-muted-lavender:#B5BCF2; --kw-signal-gold: #FDCA13; /* secondary accent */ /* legacy accent names kept; repointed into the brand family */ --kw-teal: #2BB673; /* success / compliance / safety */ --kw-purple: #8352E8; /* knowledge / doc ops → brand violet */ --kw-red: #E54545; /* destructive / deny */ --kw-yellow: #FDCA13; /* ratings / warnings → signal gold */ --kw-light: #F6F7FB; /* page background tint (light theme) */ --kw-border: #E2E5F0; /* divider strokes (light theme) */ --kw-muted: #6B7191; /* secondary text (light theme) */ --kw-white: #FFFFFF; /* ---- Glass recipe — the signature dark surface ---- */ --kw-glass-fill: rgba(77, 96, 251, 0.10); --kw-glass-fill-2: rgba(77, 96, 251, 0.06); --kw-glass-stroke: rgba(77, 96, 251, 0.20); --kw-glass-stroke-2:rgba(221, 214, 251, 0.20); --kw-glow-glass: inset 0 0 55.5px 0 rgba(197,185,246,0.15), inset 0 0 14px 0 rgba(77,96,251,0.20); --kw-glow-text: 0 0 5px rgba(255,255,255,0.40), 0 0 10px rgb(66,92,199); /* ---- Semantic aliases (light theme defaults; flipped on html.dark) ---- */ --kw-fg: var(--kw-navy); --kw-fg-muted: var(--kw-muted); --kw-bg: var(--kw-light); --kw-bg-elevated: var(--kw-white); --kw-bg-subtle: #F0F2FA; --kw-border-color: var(--kw-border); --kw-border-soft: #ECEEF6; --kw-surface: var(--kw-white); /* card fill */ --kw-link: var(--kw-blue); --kw-link-hover: var(--kw-navy); --kw-focus-ring: var(--kw-electric-indigo); --kw-card-shadow: 0 1px 2px rgba(11,14,36,0.04), 0 8px 24px -16px rgba(11,14,36,0.18); /* Derived brand shades */ --kw-blue-hover: #3C4794; /* darkened --kw-blue for :hover / :active */ --kw-yellow-ink: #8A6A00; /* WCAG-AA text/icon on a gold surface */ /* Status */ --kw-status-available: var(--kw-teal); --kw-status-coming: var(--kw-signal-gold); --kw-status-roadmap: var(--kw-muted); --kw-status-deny: var(--kw-red); /* Category accents — reharmonized into the brand family. Used ONLY for the card accent stripe + category pill tint. Icons themselves stay white/gold per the brand icon rule. */ --kw-cat-compliance: #2BB673; /* success green */ --kw-cat-governance: #4D60FB; /* electric indigo */ --kw-cat-security: #FDCA13; /* signal gold */ --kw-cat-administrative: #7C83E8; /* periwinkle */ --kw-cat-communication: #12B5A5; /* teal */ --kw-cat-documents: #B45CF0; /* orchid violet */ --kw-cat-dlp: #E5658A; /* brand-leaning rose */ --kw-cat-ediscovery: #8352E8; /* violet */ --kw-cat-privacy: #46B6D9; /* lavender cyan */ /* Cost indicator */ --kw-cost-low: var(--kw-teal); --kw-cost-med: var(--kw-signal-gold); --kw-cost-high: var(--kw-red); /* ---- Typography (brand fonts) ---- */ --kw-font-headline: "Host Grotesk", "Host Grotesk Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --kw-font-body: "Host Grotesk", "Host Grotesk Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --kw-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --kw-font-mono-num: "Fragment Mono", "Geist Mono", ui-monospace, monospace; /* Radii */ --kw-radius-sm: 0.5rem; --kw-radius-md: 0.75rem; --kw-radius-lg: 0.875rem; --kw-radius-xl: 1rem; --kw-radius-pill: 9999px; /* Shadows (light theme) */ --kw-shadow-sm: 0 1px 2px 0 rgba(11,14,36,0.05); --kw-shadow-card: var(--kw-card-shadow); --kw-shadow-hover: 0 12px 28px -12px rgba(11,14,36,0.22); /* Spacing scale (unchanged — matches Tailwind 4px rhythm) */ --kw-space-1: 0.25rem; --kw-space-2: 0.5rem; --kw-space-3: 0.75rem; --kw-space-4: 1rem; --kw-space-5: 1.25rem; --kw-space-6: 1.5rem; --kw-space-8: 2rem; --kw-space-10: 2.5rem; --kw-space-12: 3rem; --kw-width-content: 1280px; /* ---- Responsive breakpoint scale (canonical source of truth) ---- * REFERENCE VALUES ONLY. CSS custom properties are INVALID inside a media * query condition — `@media (max-width: var(--kw-bp-md))` is silently ignored * by every browser. So these do NOT drive @media; they exist as (a) living * documentation of the scale, and (b) machine-readable values other code can * read (e.g. a Playwright test deriving its viewport matrix via * getComputedStyle). Component @media rules must use the matching LITERAL px. * * Canonical viewport scale (Tier-A / shell layout — mirrors Tailwind screens * in frontend/tailwind.config.js): * xs 480 · sm 640 · md 768 · lg 1024 · xl 1280 * Tier-B CONTENT breakpoints are component-local, content-driven exceptions * kept off the canonical scale on purpose (annotated at each site): * 560, 900, 920, 1000, 1200 * A future stylelint gate enforces that every @media width is one of the * canonical values or a listed exception (no new arbitrary breakpoints). */ --kw-bp-xs: 480px; --kw-bp-sm: 640px; --kw-bp-md: 768px; --kw-bp-lg: 1024px; --kw-bp-xl: 1280px; /* App-wide scrollbar thumb (base.css paints it once, globally). Brand-blue translucent on light surfaces; html.dark swaps to soft white. NEVER the bright electric indigo as a flat fill — that colour is glow/accent only (lang_picker's indigo hover is a deliberate small-popover accent). */ --kw-scrollbar-thumb: rgba(74, 86, 175, 0.45); --kw-scrollbar-thumb-hover: var(--kw-blue); } /* ================================================================== DARK brand — used by the PUBLIC layout (set ). Glass surfaces, white/lavender text, signature indigo glow. ================================================================== */ html.dark { --kw-fg: #FFFFFF; --kw-fg-muted: rgba(181,188,242,0.82); --kw-bg: var(--kw-deep-space); --kw-bg-elevated: var(--kw-midnight-navy); --kw-bg-subtle: var(--kw-glass-fill-2); --kw-surface: var(--kw-glass-fill); --kw-border-color: var(--kw-glass-stroke); --kw-border-soft: rgba(255,255,255,0.10); --kw-link: var(--kw-soft-lavender); --kw-link-hover: #FFFFFF; --kw-card-shadow: var(--kw-glow-glass); --kw-shadow-card: var(--kw-glow-glass); --kw-shadow-hover: var(--kw-glow-glass), 0 0 30px -8px rgba(77,96,251,0.5); /* secondary text on glass */ --kw-fg-subtle: rgba(221,214,251,0.58); /* soft white scrollbar thumb on the dark navy canvas */ --kw-scrollbar-thumb: rgba(255,255,255,0.16); --kw-scrollbar-thumb-hover: rgba(255,255,255,0.30); } /* light theme also exposes --kw-fg-subtle for parity */ :root { --kw-fg-subtle: var(--kw-muted); }