@layer vendor, tokens, base, components; /* ── base/fonts.css ── */ @layer vendor { /* * HaTchi-MaXchi type foundation — Geist + Geist Mono, self-hosted. * * Variable woff2s vendored from vercel/geist-font v1.7.2 (SIL OFL 1.1, * licence at ../fonts/OFL.txt). No third-party request, no FOIT: * font-display: swap falls back to the system stack until loaded. * TASTE-5 (docs/reference/taste.md): type does the hierarchy — the * family loads here; the scale/weight discipline lives in tokens. */ @font-face { font-family: "Geist"; src: url("fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } } /* ── tokens/tokens.css ── */ @layer tokens { /* * tokens.css — Dazzle design system as CSS custom properties. * * Every length, colour, type-size, radius, shadow, and motion value * used in component CSS MUST resolve to a token defined here. * Literal values (px, rem, em, hex, hsl numerics) are permitted only * inside this file. Stylelint enforces this rule. * * UK English throughout: --colour-*, not --color-*. * * ───────────────────────────────────────────────────────────────── * * Portions of this file derived from Open Props by Adam Argyle (MIT). * Source: https://github.com/argyleink/open-props * Values have been renamed to Dazzle's vocabulary and selectively * adopted. Open Props is NOT a runtime dependency — values are * vendored in source. */ :root { /* ─────────────────────────────── spacing ───────────────────────── * 4px base. Geometric-ish progression: each step roughly 1.5x. * Use semantic names; fall back to scale when truly arbitrary. * ───────────────────────────────────────────────────────────────── */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px */ --space-lg: 1rem; /* 16px */ --space-xl: 1.5rem; /* 24px */ --space-2xl: 2rem; /* 32px */ --space-3xl: 3rem; /* 48px */ /* ─────────────────────────── fluid spacing ─────────────────────── * For responsive padding/gap that adapts smoothly. Lifted formulae * pattern from Open Props (props.sizes.css). */ --space-fluid-sm: clamp(0.5rem, 1vw, 0.75rem); --space-fluid-md: clamp(0.75rem, 1.5vw, 1rem); --space-fluid-lg: clamp(1rem, 2.5vw, 1.5rem); /* ────────────────────────────── type scale ─────────────────────── * Fluid via clamp(). Lifted from Open Props (props.fonts.css) * fluid-font-size block, renamed to Dazzle's vocabulary. The * clamp expressions are non-trivial to derive correctly. * ───────────────────────────────────────────────────────────────── */ --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); --text-3xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem); --text-display: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); /* ─────────────────────────── heading scale (#983) ──────────────── * Two scales for two contexts. The app shell is dense and * compact (h1 ~18px); the marketing site is editorial and * expansive (h1 ~3.5rem). Pre-#983 every renderer hard-coded its * own font-size, so promoting `.table-title` from `--text-base` * to `--text-lg` was a one-off tweak instead of a tokenised * decision. * * The marketing tokens are also defined in `design-system.css` * (canonical home for site/marketing variables). Mirroring them * here keeps app-shell + marketing token discovery in one file * for adopters reading tokens.css to understand the system. */ --dz-heading-app-page-title: var(--text-lg); --dz-heading-app-section-title: var(--text-base); --dz-heading-app-subsection-title: var(--text-sm); --dz-heading-marketing-hero: var(--dz-font-size-hero-headline, 3.5rem); --dz-heading-marketing-cta: var(--dz-font-size-cta-headline, 3rem); --dz-heading-marketing-section: var(--dz-font-size-section-headline, 2.25rem); /* ─────────────────────────── font families ───────────────────── * `--font-system` is the OS-default sans stack; `--font-mono` is * used by tabular numerics in chart summaries (bar_track etc.). */ --font-system: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace; /* ─────────────────────────── line height ───────────────────────── * Unitless; multiplies the font-size of the same element. */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.8; /* ─────────────────────────── font weight ───────────────────────── * Variable-font friendly; only the weights we actually use. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─────────────────────────── radii ─────────────────────────────── * Use semantic names. Full = pill. */ /* Focus ring (HaTchi-MaXchi TASTE-1): accent at 40% alpha, 2px, offset 2px — one ring vocabulary for every interactive element. */ --focus-ring-color: color-mix(in oklab, var(--colour-brand) 40%, transparent); --focus-ring-width: 2px; --focus-ring-offset: 2px; --radius-sm: 0.25rem; /* 4px — small inputs, badges */ --radius-md: 0.375rem; /* 6px — cards, buttons */ --radius-lg: 0.75rem; /* 12px — large cards, modals */ --radius-full: 9999px; /* ─────────────────────────── shadows ───────────────────────────── * Layered for depth. Sources: Open Props shadow blocks adjusted * for Dazzle's visual identity (lower contrast, warmer ambient). */ --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.04), 0 1px 3px hsl(0 0% 0% / 0.06); --shadow-md: 0 2px 4px hsl(0 0% 0% / 0.04), 0 4px 8px hsl(0 0% 0% / 0.08); --shadow-lg: 0 4px 8px hsl(0 0% 0% / 0.04), 0 12px 24px hsl(0 0% 0% / 0.12); /* ─────────────────────────── motion ────────────────────────────── * Easings lifted from Open Props (props.easings.css). The * cubic-bezier values for spring-like easings are well-tuned. */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.5, -0.5, 0.5, 1.5); /* Spring-easing ladder, Open Props convention. Progressively * more bounce — pick the smallest one that conveys the affordance. * #960 layer 1. */ --ease-spring-1: cubic-bezier(0.5, 0.75, 0.75, 1.25); --ease-spring-2: cubic-bezier(0.5, 1, 0.75, 1.25); --ease-spring-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); --ease-spring-4: cubic-bezier(0.5, 1.5, 0.75, 1.25); --ease-spring-5: cubic-bezier(0.5, 1.75, 0.75, 1.25); /* Elastic easings — for dismiss/snap-back motion. */ --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25); --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25); --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); --duration-fast: 80ms; --duration-base: 150ms; --duration-slow: 300ms; /* Named animation shorthands, Open Props convention. Each combines * keyframe + duration + easing in one var so templates can write * `animation: var(--animation-fade-in)` directly. The keyframes * themselves are defined below the :root block. #960 layer 1. */ --animation-fade-in: fade-in var(--duration-base) var(--ease-out); --animation-fade-out: fade-out var(--duration-base) var(--ease-in); --animation-scale-up: scale-up var(--duration-base) var(--ease-spring-2); --animation-scale-down: scale-down var(--duration-base) var(--ease-in); --animation-slide-in-up: slide-in-up var(--duration-base) var(--ease-out); --animation-slide-in-down: slide-in-down var(--duration-base) var(--ease-out); --animation-slide-in-left: slide-in-left var(--duration-base) var(--ease-out); --animation-slide-in-right: slide-in-right var(--duration-base) var(--ease-out); --animation-slide-out-up: slide-out-up var(--duration-base) var(--ease-in); --animation-slide-out-down: slide-out-down var(--duration-base) var(--ease-in); --animation-slide-out-left: slide-out-left var(--duration-base) var(--ease-in); --animation-slide-out-right: slide-out-right var(--duration-base) var(--ease-in); --animation-shake-x: shake-x 0.4s var(--ease-out); --animation-pulse: pulse 2s var(--ease-in-out) infinite; /* ─────────────────────────── widths ────────────────────────────── * Common content widths. */ --width-prose: 65ch; --width-content: 56rem; --width-page: 80rem; /* App-shell content measure (``data-measure`` on ``.app-main``). * pick-a-measure.md — product readable form/detail; wide intermediate; * app soft ultrawide for list/board scan. */ --dz-content-measure: 48rem; /* product */ --dz-content-measure-wide: 56rem; /* wide (= --width-content) */ --dz-content-measure-app: 96rem; /* app soft cap */ /* ─────────────────────────── touch targets ─────────────────────── * Minimum hit-area on touch devices. Apple HIG calls for 44×44pt; * Material recommends 48×48dp. We use 44px as a good middle — * matches Apple, hits Material's 80% threshold, doesn't visually * inflate dense desktop UIs. * * The min-size is enforced under `@media (pointer: coarse)` only * (see `components/touch-targets.css`) so desktop pixel-perfect * sizing is preserved while touch users get a comfortable target. * * #958 cycle 1. */ --touch-target-min: 44px; /* ─────────────────────────── colour ramps ──────────────────────── * Raw OKLCH ramps lifted from Open Props * (props.colors-oklch.css), renamed to Dazzle's vocabulary. Use * semantic tokens (--colour-*) below for almost all styling; * raw ramps only when no semantic token fits. * ───────────────────────────────────────────────────────────────── */ --neutral-50: oklch(98.5% 0.002 247.84); --neutral-100: oklch(96.7% 0.003 264.54); --neutral-200: oklch(92.8% 0.006 264.53); --neutral-300: oklch(86.9% 0.012 252.89); --neutral-400: oklch(70.6% 0.022 261.32); --neutral-500: oklch(55.1% 0.027 264.36); --neutral-600: oklch(44.6% 0.030 256.80); --neutral-700: oklch(37.3% 0.034 259.73); --neutral-800: oklch(27.8% 0.030 256.85); --neutral-900: oklch(21.0% 0.034 264.66); --neutral-950: oklch(13.0% 0.028 261.69); --brand-50: oklch(97.0% 0.014 254.60); --brand-100: oklch(93.2% 0.032 255.59); --brand-200: oklch(88.2% 0.059 254.13); --brand-300: oklch(80.9% 0.105 251.81); --brand-400: oklch(70.7% 0.165 254.62); --brand-500: oklch(62.3% 0.214 259.81); --brand-600: oklch(54.6% 0.245 262.88); --brand-700: oklch(48.8% 0.243 264.05); --brand-800: oklch(42.4% 0.199 265.64); --brand-900: oklch(37.9% 0.146 265.52); --brand-950: oklch(28.2% 0.091 267.94); --success-500: oklch(64.8% 0.150 142.50); --success-600: oklch(53.0% 0.140 142.50); /* 4.5:1 on the soft wash AND white (axe-verified) */ --warning-500: oklch(76.9% 0.188 70.08); --warning-600: oklch(52.0% 0.150 70.08); /* 4.5:1 on the soft wash AND white (axe-verified) */ --danger-500: oklch(63.7% 0.208 25.33); --danger-600: oklch(51.0% 0.195 25.33); /* 4.5:1 as text on wash/white; fills carry white text */ /* ─────────────────────────── colour: semantic ──────────────────── * Semantic tokens that components reference. Project themes * override THESE, not the raw ramps. light-dark() handles * scheme switching when supported; @media fallback below. * ───────────────────────────────────────────────────────────────── */ --colour-bg: light-dark(var(--neutral-50), var(--neutral-950)); --colour-surface: light-dark(white, var(--neutral-900)); --colour-surface-muted: light-dark(var(--neutral-100), var(--neutral-800)); --colour-text: light-dark(var(--neutral-900), var(--neutral-50)); --colour-text-muted: light-dark(var(--neutral-600), var(--neutral-400)); --colour-border: light-dark(var(--neutral-200), var(--neutral-700)); --colour-brand: var(--brand-600); /* Brand as TEXT (badges/avatars/tags on washes): scheme-aware, unlike --colour-brand which stays the vivid FILL accent in both schemes. */ --colour-brand-text: light-dark(var(--brand-600), var(--brand-300)); --colour-brand-contrast: white; /* foreground on filled brand fills (CTAs) */ --colour-accent: var(--brand-500); /* Tone TEXT semantics are scheme-aware: the -600 steps carry 4.5:1 on light washes/white; dark mode needs LIGHT tone text on dark washes. Solid fills that carry white text must use the fixed ramp steps (--success-600 etc.), never these flippable text tokens. */ --colour-success: light-dark(var(--success-600), oklch(74% 0.13 142.50)); --colour-warning: light-dark(var(--warning-600), oklch(80% 0.13 70.08)); --colour-danger: light-dark(var(--danger-600), oklch(75% 0.15 25.33)); /* Info: cyan-leaning so chart series stay distinguishable from * --colour-brand (hue ~263). Scheme-stable, like the tone hues. */ --colour-info: oklch(60% 0.13 220); /* Tone tints (background washes for surfaces) — semantic tokens * the tones replacements consume. Authors don't hand-craft * `hsl(var(--success) / 0.08)` strings any more. */ --colour-success-soft: light-dark(oklch(from var(--colour-success) 96.5% 0.04 h), oklch(from var(--colour-success) 28% 0.06 h)); --colour-warning-soft: light-dark(oklch(from var(--colour-warning) 96.5% 0.04 h), oklch(from var(--colour-warning) 28% 0.06 h)); --colour-danger-soft: light-dark(oklch(from var(--colour-danger) 96.5% 0.04 h), oklch(from var(--colour-danger) 28% 0.06 h)); --colour-brand-soft: light-dark(oklch(from var(--colour-brand) 96.5% 0.04 h), oklch(from var(--colour-brand) 28% 0.06 h)); /* Default colour-scheme advertisement — lets browser-chrome * (scrollbars, form controls) pick appropriate variants. */ color-scheme: light dark; } /* #938 — bind `data-theme="dark"` (the JS toggle's output) to the * actual `color-scheme` property so `light-dark()` flips when the * user toggles. Without this, the toggle would set `data-theme` but * `light-dark()` would still resolve based on `prefers-color-scheme`, * leaving framework components stuck on the light variant of * `--colour-bg` / `--colour-text` / `--colour-border` even though * the topbar swapped its sun/moon icon. The marketing-site `site.js` * sets `style.colorScheme` imperatively for the same reason; this * CSS rule covers the in-app shell whose Alpine controller only * sets `data-theme`. */ [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* Fallback for browsers without light-dark() support. Modern * Chrome / Firefox / Safari all support it as of 2024 but the * @supports gate keeps the door open for outliers. */ @media (prefers-color-scheme: dark) { @supports not (color: light-dark(white, black)) { :root { --colour-bg: var(--neutral-950); --colour-surface: var(--neutral-900); --colour-surface-muted: var(--neutral-800); --colour-text: var(--neutral-50); --colour-text-muted: var(--neutral-400); --colour-border: var(--neutral-700); --colour-success: oklch(74% 0.13 142.50); --colour-warning: oklch(80% 0.13 70.08); --colour-danger: oklch(75% 0.15 25.33); --colour-brand-text: var(--brand-300); --colour-success-soft: oklch(from var(--colour-success) 28% 0.06 h); --colour-warning-soft: oklch(from var(--colour-warning) 28% 0.06 h); --colour-danger-soft: oklch(from var(--colour-danger) 28% 0.06 h); --colour-brand-soft: oklch(from var(--colour-brand) 28% 0.06 h); } } } /* ─────────────────────────── animation keyframes ──────────────────── * Backing keyframes for the `--animation-*` named tokens above. * Prefixed `` so they don't collide with project-defined * keyframes. Open Props convention; #960 layer 1. * * Honoured by `prefers-reduced-motion: reduce` further down. */ @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } @keyframes scale-up { from { transform: scale(0.92); opacity: 0; } } @keyframes scale-down { to { transform: scale(0.92); opacity: 0; } } @keyframes slide-in-up { from { transform: translateY(8%); opacity: 0; } } @keyframes slide-in-down { from { transform: translateY(-8%); opacity: 0; } } @keyframes slide-in-left { from { transform: translateX(8%); opacity: 0; } } @keyframes slide-in-right { from { transform: translateX(-8%); opacity: 0; } } @keyframes slide-out-up { to { transform: translateY(-8%); opacity: 0; } } @keyframes slide-out-down { to { transform: translateY(8%); opacity: 0; } } @keyframes slide-out-left { to { transform: translateX(-8%); opacity: 0; } } @keyframes slide-out-right { to { transform: translateX(8%); opacity: 0; } } @keyframes shake-x { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Reduced-motion guard: collapse all * animations to a near-instant * fade so users who request reduced motion still get state changes * without parallax/translate/scale. Operates on the keyframe name * (`animation-name`) so component-local @keyframes definitions * (dashboard, etc.) aren't affected by this rule. */ @media (prefers-reduced-motion: reduce) { [style*="animation"], [class*="anim-"], .toast { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } } /* ── base/design-system.css ── */ @layer tokens { /* ============================================================================= DAZZLE Design System (app-shell layer) Non-colour design tokens (type/space/radius/shadow/motion + --dz-* site tokens) and app-shell component overrides. All colour comes from the HaTchi-MaXchi OKLCH semantic tokens (--colour-*, packages/hatchi-maxchi/tokens/tokens.css) — the legacy shadcn-era HSL token system was removed in the Stage 2b fossil migration. Sections: 1. Design Tokens (CSS custom properties) 2. (removed — DaisyUI theme bridge, #1113) 3. Typography 4. Global Refinements 5. Component Overrides 6. Loading States & Animations 7. Responsive Refinements ============================================================================= */ /* ============================================================================= 1. Design Tokens — Light Mode (default) Colour comes from the HaTchi-MaXchi OKLCH semantic tokens (--colour-*, tokens/tokens.css). The legacy shadcn-era HSL token block (--background/--foreground/--primary/…) was removed in the Stage 2b fossil migration — every consumer now references the semantic tokens directly, and light/dark switching is handled by light-dark() in tokens.css (no per-scheme block needed here). ============================================================================= */ :root { /* --- Typography --- */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, 'Cascadia Code', monospace; /* --- Spacing scale --- */ --space-0: 0; --space-0-5: 0.125rem; --space-1: 0.25rem; --space-1-5: 0.375rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* --- Border radius --- */ --radius-sm: 0.25rem; --radius: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.625rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* --- Shadows (zinc-tinted) --- */ --shadow-xs: 0 1px 2px 0 hsl(240 5.9% 10% / 0.03); --shadow-sm: 0 1px 3px 0 hsl(240 5.9% 10% / 0.06), 0 1px 2px -1px hsl(240 5.9% 10% / 0.06); --shadow-md: 0 4px 6px -1px hsl(240 5.9% 10% / 0.07), 0 2px 4px -2px hsl(240 5.9% 10% / 0.05); --shadow-lg: 0 10px 15px -3px hsl(240 5.9% 10% / 0.07), 0 4px 6px -4px hsl(240 5.9% 10% / 0.05); --shadow-xl: 0 20px 25px -5px hsl(240 5.9% 10% / 0.08), 0 8px 10px -6px hsl(240 5.9% 10% / 0.05); /* --- Transitions --- */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* --- Legacy --dz-* tokens (backward compat) --- */ --dz-shadow-sm: var(--shadow-sm); --dz-shadow-card: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 20px -10px oklch(0 0 0 / 0.14); --dz-shadow-md: var(--shadow-md); --dz-shadow-lg: var(--shadow-lg); --dz-transition-fast: var(--duration-fast); --dz-transition-normal: var(--duration-normal); --dz-accent-glow: color-mix(in oklab, var(--colour-brand) 15%, transparent); /* --- Site section tokens (marketing pages) --- */ /* Hero gradient — overridden by ThemeSpec when a custom palette is set */ --dz-hero-bg-from: oklch(0.45 0.18 265); --dz-hero-bg-to: oklch(0.38 0.20 280); --dz-shadow-hero: 0 20px 60px -12px oklch(0 0 0 / 0.25); --dz-shadow-xl: var(--shadow-xl); /* Text hierarchy (oklch neutrals) */ --dz-text-foreground: oklch(0.15 0 0); --dz-text-emphasis: oklch(0.35 0 0); --dz-text-body: oklch(0.45 0 0); --dz-text-muted: oklch(0.5 0 0); /* Surfaces */ --dz-surface-card: white; --dz-feature-icon-bg: oklch(0.92 0.03 260); --dz-section-alt-bg: oklch(0.97 0.01 260); --dz-pricing-highlight-bg: oklch(0.45 0.18 270); /* Marketing card finish (features / cards / testimonials) — families reflavor */ --dz-card-shadow-hover: 0 2px 4px oklch(0 0 0 / 0.06), 0 20px 36px -14px oklch(0 0 0 / 0.22); --dz-card-border: 1px solid oklch(0 0 0 / 0.06); --dz-card-icon-ring: inset 0 0 0 1px oklch(0 0 0 / 0.06); /* Marketing CTA buttons — families reflavor (glow) */ --dz-cta-fill: white; --dz-cta-text: var(--dz-hero-bg-from); --dz-cta-fill-hover: var(--dz-hero-btn-hover, oklch(0.98 0 0)); --dz-cta-shadow: 0 6px 20px -8px oklch(0 0 0 / 0.35); --dz-cta-shadow-hover: 0 12px 28px -8px oklch(0 0 0 / 0.45); /* Borders (transparent black) */ --dz-border-default: oklch(0 0 0 / 0.1); --dz-border-subtle: oklch(0 0 0 / 0.08); --dz-border-input: oklch(0 0 0 / 0.15); /* Hero overlays (transparent white, for dark backgrounds) */ --dz-hero-overlay: oklch(1 0 0 / 0.1); --dz-hero-border: oklch(1 0 0 / 0.5); --dz-hero-border-hover: oklch(1 0 0 / 0.7); --dz-hero-text-dimmed: oklch(1 0 0 / 0.8); --dz-hero-border-dim: oklch(1 0 0 / 0.15); --dz-hero-btn-hover: oklch(0.98 0 0); /* Header */ --dz-header-bg: oklch(1 0 0 / 0.95); /* Footer */ --dz-footer-bg: oklch(0.15 0.01 260); --dz-footer-text: oklch(0.7 0 0); --dz-footer-link: oklch(0.6 0 0); --dz-footer-border: oklch(1 0 0 / 0.1); --dz-footer-heading: oklch(1 0 0); /* Logo */ --dz-logo-color: oklch(0.25 0.02 260); /* Error feedback */ --dz-error-bg: oklch(0.95 0.03 25); --dz-error-text: oklch(0.45 0.15 25); /* Focus ring */ --dz-ring-glow: 0 0 0 3px oklch(0.50 0.18 270 / 0.15); /* Section spacing */ --dz-spacing-hero-y: 6rem; --dz-spacing-section-y: 5rem; --dz-spacing-feature-gap: 2rem; --dz-spacing-card-padding: 1.5rem; /* Fluid typography — clamp() for responsive sizing without breakpoints */ --dz-font-size-fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --dz-font-size-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --dz-font-size-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --dz-font-size-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem); --dz-font-size-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 1.75rem); --dz-font-size-fluid-2xl: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); --dz-font-size-fluid-3xl: clamp(1.875rem, 1.3rem + 2.875vw, 3rem); /* Typography — hero */ --dz-font-size-hero-headline: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem); --dz-font-weight-hero-headline: 800; --dz-line-height-hero-headline: 1.1; --dz-letter-spacing-hero-headline: -0.02em; --dz-font-size-subhead: 1.25rem; --dz-line-height-subhead: 1.5; /* Typography — CTA (#983). Pre-tokenisation, site-sections.css * inlined the 3rem fallback. Defining it here keeps the marketing * heading scale discoverable in one place. */ --dz-font-size-cta-headline: 3rem; /* Typography — sections */ --dz-font-size-section-headline: 2.25rem; --dz-font-weight-section-headline: 700; --dz-line-height-section-headline: 1.2; --dz-letter-spacing-section-headline: -0.01em; --dz-font-size-body: 1rem; --dz-line-height-body: 1.6; /* Radii */ --dz-radius-button: 0.5rem; --dz-radius-card: 0.75rem; --dz-radius-lg: 1rem; --dz-radius-sm: 0.375rem; } /* ============================================================================= 1b. Dark Mode Tokens ============================================================================= */ .dark, [data-theme="dark"] { --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.1); --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.15); --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.2), 0 2px 4px -2px hsl(0 0% 0% / 0.15); --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.25), 0 4px 6px -4px hsl(0 0% 0% / 0.15); --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.3), 0 8px 10px -6px hsl(0 0% 0% / 0.2); --dz-sidebar-from: hsl(240 10% 5%); --dz-sidebar-to: hsl(240 10% 8%); --dz-accent-glow: color-mix(in oklab, var(--colour-brand) 20%, transparent); /* Site section overrides for dark mode */ --dz-section-alt-bg: oklch(0.08 0.01 260); --dz-feature-icon-bg: oklch(0.20 0.04 260); /* Text hierarchy */ --dz-text-foreground: oklch(0.95 0 0); --dz-text-emphasis: oklch(0.85 0 0); --dz-text-body: oklch(0.70 0 0); --dz-text-muted: oklch(0.55 0 0); /* Surfaces */ --dz-surface-card: oklch(0.18 0.01 260); /* Borders */ --dz-border-default: oklch(1 0 0 / 0.12); --dz-border-subtle: oklch(1 0 0 / 0.08); --dz-border-input: oklch(1 0 0 / 0.15); /* Header / Footer */ --dz-header-bg: oklch(0.15 0.01 260 / 0.95); --dz-footer-bg: oklch(0.08 0.01 260); --dz-footer-text: oklch(0.65 0 0); --dz-footer-link: oklch(0.55 0 0); --dz-footer-border: oklch(1 0 0 / 0.1); --dz-footer-heading: oklch(1 0 0); /* Logo */ --dz-logo-color: oklch(0.95 0 0); /* Error feedback */ --dz-error-bg: oklch(0.20 0.06 25); --dz-error-text: oklch(0.80 0.15 25); /* Focus ring */ --dz-ring-glow: 0 0 0 3px oklch(0.60 0.18 270 / 0.15); } /* No-JS / pre-paint parity (#tranche2): the shadow + --dz-* site tokens must follow prefers-color-scheme like the OKLCH set does, otherwise consumers render light values on dark until theme JS sets [data-theme]. Mirrors the tokens.css fallback. (The legacy HSL colour tokens this block also carried were removed in the Stage 2b fossil migration — light-dark() in tokens.css covers the --colour-* set natively.) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.1); --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.15); --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.2), 0 2px 4px -2px hsl(0 0% 0% / 0.15); --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.25), 0 4px 6px -4px hsl(0 0% 0% / 0.15); --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.3), 0 8px 10px -6px hsl(0 0% 0% / 0.2); --dz-sidebar-from: hsl(240 10% 5%); --dz-sidebar-to: hsl(240 10% 8%); --dz-accent-glow: color-mix(in oklab, var(--colour-brand) 20%, transparent); /* Site section overrides for dark mode */ --dz-section-alt-bg: oklch(0.08 0.01 260); --dz-feature-icon-bg: oklch(0.20 0.04 260); /* Text hierarchy */ --dz-text-foreground: oklch(0.95 0 0); --dz-text-emphasis: oklch(0.85 0 0); --dz-text-body: oklch(0.70 0 0); --dz-text-muted: oklch(0.55 0 0); /* Surfaces */ --dz-surface-card: oklch(0.18 0.01 260); /* Borders */ --dz-border-default: oklch(1 0 0 / 0.12); --dz-border-subtle: oklch(1 0 0 / 0.08); --dz-border-input: oklch(1 0 0 / 0.15); /* Header / Footer */ --dz-header-bg: oklch(0.15 0.01 260 / 0.95); --dz-footer-bg: oklch(0.08 0.01 260); --dz-footer-text: oklch(0.65 0 0); --dz-footer-link: oklch(0.55 0 0); --dz-footer-border: oklch(1 0 0 / 0.1); --dz-footer-heading: oklch(1 0 0); /* Logo */ --dz-logo-color: oklch(0.95 0 0); /* Error feedback */ --dz-error-bg: oklch(0.20 0.06 25); --dz-error-text: oklch(0.80 0.15 25); /* Focus ring */ --dz-ring-glow: 0 0 0 3px oklch(0.60 0.18 270 / 0.15); } } /* ============================================================================= 2. (DaisyUI theme bridge removed in #1113.) This block previously mapped our design tokens to DaisyUI's internal --b1/--b2/--p/--s/etc. variables. DaisyUI is no longer loaded — the CDN tags were dropped from `site_renderer.get_shared_head_html` in the same release — so those variable mappings became dead weight. Any selector below that uses `bg-base-100` etc. as a class name is now styled by our own rules (drawer-side block in section 5), not by DaisyUI's component CSS. ============================================================================= */ /* ============================================================================= 3. Typography ============================================================================= */ body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--colour-text); background-color: var(--colour-bg); } code, pre, kbd, samp { font-family: var(--font-mono); } /* ============================================================================= 4. Global Refinements ============================================================================= */ /* Smooth transitions on interactive elements */ a, button, .btn, input, select, textarea, .card, .menu li a { transition: all var(--duration-fast) var(--ease-default); } /* Focus visibility — universal net, same ring vocabulary as the HaTchi-MaXchi per-element rules in base.css (TASTE-1). */ :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* Remove default focus outline — rely on :focus-visible only */ :focus:not(:focus-visible) { outline: none; } /* High contrast mode adjustments */ @media (prefers-contrast: high) { :root { --colour-border: light-dark(var(--neutral-600), var(--neutral-400)); --colour-text-muted: light-dark(var(--neutral-700), var(--neutral-300)); } .btn { border: 2px solid currentColor; } .badge { border: 1px solid currentColor; } .card { border-width: 2px; } .input, .select, .textarea { border-width: 2px; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================= 5. Component Overrides ============================================================================= */ /* --- Sidebar --- */ .drawer-side aside, .drawer-side > aside.bg-base-200, .drawer-side > aside.bg-base-100 { background: var(--colour-surface); border-inline-end: 1px solid var(--colour-border); } .drawer-side aside > div:first-child { border-block-end-color: var(--colour-border); } .drawer-side aside > div:first-child a { color: var(--colour-text); letter-spacing: -0.01em; } .drawer-side .menu a { color: var(--colour-text-muted); border-radius: var(--radius-md); margin-bottom: 0.125rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; } .drawer-side .menu a:hover { background: var(--colour-surface-muted); color: var(--colour-text); } .drawer-side .menu a.active { background: var(--colour-brand); color: var(--colour-brand-contrast); font-weight: 500; box-shadow: none; } .drawer-side aside > div:last-child { border-block-start-color: var(--colour-border); } /* --- Navbar --- */ .navbar { backdrop-filter: blur(8px); background: color-mix(in oklab, var(--colour-bg) 85%, transparent); border-block-end: 1px solid var(--colour-border); } .navbar .text-xl { font-weight: 600; letter-spacing: -0.02em; } /* --- Cards --- */ /* HYPERPART: card */ .card { box-shadow: var(--shadow-sm); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); background: var(--colour-surface); color: var(--colour-text); transition: box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default); } .card:hover { box-shadow: var(--shadow-md); } .card[onclick]:hover, .card a:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } /* Card content primitives — semantic classes so demos and consumers don't reach for inline styles. A stat/KPI card is label + value (+ optional delta); `card-body` is the padded content wrapper. */ .card-body { padding: var(--space-xl); } .card-label { font-size: var(--text-sm); color: var(--colour-text-muted); } .card-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; } .card-delta { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--colour-success); } .card-delta svg { width: 0.875rem; height: 0.875rem; } .card-title { font-weight: 600; letter-spacing: -0.01em; } /* Legacy DaisyUI shim classes (.card-body, .btn, .btn-primary, .btn-ghost, .btn-outline, .btn-error, .input, .select, .textarea, .label-text, .table, .table thead th, .table tbody td) removed in v0.56.0. All components now use the OKLCH semantic tokens (var(--colour-*)). See the component contracts at ~/.claude/skills/ux-architect/components/. */ /* --- Modal/Dialog (kept — used by the native modal component) --- */ .modal-box { box-shadow: var(--shadow-xl); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); background: var(--colour-surface); } .modal-backdrop { background: color-mix(in oklab, var(--colour-text) 50%, transparent); backdrop-filter: blur(4px); } /* Legacy DaisyUI shim classes removed in v0.56.0: .badge, .badge-primary, .badge-success, .badge-warning, .badge-error, .badge-info, .badge-ghost, .stats, .stat, .stat-title, .stat-value, .stat-desc, .alert, .alert-info, .alert-success, .alert-warning, .alert-error — all replaced by inline Tailwind with design-system tokens. See macros/status_badge.html and the component contracts. */ /* --- Page Header --- */ .page-header { margin-block-end: 1.5rem; } .page-header h1, .page-header .text-2xl { font-weight: 700; letter-spacing: -0.02em; color: var(--colour-text); } .page-header .text-sm { color: var(--colour-text-muted); } /* Empty State — consolidated into components/fragment-primitives.css (the * single home for the `.empty-state` primitive). The base container + * `__` parts now live together there; the broad `.empty-state svg` fossil * was dropped in favour of the `__icon` wrapper contract. */ /* --- Action Bar --- */ .action-bar { display: flex; justify-content: space-between; align-items: center; margin-block-end: 1rem; gap: 1rem; } .action-bar .btn { gap: 0.5rem; } /* --- Dropdown menus --- */ .menu.shadow { border: 1px solid var(--colour-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--colour-surface); color: var(--colour-text); } /* ============================================================================= 6. Loading States & Animations ============================================================================= */ .loading { color: var(--colour-brand); } /* NOTE: the skeleton shimmer that lived here was superseded by the `skeleton` Hyperpart (components/skeleton.css) — the single canonical `.skeleton` with data-shape variants. Two `.skeleton` blocks resolved only by @layer order was a footgun; retired 2026-07-04. */ /* Spinner for HTMX loading */ .spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--colour-surface-muted); border-top-color: var(--colour-brand); border-radius: 50%; animation: spin 0.6s linear infinite; } .spinner--sm { width: 0.75rem; height: 0.75rem; border-width: 1.5px; } @keyframes spin { to { transform: rotate(360deg); } } /* HTMX indicator visibility — moved to dz.css (loaded on all pages) */ .htmx-request .htmx-hide-on-request { display: none; } /* Toast slide-in — keyframes owned by components/toast.css (HYPERPART: toast). * Legacy Daisy-style `.toast .alert` still rides the shared enter motion. */ .toast .alert { animation: toast-in var(--duration-slow) var(--ease-out); } /* ============================================================================= 7. Responsive Refinements ============================================================================= */ /* Responsive refinements for DaisyUI .card-body / .table / .stat removed in v0.56.0 — components now use inline Tailwind with responsive prefixes. */ /* ============================================================================= 8. Container Queries ============================================================================= */ /* Table container — enable container queries for responsive stacking */ .overflow-x-auto[role="region"] { container-type: inline-size; container-name: table-container; } /* Stack table on narrow containers */ @container table-container (max-width: 480px) { .table thead { display: none; } .table tbody tr { display: block; margin-block-end: 0.75rem; border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: 0.5rem; } .table tbody td { display: flex; justify-content: space-between; padding-block: 0.25rem; padding-inline: 0.5rem; border-block-end: none; } .table tbody td::before { content: attr(data-label); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--colour-text-muted); } } /* Tom Select token overrides removed (Dazzle HMC-018 slice 3): the vendored TomSelect library it themed was retired — widget:combobox + widget:tags are HM-native progressive-enhancement controllers (combobox / tags) and multiselect had zero usage. No TomSelect-generated markup exists anymore. */ /* ── Range slider token overrides (UX-023 widget:slider) ──────────────── */ /* HYPERPART: slider */ /* Scoped to input[type="range"][data-slider] so generic ranges elsewhere */ /* keep their browser-default appearance. */ input[type="range"][data-slider] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; height: 16px; /* enough room for the thumb */ padding: 0; } input[type="range"][data-slider]:focus { outline: none; } /* Track — WebKit / Blink */ input[type="range"][data-slider]::-webkit-slider-runnable-track { height: 4px; background: var(--colour-surface-muted); border-radius: 2px; border: 0; } /* Track — Gecko */ input[type="range"][data-slider]::-moz-range-track { height: 4px; background: var(--colour-surface-muted); border-radius: 2px; border: 0; } /* Thumb — WebKit / Blink */ input[type="range"][data-slider]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 16px; width: 16px; border-radius: 50%; background: var(--colour-brand); border: 0; cursor: pointer; margin-top: -6px; /* (thumb - track) / 2 = (16 - 4) / 2 = 6 */ transition: filter 80ms cubic-bezier(0.2, 0, 0, 1), box-shadow 80ms cubic-bezier(0.2, 0, 0, 1); } input[type="range"][data-slider]::-webkit-slider-thumb:hover { filter: brightness(1.05); } input[type="range"][data-slider]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--focus-ring-color); } /* Thumb — Gecko */ input[type="range"][data-slider]::-moz-range-thumb { height: 16px; width: 16px; border-radius: 50%; background: var(--colour-brand); border: 0; cursor: pointer; transition: filter 80ms cubic-bezier(0.2, 0, 0, 1), box-shadow 80ms cubic-bezier(0.2, 0, 0, 1); } input[type="range"][data-slider]::-moz-range-thumb:hover { filter: brightness(1.05); } input[type="range"][data-slider]:focus::-moz-range-thumb { box-shadow: 0 0 0 2px var(--focus-ring-color); } input[type="range"][data-slider]:disabled { opacity: 0.6; cursor: not-allowed; } /* ── Pickr token overrides (UX-024 widget:colorpicker) ────────────────── */ /* Linear-aesthetic override of vendor/pickr.css (nano theme). Scoped to */ /* .pcr-app so the rules don't leak into non-Pickr elements. */ .pcr-app { background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: 6px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06); font-family: inherit; padding: 12px; } .pcr-app .pcr-selection .pcr-color-preview { border-radius: 3px; border: 1px solid var(--colour-border); } .pcr-app .pcr-selection .pcr-color-chooser, .pcr-app .pcr-selection .pcr-color-opacity { margin-inline-start: 8px; } .pcr-app .pcr-interaction { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--colour-border); } .pcr-app .pcr-interaction input, .pcr-app .pcr-interaction .pcr-result { background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: 3px; color: var(--colour-text); font-size: 12px; font-family: ui-monospace, Menlo, monospace; padding: 4px 8px; height: 26px; } .pcr-app .pcr-interaction input:focus, .pcr-app .pcr-interaction .pcr-result:focus { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); border-color: var(--colour-brand); } .pcr-app .pcr-interaction .pcr-type.active, .pcr-app .pcr-interaction .pcr-type:hover { background: var(--colour-surface-muted); color: var(--colour-text); } .pcr-app .pcr-interaction .pcr-type { background: transparent; color: var(--colour-text-muted); border: 1px solid var(--colour-border); border-radius: 3px; padding: 4px 8px; font-size: 11px; font-weight: 500; } .pcr-app .pcr-interaction .pcr-save { background: var(--colour-brand); color: var(--colour-brand-contrast); border: 1px solid var(--colour-brand); border-radius: 3px; padding: 4px 10px; font-size: 12px; font-weight: 500; transition: filter 80ms cubic-bezier(0.2, 0, 0, 1); } .pcr-app .pcr-interaction .pcr-save:hover { filter: brightness(1.1); } .pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear { background: transparent; color: var(--colour-text-muted); border: 1px solid var(--colour-border); border-radius: 3px; padding: 4px 10px; font-size: 12px; } .pcr-app .pcr-swatches { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--colour-border); } .pcr-app .pcr-swatches > button { border: 1px solid var(--colour-border); border-radius: 3px; margin: 2px; } /* Error state propagation via the hidden input */ input[aria-invalid="true"][type="hidden"] + .pcr-app, [data-widget="colorpicker"] .pcr-trigger[aria-invalid="true"] { outline: 1px solid var(--colour-danger); } /* Quill .ql-* token overrides removed in #1001 — Quill replaced by * richtext (Dazzle-native) in #977 cycle 4. Caught by /fuzz * runtime pass: every rich_text page was 404ing on quill.snow.css. * The .richtext-* rules in components/richtext.css handle styling. */ /* ── Progress bar token overrides (UX-027 file upload, UX-030 review queue) */ /* Scoped to progress[data-file-progress] and progress[data-progress] */ /* so generic elements elsewhere keep their browser-default look. */ progress[data-file-progress], progress[data-progress] { appearance: none; -webkit-appearance: none; border: 0; height: 4px; overflow: hidden; border-radius: 2px; background: var(--colour-surface-muted); } progress[data-file-progress]::-webkit-progress-bar, progress[data-progress]::-webkit-progress-bar { background: var(--colour-surface-muted); border-radius: 2px; } progress[data-file-progress]::-webkit-progress-value, progress[data-progress]::-webkit-progress-value { background: var(--colour-brand); border-radius: 2px; transition: width 120ms cubic-bezier(0.2, 0, 0, 1); } progress[data-file-progress]::-moz-progress-bar, progress[data-progress]::-moz-progress-bar { background: var(--colour-brand); border-radius: 2px; } } /* ── base/base.css ── */ @layer base { /* * base.css — element defaults that apply before any component CSS. * * Sets typography, link colour, form-control surface, and the * canonical body background. References tokens only; never literal * values. Wrapped in @layer base (declared in dazzle.css). * * The dividing line between reset.css and base.css: * reset — strips browser defaults to a neutral baseline * base — applies Dazzle's defaults (the brand voice in CSS) */ body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--colour-text); background: var(--colour-bg); } /* Headings — sizes and weights, not spacing. Spacing is the * caller's concern (component or utility). */ h1 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: -0.02em; } h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.015em; } h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; } h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); } h5 { font-size: var(--text-base); font-weight: var(--weight-semibold); } h6 { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; } /* Links — inherit colour by default; components apply brand tint * where appropriate (e.g. inline body copy). */ a { color: inherit; text-decoration-color: var(--colour-border); text-underline-offset: 0.15em; } a:hover, a:focus-visible { text-decoration-color: currentColor; } /* Form controls — minimal Dazzle-flavoured baseline so an * un-styled looks intentional rather than browser-default. * Components extend this; they do not fight it. * * box-sizing: border-box is mandatory here. UAs treat as content-box. * Progressive enhancement (combobox: select → text input) then jumps * outer height by padding+border (~18px) while min-height stays 2.5rem. * Force one box model so form-input / combobox-input / bare controls match. */ input, textarea, select { box-sizing: border-box; background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } button { background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; font-weight: var(--weight-medium); transition: background var(--duration-fast) var(--ease-out); } button:hover:not(:disabled) { background: var(--colour-bg); } button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } /* TASTE-1 safety net: every other focusable gets the same ring — links, * summary, ARIA widgets, tabindex hosts. :where() keeps specificity 0 so * components can still opt into richer treatments without fighting it. */ :where(a, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="menuitem"]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } button:disabled { cursor: not-allowed; opacity: 0.6; } /* Code + pre — monospace family, neutral surface. */ code, kbd, samp, pre { font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; font-size: 0.95em; } pre { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: var(--space-md); overflow-x: auto; } /* Tables — a sensible default. Components override for data grids. */ table { border-collapse: collapse; width: 100%; } th, td { text-align: start; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--colour-border); } th { font-weight: var(--weight-semibold); color: var(--colour-text-muted); font-size: var(--text-sm); } /* ── screen-reader-only utility ────────────────────────────────── * The standard clip pattern (matches Dazzle utilities.css verbatim). * Un-prefixed by design: it is generic a11y plumbing referenced by * emitter markup (e.g. the wizard stepper's SR status spans), not a * design-system token. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* ── components/accordion.css ── */ @layer components { /* HYPERPART: accordion */ /* * accordion — native
disclosure group. * * Zero JS. Single-open exclusivity is the HTML `name=` attribute: items * sharing a name auto-close their siblings (the shadcn `type="single"` * behaviour, with no controller). Drop `name` for an independent * (multi-open) group. Keyboard + AT semantics are the browser's own *
/ — nothing to re-implement. */ .accordion { border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); overflow: hidden; } .accordion__item + .accordion__item { border-block-start: 1px solid var(--colour-border); } .accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); cursor: pointer; list-style: none; transition: background var(--duration-fast) var(--ease-out); } .accordion__trigger::-webkit-details-marker { display: none; } .accordion__trigger:hover { background: var(--colour-surface-muted); } .accordion__trigger:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); /* inset: the accordion clips its corners (overflow:hidden), so an outward offset ring would be cropped at the item edges. */ outline-offset: calc(var(--focus-ring-offset) * -1); } /* CSS chevron — inherits currentColor, rotates when the item is open. */ .accordion__trigger::after { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; opacity: 0.55; mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); transition: transform var(--duration-base) var(--ease-out); } .accordion__item[open] .accordion__trigger::after { transform: rotate(180deg); } .accordion__panel { padding: 0 var(--space-lg) var(--space-md); font-size: var(--text-sm); color: var(--colour-text-muted); line-height: var(--leading-normal); } @media (prefers-reduced-motion: reduce) { .accordion__trigger, .accordion__trigger::after { transition: none; } } } /* ── components/alert.css ── */ @layer components { /* * alert — HaTchi-MaXchi tranche 1 (spec: hatchi-maxchi-standalone). * * Identity signals: tone wash surface (--colour-*-soft) + registry icon + * text — colour never carries meaning alone (WCAG 1.4.1 as aesthetic). * * Contract: * * Tones: info (default) | success | warning | destructive | neutral. */ .alert { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-lg); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); font-size: var(--text-sm); } .alert__icon { display: inline-flex; width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-block-start: 0.125rem; } .alert__icon svg { width: 100%; height: 100%; display: block; } .alert__title { font-weight: var(--weight-semibold); margin-block-end: 0.125rem; } .alert__description { color: var(--colour-text-muted); line-height: var(--leading-normal); } .alert[data-tone="info"] { background: var(--colour-brand-soft); border-color: color-mix(in oklab, var(--colour-brand) 25%, var(--colour-border)); } .alert[data-tone="info"] .alert__icon { color: var(--colour-brand); } .alert[data-tone="success"] { background: var(--colour-success-soft); border-color: color-mix(in oklab, var(--colour-success) 25%, var(--colour-border)); } .alert[data-tone="success"] .alert__icon { color: var(--colour-success); } .alert[data-tone="warning"] { background: var(--colour-warning-soft); border-color: color-mix(in oklab, var(--colour-warning) 25%, var(--colour-border)); } .alert[data-tone="warning"] .alert__icon { color: var(--colour-warning); } .alert[data-tone="destructive"] { background: var(--colour-danger-soft); border-color: color-mix(in oklab, var(--colour-danger) 25%, var(--colour-border)); } .alert[data-tone="destructive"] .alert__icon { color: var(--colour-danger); } /* ── separator ────────────────────────────────────────────────────── */ /* HYPERPART: separator */ .separator { border: none; border-block-start: 1px solid var(--colour-border); margin-block: var(--space-lg); /* The UA gives
margin-inline auto; in a column flexbox those auto * margins absorb ALL free space and the rule's width collapses to zero * (rendered as a blank line). Pin the inline margins. */ margin-inline: 0; } .separator--vertical { display: inline-block; width: 0; align-self: stretch; border-block-start: none; border-inline-start: 1px solid var(--colour-border); margin-block: 0; margin-inline: var(--space-md); } /* ── data-tooltip — CSS-only attribute tooltip ────────────────────── */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; inset-block-end: calc(100% + 0.375rem); inset-inline-start: 50%; translate: -50% 0; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); background: var(--colour-text); color: var(--colour-bg); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); z-index: 50; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transition-delay: 300ms; } /* Forced open — gallery capture / docs / dual-lock stills that must show the hint without hover (coherence + Playwright static shots). Do not use on product surfaces that should stay hover-only. */ [data-tooltip][data-tooltip-open]::after { opacity: 1; transition-delay: 0ms; } @media (prefers-reduced-motion: reduce) { [data-tooltip]::after { transition: none; } } /* HYPERPART: menu */ /* ── menu — details-based dropdown (the hypermedia answer) ────────── * Disclosure chrome: CSS chevron on the summary trigger (same family as * accordion / navigation-menu) — not Unicode ▾ in the label text * (affordance-disclosure-chrome). Summary usually carries .button. * Light-dismiss: controllers/details-light-dismiss.js (overlay-light-dismiss). */ .menu { position: relative; display: inline-block; } .menu > summary { list-style: none; cursor: pointer; /* .button is already inline-flex; ensure room for ::after chevron */ gap: var(--space-2xs); } .menu > summary::-webkit-details-marker { display: none; } /* House disclosure chevron — 1rem, rotates when open (not part of label text) */ .menu > summary::after { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; opacity: 0.65; -webkit-mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); transition: transform var(--duration-base, 150ms) var(--ease-out, ease); } .menu[open] > summary::after { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .menu > summary::after { transition: none; } } .menu__panel { position: absolute; inset-block-start: calc(100% + 0.25rem); inset-inline-end: 0; min-width: 11rem; padding: var(--space-xs); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 40; } .menu__item { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); border: none; border-radius: var(--radius-sm); background: none; color: var(--colour-text); font-size: var(--text-sm); text-align: start; text-decoration: none; cursor: pointer; } .menu__item:hover { background: var(--colour-bg); } .menu__item[data-tone="destructive"] { color: var(--colour-danger); } .menu__separator { border: none; border-block-start: 1px solid var(--colour-border); margin-block: var(--space-xs); } /* ── alert-dialog — designed hx-confirm surface ───────────────────── */ /* HYPERPART: confirm */ dialog.alert-dialog { width: min(26rem, calc(100vw - 2rem)); padding: var(--space-2xl); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); background: var(--colour-surface); color: var(--colour-text); box-shadow: var(--shadow-lg); text-align: center; } dialog.alert-dialog::backdrop { background: oklch(13% 0.028 261.69 / 0.5); backdrop-filter: blur(2px); } .alert-dialog__icon { display: inline-flex; width: 2rem; height: 2rem; color: var(--colour-danger); margin-block-end: var(--space-md); } .alert-dialog__icon svg { width: 100%; height: 100%; } .alert-dialog__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-sm); } .alert-dialog__message { color: var(--colour-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-xl); } .alert-dialog__actions { display: flex; gap: var(--space-md); justify-content: center; } } /* ── components/toast.css ── */ @layer components { /* * HYPERPART: toast * * Auto-dismissing notifications for the shell toast stack. * Server OOB (`with_toast`) and the client bridge (`toast.js`) share * this markup. Levels key off data-toast-level (info | success | * warning | error). Optional title + action row are slots — message-only * markup remains valid. * * Contract (contracts/toast.py): *
*
*
*
Saved
*
Your changes are live.
*
* View * *
*
* *
*
* * Host behaviour (controllers/toast.js): auto-dismiss via * data-remove-after (default 8s), hover/focus pause, stack cap, * enter/leave motion, dismiss clicks. */ /* ── stack — viewport overlay (whole page, not content column) ───── */ .toast-stack { position: fixed; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 80; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); width: min(24rem, calc(100vw - 2rem)); max-width: min(24rem, calc(100vw - 2rem)); /* Children re-enable hits; empty chrome does not steal clicks. */ pointer-events: none; } /* ── toast unit ────────────────────────────────────────────────────── */ .toast { position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-md); width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: var(--space-md); padding-block: var(--space-md); padding-block-end: calc(var(--space-md) + 2px); border-radius: var(--radius-md); border: 1px solid var(--colour-border); border-inline-start-width: 4px; background: var(--colour-surface); color: var(--colour-text); box-shadow: var(--shadow-md); font-size: var(--text-sm); line-height: var(--leading-tight); will-change: transform, opacity; } /* TTL progress — host sets animation-duration from data-remove-after. */ .toast__progress { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; transform-origin: inline-start; background: color-mix(in oklch, var(--colour-text) 28%, transparent); pointer-events: none; animation-name: toast-ttl; animation-timing-function: linear; animation-fill-mode: forwards; } .toast[data-toast-level="info"] .toast__progress { background: color-mix(in oklch, var(--colour-brand) 55%, transparent); } .toast[data-toast-level="success"] .toast__progress { background: color-mix(in oklch, var(--colour-success) 55%, transparent); } .toast[data-toast-level="warning"] .toast__progress { background: color-mix(in oklch, var(--colour-warning) 55%, transparent); } .toast[data-toast-level="error"] .toast__progress { background: color-mix(in oklch, var(--colour-danger) 55%, transparent); } @keyframes toast-ttl { from { transform: scaleX(1); } to { transform: scaleX(0); } } .toast[data-toast-level="info"] { border-inline-start-color: var(--colour-brand); background: color-mix(in oklch, var(--colour-brand) 6%, var(--colour-surface)); } .toast[data-toast-level="success"] { border-inline-start-color: var(--colour-success); background: color-mix(in oklch, var(--colour-success) 6%, var(--colour-surface)); } .toast[data-toast-level="warning"] { border-inline-start-color: var(--colour-warning); background: color-mix(in oklch, var(--colour-warning) 6%, var(--colour-surface)); } .toast[data-toast-level="error"] { border-inline-start-color: var(--colour-danger); background: color-mix(in oklch, var(--colour-danger) 6%, var(--colour-surface)); } /* Level icon — decorative (aria-hidden); severity also on border + progress. */ .toast-icon, .toast__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; margin-block-start: 0.1rem; color: var(--colour-text-muted); } .toast__icon svg, .toast-icon svg { width: 1.125rem; height: 1.125rem; display: block; } .toast[data-toast-level="info"] .toast-icon, .toast[data-toast-level="info"] .toast__icon { color: var(--colour-brand); } .toast[data-toast-level="success"] .toast-icon, .toast[data-toast-level="success"] .toast__icon { color: var(--colour-success); } .toast[data-toast-level="warning"] .toast-icon, .toast[data-toast-level="warning"] .toast__icon { color: var(--colour-warning); } .toast[data-toast-level="error"] .toast-icon, .toast[data-toast-level="error"] .toast__icon { color: var(--colour-danger); } .toast__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; } .toast__title { font-weight: var(--weight-semibold); color: var(--colour-text); font-size: var(--text-sm); } .toast__subtitle { font-size: var(--text-xs, 0.75rem); color: var(--colour-text-muted); } .toast-message, .toast__message { font-size: var(--text-sm); color: var(--colour-text); } .toast__title + .toast__message, .toast__subtitle + .toast__message { color: var(--colour-text-muted); } /* Person / message composition (decision 0011 phase E) — not a severity. */ .toast__avatar { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 999px; object-fit: cover; background: color-mix(in oklch, var(--colour-brand) 12%, var(--colour-surface)); color: var(--colour-brand); font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; justify-content: center; margin-block-start: 0.05rem; } .toast__avatar--fallback { border: 1px solid var(--colour-border); } .toast[data-toast-composition="person"] .toast__actor { font-weight: var(--weight-semibold); } /* Swipe-dismiss feedback (host sets inline transform while dragging). */ .toast { touch-action: pan-y; user-select: none; } .toast__body, .toast__action, .toast__close { user-select: text; } .toast__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-sm); } .toast__action { appearance: none; border: none; background: transparent; color: var(--colour-brand); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; } .toast__action:hover { color: var(--colour-text); } .toast__action:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: 2px; border-radius: var(--radius-sm); } .toast__close { appearance: none; flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin: -0.25rem -0.25rem 0 0; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--colour-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 1rem; } .toast__close::before { content: "×"; font-weight: var(--weight-semibold); } .toast__close:hover { color: var(--colour-text); background: color-mix(in oklch, var(--colour-text) 8%, transparent); } .toast__close:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: 2px; } /* ── motion (Penguin-shaped: slide in from edge, slide out + fade) ── * Enter ~300ms ease-out; leave ~300ms ease-in. Host waits for leave * before DOM remove (see controllers/toast.js). */ .toast-enter { animation: toast-in var(--duration-slow) var(--ease-out) both; } .toast-leave { animation: toast-out var(--duration-slow) var(--ease-in) both; pointer-events: none; } @keyframes toast-in { from { opacity: 0; transform: translateX(1rem) translateY(-0.35rem); } to { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(1.5rem); } } @media (prefers-reduced-motion: reduce) { .toast-enter, .toast-leave { animation-duration: 1ms; } .toast__progress { /* Still shrink so remaining time is visible, but no enter/leave flourish. */ animation-timing-function: linear; } } /* ── gallery live stage (demo chrome only — not product surface) ── */ .hm-toast-stage { min-block-size: 18rem; padding: 1.25rem 1.5rem 2rem; background: linear-gradient( 180deg, color-mix(in oklch, var(--colour-brand) 4%, var(--colour-bg)) 0%, var(--colour-bg) 8rem ); } .hm-toast-stage__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-block-end: 1rem; padding-block-end: 0.75rem; border-block-end: 1px solid var(--colour-border); font-size: var(--text-sm); } .hm-toast-stage__hint { color: var(--colour-text-muted); font-size: 0.75rem; } .hm-toast-stage__body { max-width: 36rem; font-size: var(--text-sm); line-height: 1.5; color: var(--colour-text); } .hm-toast-stage__body p { margin: 0 0 1rem; } } /* ── components/badge.css ── */ @layer components { /* * badge.css — status / state / enum badge component. * * Single semantic class (.badge) plus tone modifier via * data-tone attribute. Used by the render_status_badge macro * (templates/macros/status_badge.html) — 19 import sites across * tables, kanban cards, detail views, review queues. * * The macro owns the tone-resolution logic (Jinja `badge_tone` * filter resolves enum values to one of five tones); this CSS * file owns the visual styling. Authors don't think about * specific colour values — they invoke the macro with a value * and trust the design system. * * Wrapped in @layer components (declared in dazzle.css). All * lengths and colours route via design tokens — Stylelint enforces * this in components/. */ .badge { display: inline-flex; align-items: center; border-radius: var(--radius-sm); font-weight: var(--weight-medium); /* Defaults match the macro's `size="md"` branch. The .badge-sm * modifier overrides for dense regions (timeline, bar_chart). */ padding-inline: var(--space-sm); height: 1.25rem; font-size: var(--text-xs); } .badge-sm { padding-inline: var(--space-xs); height: 1rem; /* Slightly smaller than the default --text-xs for micro contexts. */ font-size: 0.625rem; line-height: 1; } /* ── WCAG colour+icon+text (#1493 slice 2 part 3) ───────────────── * Non-neutral tones lead with a decorative glyph so state is never * conveyed by colour alone (WCAG 1.4.1). Emitted by `badge_icon_html` * as the first child of .badge; neutral badges carry no icon. */ .badge-icon { margin-inline-end: var(--space-xs); font-size: 0.875em; line-height: 1; } /* ── Tone tints ─────────────────────────────────────────────────── * Five tone tokens matching the wider Dazzle palette: neutral * (default), success, warning, info, destructive. Selected via * `data-tone` attribute emitted by the macro. */ .badge[data-tone="success"] { background: var(--colour-success-soft); color: var(--colour-success); } .badge[data-tone="warning"] { background: var(--colour-warning-soft); color: var(--colour-warning); } .badge[data-tone="info"] { background: var(--colour-brand-soft); color: var(--colour-brand-text); } .badge[data-tone="destructive"] { background: var(--colour-danger-soft); color: var(--colour-danger); } .badge[data-tone="neutral"], .badge:not([data-tone]) { background: var(--colour-bg); color: var(--colour-text-muted); } /* ── Optional border ────────────────────────────────────────────── * The macro accepts a `bordered` boolean for emphasis (used in the * detail region). Border colour matches the tone. */ .badge.bordered { border: 1px solid var(--colour-border); } .badge.bordered[data-tone="success"] { border-color: var(--colour-success); } .badge.bordered[data-tone="warning"] { border-color: var(--colour-warning); } .badge.bordered[data-tone="info"] { border-color: var(--colour-brand); } .badge.bordered[data-tone="destructive"] { border-color: var(--colour-danger); } /* ── Em-dash placeholder ────────────────────────────────────────── * When the macro is called with empty value, it renders a single- * char placeholder (—) for absent status. Same muted treatment as * any other "no value" token. */ .badge-empty { color: var(--colour-text-muted); font-size: var(--text-xs); } /* Registry SVG badge glyphs (Phase 3, supersedes #1493 entity glyphs). */ .badge-icon { display: inline-flex; width: 0.875em; height: 0.875em; flex-shrink: 0; } .badge-icon svg { width: 100%; height: 100%; display: block; } } /* ── components/button.css ── */ @layer components { /* * button.css — button component family. * * One semantic class `.button` + a `data-variant` attribute for the * visual variant (canonical, matching `data-tone` on badges/alerts): * data-variant="ghost" no border, hover-tint only (back, cancel) * data-variant="outline" bordered neutral (default action button) * data-variant="destructive" bordered danger (delete, revoke) * data-variant="primary" filled brand (the recommended action) * and `data-size="sm"` for the compact inline-row size. * * A variant NEVER drops the base class — `.button` carries the shared * geometry, `[data-variant]` layers the skin. (The standalone * `.button-primary` rule in components/table.css is a separate, smaller * table-header variant and is intentionally left as a class.) * * The `