/* * Wodo Brand Design Tokens * ======================== * * Single source of truth for the Wodo color system, shared across: * - The main application (client/src/client.css) * - The marketing website (website/sass/site.scss) * * Contains only pure CSS custom properties — no Tailwind syntax, * no @apply, no @theme, no @layer. * * Theme toggling: Add/remove class="dark" on * * All color combinations meet WCAG 2.1 AA (4.5:1 minimum contrast) */ :root { /* Primary Colors - Blue palette for main UI elements */ --wodo-primary-100: #e6f2ff; --wodo-primary-200: #b3d9ff; --wodo-primary-300: #80bfff; --wodo-primary-400: #4da6ff; --wodo-primary-500: #1a8cff; --wodo-primary-600: #0073e6; --wodo-primary-700: #0059b3; --wodo-primary-800: #004080; --wodo-primary-900: #00264d; /* Accent Teal - Review status, secondary actions */ --wodo-teal-100: #e6fffa; --wodo-teal-500: #0fbbab; --wodo-teal-700: #068275; --wodo-teal-800: #055952; /* Darker for 4.5:1 contrast on teal-100 */ /* Accent Purple - Todo status, medium priority */ --wodo-purple-100: #f3e6ff; --wodo-purple-500: #7c40de; --wodo-purple-700: #5823b0; /* Neutral Colors - Text, backgrounds, borders */ --wodo-neutral-000: #ffffff; --wodo-neutral-100: #f8f9fa; --wodo-neutral-200: #e9ecef; --wodo-neutral-300: #dee2e6; --wodo-neutral-400: #ced4da; --wodo-neutral-500: #adb5bd; --wodo-neutral-600: #6c757d; --wodo-neutral-700: #495057; --wodo-neutral-800: #343a40; --wodo-neutral-900: #212529; /* Success Colors - Done status, positive feedback */ --wodo-success-50: #f1fbf6; /* For very-faint banner fills */ --wodo-success-100: #e3f8ed; --wodo-success-500: #0ea36a; --wodo-success-600: #088957; --wodo-success-700: #07774c; /* Warning Colors - Caution states, high priority */ --wodo-warning-50: #fffdf5; /* Very faint banner fill */ --wodo-warning-100: #fff8e6; --wodo-warning-200: #ffe8a3; --wodo-warning-300: #fbc856; --wodo-warning-400: #f9b53a; --wodo-warning-500: #f5a623; --wodo-warning-700: #946611; /* Darkened for 4.5:1 contrast on warning-100 */ --wodo-warning-800: #7a550e; /* Darker for stronger emphasis */ --wodo-warning-900: #4d3308; /* Danger Colors - Blocked status, errors, urgent priority */ --wodo-danger-50: #fef5f4; --wodo-danger-100: #feeceb; --wodo-danger-200: #fbcaca; --wodo-danger-300: #f59e9e; --wodo-danger-400: #ee6e6e; --wodo-danger-500: #e62e1f; --wodo-danger-600: #c82218; /* Darker for 4.5:1 contrast with white text */ --wodo-danger-700: #b21d11; --wodo-danger-800: #821610; --wodo-danger-900: #5a0e08; /* Flag Colors - User-defined categorization */ --wodo-flag-red-100: #fee7ea; --wodo-flag-red-500: #e41e3f; --wodo-flag-red-700: #9c0d28; --wodo-flag-orange-100: #fff3e0; --wodo-flag-orange-500: #ff8c00; --wodo-flag-orange-700: #ad6000; --wodo-flag-yellow-100: #fffae6; --wodo-flag-yellow-500: #ffd700; --wodo-flag-yellow-700: #ad9000; --wodo-flag-green-100: #e2f8ec; --wodo-flag-green-500: #00c853; --wodo-flag-green-700: #008637; --wodo-flag-blue-100: #e6f1ff; --wodo-flag-blue-500: #2979ff; --wodo-flag-blue-700: #1b50ad; --wodo-flag-purple-100: #f2e5f7; --wodo-flag-purple-500: #9c27b0; --wodo-flag-purple-700: #641883; --wodo-flag-pink-100: #ffe6ef; --wodo-flag-pink-500: #f50057; --wodo-flag-pink-700: #a3003a; --wodo-flag-teal-100: #e3f8fa; --wodo-flag-teal-500: #00bcd4; --wodo-flag-teal-700: #008394; --wodo-flag-indigo-100: #eaedff; --wodo-flag-indigo-500: #3d5afe; --wodo-flag-indigo-700: #253dad; --wodo-flag-gray-100: #f3f4f6; --wodo-flag-gray-500: #6b7280; --wodo-flag-gray-700: #374151; /* Semantic tokens - backgrounds */ --wodo-surface: var(--wodo-neutral-000); --wodo-surface-alt: var(--wodo-neutral-100); --wodo-surface-muted: var(--wodo-neutral-200); /* Semantic tokens - text */ --wodo-body: var(--wodo-neutral-900); --wodo-muted: var(--wodo-neutral-700); --wodo-subtle: #5b6370; /* Darker for 4.5:1 contrast on surface-alt */ /* Semantic tokens - borders */ --wodo-stroke: var(--wodo-neutral-300); --wodo-stroke-subtle: var(--wodo-neutral-200); --wodo-stroke-hover: var(--wodo-neutral-400); /* Border radius scale */ --wodo-radius-sm: 0.25rem; /* 4px */ --wodo-radius-md: 0.375rem; /* 6px */ --wodo-radius-lg: 0.5rem; /* 8px */ --wodo-radius-xl: 0.75rem; /* 12px */ /* Focus ring */ --wodo-focus-ring-width: 2px; --wodo-focus-ring-offset: 2px; --wodo-focus-ring-color: var(--wodo-primary-500); /* ------------------------------------------------------------------ * UI primitive tokens * ------------------------------------------------------------------ * Added to support theme variants (dark, retro) without leaks. * These centralise patterns that were previously inlined as * Tailwind utilities (bg-black/40, border-black/[0.08], shadow-lg * etc.). When a future theme overrides these tokens, every surface * that uses them flips automatically. */ /* Card surfaces — subtle alpha border + hover state. Matches the existing pattern in components/board/item_card.gleam. The "strong" variant adds slightly more weight for controls bars and config strips that need to read as a distinct surface but not as prominent as a card. The "subtle" variant is for table row dividers and similar quiet separators. */ --wodo-border-card: rgba(0, 0, 0, 0.08); --wodo-border-card-hover: rgba(0, 0, 0, 0.15); --wodo-border-card-strong: rgba(0, 0, 0, 0.12); --wodo-border-card-subtle: rgba(0, 0, 0, 0.05); /* Drop-zone shading — dashed-bordered placeholder with very light fill. Used by the board to mark where dragged items can land. */ --wodo-drop-zone-border: rgba(0, 0, 0, 0.15); --wodo-drop-zone-bg: rgba(0, 0, 0, 0.05); /* Backdrops & overlays — layered scrims. `modal` is the strongest, `detail` for side panels, `hint` for lighter contextual scrims, `hover` for interactive states like toast dismiss buttons. */ --wodo-overlay-modal: rgba(0, 0, 0, 0.4); --wodo-overlay-detail: rgba(0, 0, 0, 0.3); --wodo-overlay-hint: rgba(0, 0, 0, 0.08); --wodo-overlay-hover: rgba(0, 0, 0, 0.1); /* Tooltip panel colours. Currently inverted from body theme; retro will redefine. */ --wodo-tooltip-bg: var(--wodo-neutral-900); --wodo-tooltip-fg: #ffffff; /* Shadow elevation ladder (L1–L4). L1: hover lift on cards, subtle nav drop. L2: dropdown menus, popovers. L3: floating toast, side panel overlay edge. L4: modal dialogs, command palette. The retro theme will replace these with flat or inset glows. */ --wodo-shadow-l1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03); --wodo-shadow-l2: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --wodo-shadow-l3: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04); --wodo-shadow-l4: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04); /* Skeleton/loading shimmer base. */ --wodo-skeleton-base: var(--wodo-neutral-200); /* Family-highlight glow — applied to the parent / sub-item cards that share lineage with the currently selected card. The default is a soft "selection blue" (Tailwind blue-400). Retro overrides this to phosphor green so the glow matches the rest of the theme. Two intensities so child highlight reads stronger than parent. */ --wodo-family-glow: rgba(96, 165, 250, 0.55); --wodo-family-glow-subtle: rgba(96, 165, 250, 0.4); /* Wodo logo — gradient stops + stroke color. Tokenised so the retro theme can repaint the inline SVG without a Gleam-level branch. Three values: the bright (top-left) gradient stop, the deep (bottom-right) gradient stop, and the stroke color of the three wave lines drawn through the badge. */ --wodo-logo-stop-bright: #0073e6; --wodo-logo-stop-deep: #0059b3; --wodo-logo-stroke: #ffffff; /* Font families — prepared for retro to swap to Space Grotesk / VT323 in pass 2. Until pass 1.8 ships, the body still uses the literal Inter declaration; defining the variables here is harmless. */ --wodo-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wodo-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Dark theme overrides */ .dark { /* Primary Colors - Adjusted for accessibility in dark mode */ --wodo-primary-100: #0c1a29; --wodo-primary-200: #112a45; --wodo-primary-300: #193d66; --wodo-primary-400: #1f5087; --wodo-primary-500: #2563eb; --wodo-primary-600: #1d4ed8; /* Darker blue for 4.5:1 with white text */ --wodo-primary-700: #7dd3fc; /* Brightened for 4.5:1 contrast on gray backgrounds */ --wodo-primary-800: #a5e4fc; --wodo-primary-900: #d0f0fd; /* Accent Teal - Dark theme */ --wodo-teal-100: #0a2424; --wodo-teal-500: #14b8a6; --wodo-teal-700: #5eead4; --wodo-teal-800: #99f6e4; /* Lighter for dark mode contrast */ /* Accent Purple - Dark theme */ --wodo-purple-100: #1a122a; --wodo-purple-500: #8b5cf6; --wodo-purple-700: #c4b5fd; /* Neutral Colors - Inverted for dark theme */ --wodo-neutral-000: #141b24; --wodo-neutral-100: #1f2937; --wodo-neutral-200: #374151; --wodo-neutral-300: #4b5563; --wodo-neutral-400: #6b7280; --wodo-neutral-500: #9ca3af; --wodo-neutral-600: #d1d5db; --wodo-neutral-700: #e5e7eb; --wodo-neutral-800: #f3f4f6; --wodo-neutral-900: #f9fafb; /* Success Colors - Dark theme */ --wodo-success-50: #022611; /* Even darker than 100 for banner fills */ --wodo-success-100: #052e16; --wodo-success-500: #22c55e; --wodo-success-600: #16a34a; --wodo-success-700: #86efac; /* Warning Colors - Dark theme */ --wodo-warning-50: #2a1303; /* Even darker than 100 */ --wodo-warning-100: #422006; --wodo-warning-200: #78350f; --wodo-warning-300: #b45309; --wodo-warning-400: #d97706; --wodo-warning-500: #f59e0b; --wodo-warning-700: #fcd34d; --wodo-warning-800: #fde68a; /* Lighter for dark mode contrast */ --wodo-warning-900: #fef3c7; /* Danger Colors - Dark theme */ --wodo-danger-50: #2a0606; /* Even darker than 100 */ --wodo-danger-100: #450a0a; --wodo-danger-200: #7f1d1d; --wodo-danger-300: #991b1b; --wodo-danger-400: #b91c1c; --wodo-danger-500: #ef4444; --wodo-danger-600: #dc2626; /* Keep dark for 4.5:1 white text contrast on buttons */ --wodo-danger-700: #fca5a5; /* Light for text on dark backgrounds */ --wodo-danger-800: #fecaca; --wodo-danger-900: #fee2e2; /* Flag Colors - Brightened for dark backgrounds */ --wodo-flag-red-100: #450a0a; --wodo-flag-red-500: #f87171; --wodo-flag-red-700: #fecaca; --wodo-flag-orange-100: #431407; --wodo-flag-orange-500: #fb923c; --wodo-flag-orange-700: #fed7aa; --wodo-flag-yellow-100: #422006; --wodo-flag-yellow-500: #fbbf24; --wodo-flag-yellow-700: #fde68a; --wodo-flag-green-100: #052e16; --wodo-flag-green-500: #4ade80; --wodo-flag-green-700: #bbf7d0; --wodo-flag-blue-100: #172554; --wodo-flag-blue-500: #60a5fa; --wodo-flag-blue-700: #bfdbfe; --wodo-flag-purple-100: #2e1065; --wodo-flag-purple-500: #a78bfa; --wodo-flag-purple-700: #ddd6fe; --wodo-flag-pink-100: #500724; --wodo-flag-pink-500: #f472b6; --wodo-flag-pink-700: #fbcfe8; --wodo-flag-teal-100: #042f2e; --wodo-flag-teal-500: #2dd4bf; --wodo-flag-teal-700: #99f6e4; --wodo-flag-indigo-100: #1e1b4b; --wodo-flag-indigo-500: #818cf8; --wodo-flag-indigo-700: #c7d2fe; --wodo-flag-gray-100: #1f2937; --wodo-flag-gray-500: #9ca3af; --wodo-flag-gray-700: #d1d5db; /* Semantic tokens - same mappings, resolved to dark values via cascade */ --wodo-surface: var(--wodo-neutral-000); --wodo-surface-alt: var(--wodo-neutral-100); --wodo-surface-muted: var(--wodo-neutral-200); --wodo-body: var(--wodo-neutral-900); /* #F9FAFB - high contrast white for primary text */ --wodo-muted: var(--wodo-neutral-800); /* #F3F4F6 - slightly dimmed but still 4.5:1 on surface-alt */ --wodo-subtle: var(--wodo-neutral-600); --wodo-stroke: var(--wodo-neutral-300); --wodo-stroke-subtle: var(--wodo-neutral-200); --wodo-stroke-hover: var(--wodo-neutral-500); /* UI primitive tokens — dark-mode overrides. Card alpha-borders flip to white-on-dark; overlays stay rgba black (they sit over content regardless of theme); shadows deepen slightly because dark surfaces show shadow contrast more. */ --wodo-border-card: rgba(255, 255, 255, 0.1); --wodo-border-card-hover: rgba(255, 255, 255, 0.18); --wodo-border-card-strong: rgba(255, 255, 255, 0.1); --wodo-border-card-subtle: rgba(255, 255, 255, 0.05); --wodo-drop-zone-border: rgba(255, 255, 255, 0.15); --wodo-drop-zone-bg: rgba(255, 255, 255, 0.05); --wodo-overlay-modal: rgba(0, 0, 0, 0.6); --wodo-overlay-detail: rgba(0, 0, 0, 0.5); --wodo-overlay-hint: rgba(0, 0, 0, 0.2); --wodo-overlay-hover: rgba(255, 255, 255, 0.06); /* Tooltip stays high-contrast: light panel on dark UI. */ --wodo-tooltip-bg: var(--wodo-neutral-700); --wodo-tooltip-fg: var(--wodo-neutral-000); --wodo-shadow-l1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); --wodo-shadow-l2: 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); --wodo-shadow-l3: 0 10px 15px rgba(0, 0, 0, 0.55), 0 4px 6px rgba(0, 0, 0, 0.3); --wodo-shadow-l4: 0 20px 25px rgba(0, 0, 0, 0.6), 0 8px 10px rgba(0, 0, 0, 0.4); --wodo-skeleton-base: var(--wodo-neutral-200); /* Fonts unchanged in dark mode — same family, same fallback stack. */ } /* ============================================================ * Retro mode — phosphor-green CRT theme (easter egg) * ============================================================ * * Activated via the `html.retro` class set by helpers_ffi.mjs's * `setSpecialMode("retro")`. Layered on top of `html.dark` (the FFI * forces dark on alongside retro), so any token NOT overridden here * falls back to its dark-mode value rather than light. * * Design (per the approved Phase 2 plan): * * Black surfaces, phosphor-green primary text. * * Square corners — every `--wodo-radius-*` set to 0. Tailwind's * `rounded-*` utilities resolve through these, so all 340+ call * sites flip in one block. `rounded-full` (avatars, status dots) * stays round — those tokens are intentionally NOT bridged. * * Two-color phosphor: status colors hue-shift to amber. Success * stays green (consistent: green = good); warning/danger move to * amber (#FFB84D Vault-Tec) with brightness shifts to differentiate. * * Label colors are deliberately NOT overridden — flag chips stay * in their normal hues against the black canvas. This is the only * intentional color leak; it makes labels pop dramatically. * * Restrained CRT polish: text-shadow glow only. No scanlines, no * flicker, no vignette. */ html.retro { /* Surfaces — near-black. Slight green-tinted offset between layers so cards/panels still read as distinct from canvas. */ --wodo-surface: #000000; --wodo-surface-alt: #0a120a; --wodo-surface-muted: #14201c; /* Text — phosphor green hierarchy. Body is full bright; muted/subtle are the same hue at lower opacity for hierarchy. */ --wodo-body: #33ff33; --wodo-muted: rgba(51, 255, 51, 0.78); --wodo-subtle: rgba(51, 255, 51, 0.55); /* Strokes — same green at low opacity. */ --wodo-stroke: rgba(51, 255, 51, 0.3); --wodo-stroke-subtle: rgba(51, 255, 51, 0.15); --wodo-stroke-hover: rgba(51, 255, 51, 0.55); /* Square everything except `rounded-full`. */ --wodo-radius-sm: 0; --wodo-radius-md: 0; --wodo-radius-lg: 0; --wodo-radius-xl: 0; /* Fonts — Space Grotesk for body, VT323 for monospace contexts. Both are loaded via @font-face in client.css. */ --wodo-font-body: "Space Grotesk", "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --wodo-font-mono: "VT323", "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; /* Primary — bright phosphor for selection rings, focus, and the few UI elements that signal a primary action. */ --wodo-primary-100: #052e0c; --wodo-primary-200: #074d14; --wodo-primary-300: #0a7220; --wodo-primary-400: #129b2c; --wodo-primary-500: #33ff33; --wodo-primary-600: #00cc00; --wodo-primary-700: #008800; --wodo-primary-800: #006600; --wodo-primary-900: #003300; /* Status — hue-shift to amber for warning/danger; success stays green. Amber #FFB84D matches the Vault-Tec aesthetic in the reference. Warning is the lighter amber, danger is the deeper amber-orange so they're distinguishable in monochrome contexts. */ --wodo-success-50: #022611; --wodo-success-100: #052e16; --wodo-success-500: #33ff33; --wodo-success-600: #16a34a; --wodo-success-700: #86efac; --wodo-warning-50: #2a1a06; --wodo-warning-100: #4d2f0c; --wodo-warning-200: #784b1a; --wodo-warning-300: #a06822; --wodo-warning-400: #cf8a30; --wodo-warning-500: #ffb84d; /* Vault-Tec amber */ --wodo-warning-700: #ffd084; --wodo-warning-800: #ffe0a8; --wodo-warning-900: #ffeec5; --wodo-danger-50: #2a0e02; --wodo-danger-100: #4d1a04; --wodo-danger-200: #783008; --wodo-danger-300: #a04412; --wodo-danger-400: #cf601f; --wodo-danger-500: #ff8c1a; /* deeper amber-orange */ --wodo-danger-600: #d97306; --wodo-danger-700: #ffaa55; --wodo-danger-800: #ffc788; --wodo-danger-900: #ffdfb5; /* Card border — phosphor at low opacity. */ --wodo-border-card: rgba(51, 255, 51, 0.18); --wodo-border-card-hover: rgba(51, 255, 51, 0.35); --wodo-border-card-strong: rgba(51, 255, 51, 0.25); --wodo-border-card-subtle: rgba(51, 255, 51, 0.1); /* Drop zones — slightly stronger than card borders. */ --wodo-drop-zone-border: rgba(51, 255, 51, 0.3); --wodo-drop-zone-bg: rgba(51, 255, 51, 0.05); /* Overlays — modal backdrop is near-opaque so the underlying canvas blacks out (no point in blurring black-on-black). */ --wodo-overlay-modal: rgba(0, 0, 0, 0.92); --wodo-overlay-detail: rgba(0, 0, 0, 0.85); --wodo-overlay-hint: rgba(0, 0, 0, 0.4); --wodo-overlay-hover: rgba(51, 255, 51, 0.08); /* Tooltip — high-contrast inversion: green-on-near-black panel. */ --wodo-tooltip-bg: #000000; --wodo-tooltip-fg: #33ff33; /* Shadow ladder — flat or inset green glow. Box shadows on a black background read as outlines, not depth, so each level is a soft phosphor outline of progressively higher opacity. */ --wodo-shadow-l1: 0 0 0 1px rgba(51, 255, 51, 0.18); --wodo-shadow-l2: 0 0 0 1px rgba(51, 255, 51, 0.25), 0 0 8px rgba(51, 255, 51, 0.15); --wodo-shadow-l3: 0 0 0 1px rgba(51, 255, 51, 0.3), 0 0 12px rgba(51, 255, 51, 0.2); --wodo-shadow-l4: 0 0 0 1px rgba(51, 255, 51, 0.35), 0 0 20px rgba(51, 255, 51, 0.25); /* Skeleton placeholder. */ --wodo-skeleton-base: rgba(51, 255, 51, 0.08); /* Family-highlight glow — phosphor variants so the parent/child glow matches the rest of the retro theme. */ --wodo-family-glow: rgba(51, 255, 51, 0.55); --wodo-family-glow-subtle: rgba(51, 255, 51, 0.4); /* Logo — phosphor-green gradient with black wave-line strokes (a Vault-Tec-style green badge with dark lines etched through). */ --wodo-logo-stop-bright: #33ff33; --wodo-logo-stop-deep: #008800; --wodo-logo-stroke: #000000; /* Focus ring — phosphor full-bright. */ --wodo-focus-ring-color: #33ff33; } /* Body text gets a soft phosphor glow under retro. Restrained — just enough to feel like a CRT, not so much that long reading sessions become eyestrain. Disabled under prefers-reduced-motion (some users experience the glow as motion). */ html.retro body { text-shadow: 0 0 4px rgba(51, 255, 51, 0.35); } /* Code-shaped elements opt out of the body glow. Monospace at small sizes turns into mush under a 4px phosphor blur — the glow is for prose, not for syntax. */ html.retro :is(pre, code, kbd, samp, .hljs, .hljs *) { text-shadow: none; } @media (prefers-reduced-motion: reduce) { html.retro body { text-shadow: none; } }