spb/worthdoing Public

1/*2 * WorthDoing.ai3 * Author: Simon-Pierre Boucher4 * Contact: contact@spboucher.ai5 * File: src/app/globals.css6 * Description: Design token system — light-first palette, type scale, motion; shadcn variables mapped to WorthDoing tokens.7 */8@import "tailwindcss";9@import "tw-animate-css";10@import "shadcn/tailwind.css";1112@custom-variant dark (&:is(.dark *));1314@theme inline {15  --color-background: var(--background);16  --color-foreground: var(--foreground);17  --font-sans: var(--font-body);18  --font-mono: var(--font-tele);19  --font-heading: var(--font-display);2021  /* WorthDoing named tokens — every component derives from these. */22  --color-paper: var(--wd-paper);23  --color-ink: var(--wd-ink);24  --color-ink-soft: var(--wd-ink-soft);25  --color-line: var(--wd-line);26  --color-verdict: var(--wd-verdict);27  --color-signal: var(--wd-signal);28  --color-rust: var(--wd-rust);29  --color-tele: var(--wd-tele);3031  --color-sidebar-ring: var(--sidebar-ring);32  --color-sidebar-border: var(--sidebar-border);33  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);34  --color-sidebar-accent: var(--sidebar-accent);35  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);36  --color-sidebar-primary: var(--sidebar-primary);37  --color-sidebar-foreground: var(--sidebar-foreground);38  --color-sidebar: var(--sidebar);39  --color-chart-5: var(--chart-5);40  --color-chart-4: var(--chart-4);41  --color-chart-3: var(--chart-3);42  --color-chart-2: var(--chart-2);43  --color-chart-1: var(--chart-1);44  --color-ring: var(--ring);45  --color-input: var(--input);46  --color-border: var(--border);47  --color-destructive: var(--destructive);48  --color-accent-foreground: var(--accent-foreground);49  --color-accent: var(--accent);50  --color-muted-foreground: var(--muted-foreground);51  --color-muted: var(--muted);52  --color-secondary-foreground: var(--secondary-foreground);53  --color-secondary: var(--secondary);54  --color-primary-foreground: var(--primary-foreground);55  --color-primary: var(--primary);56  --color-popover-foreground: var(--popover-foreground);57  --color-popover: var(--popover);58  --color-card-foreground: var(--card-foreground);59  --color-card: var(--card);60  --radius-sm: calc(var(--radius) * 0.6);61  --radius-md: calc(var(--radius) * 0.8);62  --radius-lg: var(--radius);63  --radius-xl: calc(var(--radius) * 1.4);64  --radius-2xl: calc(var(--radius) * 1.8);65  --radius-3xl: calc(var(--radius) * 2.2);66  --radius-4xl: calc(var(--radius) * 2.6);67}6869:root {70  /* WorthDoing palette — light-first, validated for contrast on paper. */71  --wd-paper: #faf7f1;72  --wd-ink: #191510;73  --wd-ink-soft: #6b6355;74  --wd-line: #e6dfd2;75  --wd-verdict: #166b49; /* evidence support, validated, primary accent */76  --wd-signal: #b57a1e;  /* uncertainty, skeptic phase, medium confidence */77  --wd-rust: #a63d2a;    /* contradiction, rejected, risk */78  --wd-tele: #3d5a80;    /* telemetry, searching, links to sources */7980  --background: var(--wd-paper);81  --foreground: var(--wd-ink);82  --card: #ffffff;83  --card-foreground: var(--wd-ink);84  --popover: #ffffff;85  --popover-foreground: var(--wd-ink);86  --primary: var(--wd-ink);87  --primary-foreground: var(--wd-paper);88  --secondary: #f1ece1;89  --secondary-foreground: var(--wd-ink);90  --muted: #f1ece1;91  --muted-foreground: var(--wd-ink-soft);92  --accent: #eef3ef;93  --accent-foreground: var(--wd-verdict);94  --destructive: var(--wd-rust);95  --border: var(--wd-line);96  --input: var(--wd-line);97  --ring: var(--wd-verdict);98  --chart-1: var(--wd-verdict);99  --chart-2: var(--wd-tele);100  --chart-3: var(--wd-signal);101  --chart-4: var(--wd-rust);102  --chart-5: var(--wd-ink-soft);103  --radius: 0.5rem;104  --sidebar: #ffffff;105  --sidebar-foreground: var(--wd-ink);106  --sidebar-primary: var(--wd-ink);107  --sidebar-primary-foreground: var(--wd-paper);108  --sidebar-accent: #f1ece1;109  --sidebar-accent-foreground: var(--wd-ink);110  --sidebar-border: var(--wd-line);111  --sidebar-ring: var(--wd-verdict);112}113114@layer base {115  * {116    @apply border-border outline-ring/50;117  }118  body {119    @apply bg-background text-foreground;120    font-feature-settings: "ss01", "cv05";121  }122  html {123    @apply font-sans;124  }125  ::selection {126    background: color-mix(in oklab, var(--wd-verdict) 22%, transparent);127  }128}129130/* ---- Motion, tied to real agent events; respects reduced motion ---- */131132@keyframes wd-enter {133  from {134    opacity: 0;135    transform: translateY(6px);136  }137  to {138    opacity: 1;139    transform: translateY(0);140  }141}142143@keyframes wd-pulse {144  0%,145  100% {146    opacity: 1;147  }148  50% {149    opacity: 0.35;150  }151}152153.wd-enter {154  animation: wd-enter 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;155}156157.wd-live-dot {158  animation: wd-pulse 1.6s ease-in-out infinite;159}160161.wd-bar {162  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease;163}164165@media (prefers-reduced-motion: reduce) {166  .wd-enter {167    animation: none;168  }169  .wd-live-dot {170    animation: none;171  }172  .wd-bar {173    transition: none;174  }175}176