/* * 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. * ------------------------------------------------------------------ */ :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-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", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --kw-font-body: "Host Grotesk", -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; /* 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); }