/* * Design Tokens — Kazi v2 * * Authoritative source: /Users/jelle/Downloads/design.md §3–§4. * Every visual value lives here. Components read tokens — no * hard-coded colours, fonts, spacing or radii anywhere else. * * Naming convention: --kz-- * Categories: color, font, size, space, radius, shadow, z, duration, ease, opacity, icon * * Backward-compat aliases for legacy token names are grouped at the * bottom so existing component CSS keeps rendering without edits. */ :root { /* ═══════════════════════════════════════════════════════════════ SURFACES & TEXT ═══════════════════════════════════════════════════════════════ */ --kz-color-bg: #ffffff; --kz-color-surface: #ffffff; --kz-color-bg-muted: #fafafa; --kz-color-bg-subtle: #f4f4f4; --kz-color-border: rgba(0, 0, 0, 0.08); --kz-color-border-heavy: rgba(0, 0, 0, 0.14); --kz-color-text: #0f0f0f; --kz-color-text-soft: #292524; --kz-color-text-muted: #6b6b6b; --kz-color-text-faint: #a3a3a3; --kz-color-text-inverse: #ffffff; --kz-color-overlay: rgba(0, 0, 0, 0.5); --kz-color-scrim: rgba(0, 0, 0, 0.04); /* ═══════════════════════════════════════════════════════════════ ACTION ═══════════════════════════════════════════════════════════════ */ --kz-color-action: #0f0f0f; --kz-color-action-hover: #262626; --kz-color-action-pressed: #404040; --kz-color-action-text: #ffffff; --kz-color-action-disabled: #d4d4d4; --kz-color-action-disabled-text:#a3a3a3; --kz-color-secondary: transparent; --kz-color-secondary-bg: #ffffff; --kz-color-secondary-border: rgba(0, 0, 0, 0.14); --kz-color-secondary-hover: #f4f4f4; --kz-color-secondary-pressed: #ededed; --kz-color-secondary-text: #0f0f0f; --kz-color-ghost-hover: rgba(0, 0, 0, 0.04); --kz-color-link: #0f0f0f; --kz-color-link-hover: #262626; --kz-color-link-visited: #6b6b6b; --kz-color-focus-ring: #3D7C8C; /* ═══════════════════════════════════════════════════════════════ LAYER 1 — SCAN TYPES (perspective identity) ═══════════════════════════════════════════════════════════════ Every scan gets a saturated hue plus a soft tint for backgrounds, soft fills, and "current" tags. */ --kz-color-series-a: #3D7C8C; /* Ideal Work */ --kz-color-series-b: #7E5AA0; /* Role Expectation */ --kz-color-series-c: #D9A23A; /* Role Experience */ --kz-color-series-a-soft: #dfe9eb; --kz-color-series-b-soft: #e6e0ee; --kz-color-series-c-soft: #f6ecd0; --kz-color-series-a-deep: #226C7E; /* darker teal — score-bar tip "ball" */ /* Team Roles section accent — the logo's coral swoosh. Score bars, top-2 card accents and rank badges in single-profile TR sections use this so the two dimension families stay visually distinct (#21519). Radar blobs keep the scan's identity colour; comparison overlays keep the series-a/b/c scheme. */ --kz-color-series-tr: #E0795F; --kz-color-series-tr-deep: #BE543F; /* darker coral — TR bar tip "ball" */ /* ═══════════════════════════════════════════════════════════════ LAYER 2 — SECTIONS (measurement family) ═══════════════════════════════════════════════════════════════ */ --kz-color-wv: #44403c; /* Work Values — stone charcoal */ --kz-color-tr: #c2410c; /* Team Roles — alive rust */ --kz-color-accent: var(--kz-color-series-a); /* legacy alias */ /* ═══════════════════════════════════════════════════════════════ LAYER 3 — SEVERITY (comparison outcomes) ═══════════════════════════════════════════════════════════════ */ --kz-color-match: #3BA17F; --kz-color-tension: #FFAF75; --kz-color-mismatch: #E85C3E; --kz-color-boomerang: #9E5FC5; --kz-color-match-soft: #e1f0e9; --kz-color-tension-soft: #fff0e2; --kz-color-mismatch-soft: #fce2db; --kz-color-boomerang-soft: #efe4f7; /* ═══════════════════════════════════════════════════════════════ UI FEEDBACK (forms, toasts, banners) ═══════════════════════════════════════════════════════════════ */ /* Aliased to the severity ramp (Layer 3) so the app has one green / amber / red — form feedback and comparison outcomes can't drift. */ --kz-color-success: var(--kz-color-match); --kz-color-success-bg: var(--kz-color-match-soft); --kz-color-success-border: var(--kz-color-match); --kz-color-warning: var(--kz-color-tension); --kz-color-warning-bg: var(--kz-color-tension-soft); --kz-color-warning-border: var(--kz-color-tension); --kz-color-error: var(--kz-color-mismatch); --kz-color-error-bg: var(--kz-color-mismatch-soft); --kz-color-error-border: var(--kz-color-mismatch); --kz-color-info: #3D7C8C; --kz-color-info-bg: #dfe9eb; --kz-color-info-border: #3D7C8C; /* ═══════════════════════════════════════════════════════════════ TAGS ═══════════════════════════════════════════════════════════════ */ --kz-color-tag-bg: #ffedd5; /* dimension tag — warm peach */ --kz-color-tag-text: #9a3412; /* dimension tag — burnt orange */ --kz-color-tag-neutral-bg: #f4f4f5; --kz-color-tag-neutral-text:#3f3f46; --kz-color-tag-current-bg: #dfe9eb; /* "current" marker on scan list */ --kz-color-tag-current-text:#2E6A78; /* ═══════════════════════════════════════════════════════════════ STEP-BOX STATES (legacy — retained for base_journey fallback) ═══════════════════════════════════════════════════════════════ */ --kz-color-step-todo-bg: #ffffff; --kz-color-step-todo-border: rgba(0, 0, 0, 0.14); --kz-color-step-active-bg: #f4f4f4; --kz-color-step-active-border: #0f0f0f; --kz-color-step-done-bg: #fafafa; --kz-color-step-done-border: #0f0f0f; --kz-color-step-locked-bg: #fafafa; --kz-color-step-locked-border: rgba(0, 0, 0, 0.08); --kz-color-step-locked-text: #a3a3a3; --kz-color-locked-bg: #fafafa; --kz-color-locked-border: rgba(0, 0, 0, 0.08); --kz-color-locked-text: #a3a3a3; --kz-color-disabled-text: #a3a3a3; --kz-color-coming-soon-bg: #fafafa; /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════════════════ */ --kz-font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --kz-font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --kz-font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --kz-font-family: var(--kz-font-body); /* legacy alias */ --kz-font-size-xs: 0.75rem; /* 12px */ --kz-font-size-sm: 0.875rem; /* 14px */ --kz-font-size-base: 1rem; /* 16px */ --kz-font-size-lg: 1.25rem; /* 20px */ --kz-font-size-xl: 1.5rem; /* 24px */ --kz-font-size-2xl: 2rem; /* 32px */ --kz-font-weight-normal: 400; --kz-font-weight-medium: 500; --kz-font-weight-semibold:600; --kz-font-weight-bold: 600; /* headings cap at 600 per design.md §5 */ --kz-line-height: 1.5; --kz-line-height-tight: 1.2; --kz-letter-spacing: 0; --kz-letter-spacing-wide: 0.06em; /* ═══════════════════════════════════════════════════════════════ SPACING (4px grid per design.md §3.3) ═══════════════════════════════════════════════════════════════ */ --kz-space-0: 0; --kz-space-1: 4px; --kz-space-2: 8px; --kz-space-3: 12px; --kz-space-4: 16px; --kz-space-5: 24px; --kz-space-6: 32px; --kz-space-7: 48px; --kz-space-8: 64px; --kz-space-9: 96px; --kz-space-10: 128px; --kz-space-11: 160px; /* ═══════════════════════════════════════════════════════════════ LAYOUT WIDTHS ═══════════════════════════════════════════════════════════════ */ --kz-sidebar-width: 264px; --kz-content-max: 1100px; --kz-content-max-width: var(--kz-content-max); /* legacy alias */ --kz-max-width: var(--kz-content-max); /* legacy alias */ --kz-scan-max: 640px; --kz-scan-max-width: var(--kz-scan-max); /* legacy alias */ --kz-form-max: 480px; /* ═══════════════════════════════════════════════════════════════ RADII ═══════════════════════════════════════════════════════════════ */ --kz-radius-0: 0; --kz-radius-sm: 6px; --kz-radius-md: 10px; --kz-radius-lg: 16px; --kz-radius-xl: 20px; --kz-radius-2xl: 28px; --kz-radius-pill: 9999px; /* ═══════════════════════════════════════════════════════════════ BORDERS ═══════════════════════════════════════════════════════════════ */ --kz-border-width: 1px; --kz-border-width-heavy: 2px; --kz-border-width-thick: 2px; --kz-border: var(--kz-border-width) solid var(--kz-color-border); /* ═══════════════════════════════════════════════════════════════ SHADOWS ═══════════════════════════════════════════════════════════════ */ --kz-shadow-hairline: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03); --kz-shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --kz-shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06); --kz-shadow-dropdown: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.08); --kz-shadow-modal: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 24px 48px rgba(0, 0, 0, 0.12); --kz-shadow-focus: 0 0 0 2px var(--kz-color-bg), 0 0 0 4px var(--kz-color-focus-ring); /* legacy aliases */ --kz-shadow-sm: var(--kz-shadow-hairline); --kz-shadow-md: var(--kz-shadow-card); /* ═══════════════════════════════════════════════════════════════ Z-INDEX ═══════════════════════════════════════════════════════════════ */ --kz-z-base: 0; --kz-z-raised: 10; --kz-z-sticky: 100; --kz-z-dropdown: 200; --kz-z-modal: 400; --kz-z-toast: 500; --kz-z-tooltip: 600; --kz-z-watermark: 900; /* legacy; class retired but token retained */ /* ═══════════════════════════════════════════════════════════════ MOTION ═══════════════════════════════════════════════════════════════ */ --kz-duration-instant: 80ms; --kz-duration-fast: 150ms; --kz-duration-base: 220ms; --kz-duration-slow: 360ms; --kz-ease-standard: cubic-bezier(0.2, 0, 0, 1); --kz-ease-emphasized: cubic-bezier(0.3, 0, 0, 1); --kz-ease-exit: cubic-bezier(0.3, 0, 1, 1); /* legacy aliases */ --kz-transition-fast: var(--kz-duration-fast) var(--kz-ease-standard); --kz-transition-base: var(--kz-duration-base) var(--kz-ease-standard); --kz-transition-slow: var(--kz-duration-slow) var(--kz-ease-standard); /* ═══════════════════════════════════════════════════════════════ ICONS ═══════════════════════════════════════════════════════════════ */ --kz-icon-xs: 12px; --kz-icon-sm: 14px; --kz-icon-md: 16px; --kz-icon-lg: 20px; --kz-icon-xl: 24px; /* ═══════════════════════════════════════════════════════════════ OPACITY ═══════════════════════════════════════════════════════════════ */ --kz-opacity-disabled: 0.5; --kz-opacity-hover: 0.8; --kz-radar-fill: 0.07; --kz-radar-hover: 0.11; /* ═══════════════════════════════════════════════════════════════ BREAKPOINTS (reference only — use pixel values in @media) ═══════════════════════════════════════════════════════════════ --kz-bp-sm: 640px --kz-bp-md: 768px --kz-bp-lg: 960px --kz-bp-xl: 1200px --kz-bp-2xl: 1440px Convention: @media (min-width: 768px) { … } — mobile-first. */ /* ═══════════════════════════════════════════════════════════════ TOUCH TARGETS (WCAG minimum) ═══════════════════════════════════════════════════════════════ */ --kz-touch-target: 48px; --kz-touch-target-sm: 44px; /* ═══════════════════════════════════════════════════════════════ COMPONENT-SPECIFIC SUB-TOKENS ═══════════════════════════════════════════════════════════════ Kept for backward compatibility with per-component CSS that reads these aliases. Values flow from the foundation tokens above. */ /* Score bar */ --kz-bar-track-color: var(--kz-color-bg-subtle); --kz-bar-fill-color: var(--kz-color-series-a); --kz-bar-height: 6px; --kz-bar-radius: var(--kz-radius-pill); /* Radar chart */ --kz-chart-series-a-stroke: var(--kz-color-series-a); --kz-chart-series-a-fill: var(--kz-color-series-a); --kz-chart-series-b-stroke: var(--kz-color-series-b); --kz-chart-series-b-fill: var(--kz-color-series-b); --kz-chart-series-c-stroke: var(--kz-color-series-c); --kz-chart-series-c-fill: var(--kz-color-series-c); --kz-chart-grid-color: var(--kz-color-border); --kz-chart-grid-bg: transparent; --kz-chart-label-color-wv: var(--kz-color-wv); /* #21519 — TR axis labels share the WV stone-charcoal so both radar sections read as one family (the section is now distinguished by the coral bars/accents, not the label colour). Was muted umber #8a5a35 under #21438. */ --kz-chart-label-color-tr: var(--kz-color-wv); --kz-chart-stroke-width: 1.5px; --kz-chart-dot-radius: 3.5px; /* Rank badge */ --kz-rank-size: 22px; --kz-rank-bg: var(--kz-color-surface); --kz-rank-color: var(--kz-color-text); /* Data palette (fallback categorical — prefer --kz-color-series-* where possible) */ --kz-color-data-1: var(--kz-color-series-a); --kz-color-data-2: var(--kz-color-series-b); --kz-color-data-3: var(--kz-color-series-c); --kz-color-data-4: var(--kz-color-boomerang); --kz-color-data-5: var(--kz-color-wv); --kz-color-data-6: var(--kz-color-tr); --kz-color-data-7: #0891b2; /* cyan fallback */ --kz-color-data-8: #6b7280; /* neutral gray */ /* Scan progress bar */ --kz-progress-height: 6px; --kz-progress-track: var(--kz-color-bg-subtle); --kz-progress-fill: var(--kz-color-action); /* Table */ --kz-table-header-bg: var(--kz-color-bg-muted); --kz-table-header-color:var(--kz-color-text-muted); --kz-table-row-hover: var(--kz-color-bg-muted); --kz-table-row-stripe: var(--kz-color-bg-muted); --kz-table-border: var(--kz-color-border); /* Form inputs */ --kz-input-bg: var(--kz-color-surface); --kz-input-border: var(--kz-color-border-heavy); --kz-input-border-focus:var(--kz-color-focus-ring); --kz-input-radius: var(--kz-radius-md); --kz-input-padding: var(--kz-space-2) var(--kz-space-3); /* Tabs */ --kz-tab-active-color: var(--kz-color-text); --kz-tab-active-border: var(--kz-color-action); --kz-tab-inactive-color:var(--kz-color-text-muted); /* Sidebar nav (admin rail) */ --kz-sidebar-nav-bg: #1a1a1a; --kz-sidebar-nav-color: #ffffff; --kz-sidebar-nav-hover: rgba(255, 255, 255, 0.08); --kz-sidebar-nav-active: rgba(255, 255, 255, 0.16); --kz-sidebar-nav-width: 64px; /* Section-based journey sidebar */ --kz-nav-section-gap: var(--kz-space-2); --kz-scan-list-max-height: 120px; } /* ═══════════════════════════════════════════════════════════════ PREFERS-REDUCED-MOTION — collapse all durations ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --kz-duration-instant: 0ms; --kz-duration-fast: 0ms; --kz-duration-base: 0ms; --kz-duration-slow: 0ms; } }