/* Village Chat — composer design tokens * Warm-teal palette anchored at #145b6e. All accent shifts come from the * teal hue; chroma stays low for calm. Neutrals are warm (hue ~80) so the * surface never reads cold or institutional. Use the tokens — do not * hard-code the hex values that appear once at the top. */ :root { /* — Brand: warm teal */ --vc-teal-900: #145b6e; /* primary token */ --vc-teal-700: oklch(0.49 0.060 210); --vc-teal-500: oklch(0.62 0.075 210); --vc-teal-300: oklch(0.80 0.045 210); --vc-teal-100: oklch(0.93 0.022 210); --vc-teal-50: oklch(0.97 0.012 210); /* — Warm neutrals (hue ≈ 75–85) */ --vc-ink-900: oklch(0.22 0.012 75); /* primary text */ --vc-ink-700: oklch(0.40 0.010 75); /* secondary */ --vc-ink-500: oklch(0.58 0.008 75); /* placeholder */ --vc-ink-300: oklch(0.78 0.006 75); /* hairline */ --vc-ink-200: oklch(0.88 0.005 75); --vc-ink-100: oklch(0.94 0.004 75); --vc-ink-50: oklch(0.975 0.004 75); --vc-paper: oklch(0.992 0.004 80); /* composer surface */ --vc-canvas: oklch(0.978 0.006 80); /* page bg */ --vc-cream: oklch(0.96 0.012 80); /* attachment chip */ /* — Semantic */ --vc-accent: var(--vc-teal-900); --vc-accent-soft: var(--vc-teal-100); --vc-text: var(--vc-ink-900); --vc-text-muted: var(--vc-ink-700); --vc-text-placeholder: var(--vc-ink-500); --vc-hairline: var(--vc-ink-200); --vc-surface: var(--vc-paper); --vc-surface-recessed: var(--vc-ink-50); --vc-record: oklch(0.58 0.18 25); /* voice rec dot */ --vc-on-accent: #fff; /* icon/text on accent fill */ /* — Amber (Sprint 0b · 05 thread-header active-vote strip). * Distinct hue from brand teal so a live governance vote reads as a * civic alert rather than a brand surface. Low chroma keeps it calm. */ --vc-amber-900: oklch(0.56 0.13 70); --vc-amber-500: oklch(0.72 0.12 70); --vc-amber-100: oklch(0.93 0.045 70); --vc-amber-50: oklch(0.97 0.025 70); /* — Warm green (Sprint 0b · 09 governance badges). * Quiet positive accent — Second, Decision, fully-acknowledged states. * Hue 150 keeps it warm-green (not cyan-green); chroma matches teal scale. */ --vc-green-900: oklch(0.46 0.08 150); --vc-green-500: oklch(0.62 0.10 150); --vc-green-100: oklch(0.93 0.035 150); --vc-green-50: oklch(0.97 0.018 150); /* — Warm red (Sprint 0b · 09 governance badges). * Procedural alerts only — Point-of-order, withdrawn-with-cause. * Hue 25 sits warm (terracotta-red, not fire-engine red); chroma stays low. */ --vc-red-900: oklch(0.50 0.13 25); --vc-red-500: oklch(0.64 0.13 25); --vc-red-100: oklch(0.94 0.045 25); --vc-red-50: oklch(0.97 0.020 25); /* — Geometry */ --vc-r-pill: 999px; --vc-r-input: 14px; --vc-r-card: 18px; --vc-r-chip: 10px; --vc-hit: 44px; /* min touch target */ --vc-icon: 22px; --vc-gutter: 12px; /* page edge */ --vc-gap: 8px; --vc-pad-y: 10px; --vc-pad-x: 14px; /* — Shadows (very subtle, warm) */ --vc-shadow-1: 0 1px 0 oklch(0.22 0.010 75 / 0.04), 0 0 0 1px oklch(0.22 0.010 75 / 0.05); --vc-shadow-2: 0 8px 24px -8px oklch(0.22 0.010 75 / 0.15), 0 2px 6px -2px oklch(0.22 0.010 75 / 0.08), 0 0 0 1px oklch(0.22 0.010 75 / 0.04); /* — Typography (mockup uses DM Sans; production may self-host or * substitute a humanist system stack with similar metrics) */ --vc-font-ui: 'DM Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --vc-fs-input: 16px; /* iOS no-zoom min */ --vc-fs-meta: 12px; --vc-lh-input: 1.45; --vc-dur: 180ms; --vc-ease: cubic-bezier(.2,.7,.3,1); } /* — Dark mode overrides. Activated by [data-theme="dark"] on an ancestor. * Warm teal is lifted (a +0.30 lightness shift in oklch) so it keeps AA * contrast against the dark surface and still reads as the brand colour. * Neutrals stay warm (hue ≈ 75); chroma stays low so the surface remains * calm rather than dramatic. */ [data-theme="dark"] { --vc-teal-900: oklch(0.74 0.080 210); /* lifted brand */ --vc-teal-700: oklch(0.62 0.075 210); --vc-teal-500: oklch(0.50 0.065 210); --vc-teal-300: oklch(0.38 0.055 210); --vc-teal-100: oklch(0.30 0.045 210); /* tinted bg */ --vc-teal-50: oklch(0.24 0.030 210); --vc-ink-900: oklch(0.96 0.005 80); /* text */ --vc-ink-700: oklch(0.74 0.008 75); /* secondary */ --vc-ink-500: oklch(0.58 0.008 75); /* placeholder */ --vc-ink-300: oklch(0.36 0.008 75); /* hairline */ --vc-ink-200: oklch(0.30 0.006 75); --vc-ink-100: oklch(0.26 0.006 75); --vc-ink-50: oklch(0.22 0.005 75); --vc-paper: oklch(0.235 0.006 80); /* composer surface */ --vc-canvas: oklch(0.185 0.006 80); /* page bg */ --vc-cream: oklch(0.27 0.010 80); /* attachment chip */ --vc-accent: var(--vc-teal-900); --vc-accent-soft: var(--vc-teal-100); --vc-text: var(--vc-ink-900); --vc-text-muted: var(--vc-ink-700); --vc-text-placeholder: var(--vc-ink-500); --vc-hairline: var(--vc-ink-200); --vc-surface: var(--vc-paper); --vc-surface-recessed: var(--vc-ink-50); --vc-record: oklch(0.72 0.16 25); --vc-on-accent: oklch(0.20 0.010 80); /* dark glyph on lifted teal */ --vc-amber-900: oklch(0.82 0.10 70); --vc-amber-500: oklch(0.62 0.11 70); --vc-amber-100: oklch(0.32 0.06 70); --vc-amber-50: oklch(0.26 0.045 70); --vc-green-900: oklch(0.78 0.10 150); --vc-green-500: oklch(0.60 0.10 150); --vc-green-100: oklch(0.32 0.05 150); --vc-green-50: oklch(0.26 0.035 150); --vc-red-900: oklch(0.76 0.12 25); --vc-red-500: oklch(0.60 0.12 25); --vc-red-100: oklch(0.34 0.07 25); --vc-red-50: oklch(0.28 0.05 25); --vc-shadow-1: 0 1px 0 oklch(0 0 0 / 0.30), 0 0 0 1px oklch(1 0 0 / 0.04); --vc-shadow-2: 0 12px 28px -10px oklch(0 0 0 / 0.55), 0 2px 6px -2px oklch(0 0 0 / 0.35), 0 0 0 1px oklch(1 0 0 / 0.04); }