/* ============================================================================= ACCOMPLISH — Design Tokens ----------------------------------------------------------------------------- Drop-in CSS variables for shadcn-vue + Tailwind CSS v4. Values are HSL triplets (no hsl() wrapper) so Tailwind's alpha modifiers work: bg-primary → hsl(var(--primary)) bg-primary/50 → hsl(var(--primary) / 0.5) Shape language: LOW-ROUNDED. A controlled radius scale: --radius-xs 2px → badges, status pills (tight) --radius-sm 4px → buttons, inputs, small controls --radius-md 8px → cards, surfaces, larger containers --radius-full → avatars, full pills Never use rounded-lg or rounded-xl — it fights the stacked-layer mark. ============================================================================= */ :root { /* --- Core palette (HSL triplets) ----------------------------------------- */ /* Aquamarine — logo color (#4CE4C4) is the HIGHLIGHT (400). Brand primary / --accent-500 is a deeper, more authoritative teal. This keeps the mark's energy without letting it shout in UI. */ --accent-050: 167 70% 97%; /* #F1FCF9 — hairline backgrounds */ --accent-100: 167 70% 92%; /* #D6F5EC — tinted surfaces, badges */ --accent-300: 167 72% 74%; /* #8BEBD6 — soft highlight */ --accent-400: 167 73% 60%; /* #4CE4C4 — logo color · highlight only */ --accent-500: 167 72% 42%; /* #1EB798 — BRAND · primary accent */ --accent-600: 167 76% 33%; /* #14946F — hover / pressed */ --accent-700: 167 80% 24%; /* #0C6F53 — active / text on light bg */ --accent-800: 167 82% 17%; /* #094E3B — deep accent */ /* Neutrals — true neutral greys, not tinted. The brand is sharp and editorial; warm greys would soften it. */ --neutral-000: 0 0% 100%; /* #FFFFFF */ --neutral-050: 0 0% 98%; /* #FAFAFA — app background */ --neutral-100: 0 0% 96%; /* #F5F5F5 — card alt, hover */ --neutral-200: 0 0% 92%; /* #EBEBEB — borders, dividers */ --neutral-300: 0 0% 85%; /* #D9D9D9 — disabled borders */ --neutral-400: 0 0% 64%; /* #A3A3A3 — placeholder, muted icons */ --neutral-500: 0 0% 45%; /* #737373 — muted text */ --neutral-600: 0 0% 32%; /* #525252 — secondary text */ --neutral-700: 0 0% 20%; /* #333333 — body text */ --neutral-800: 0 0% 12%; /* #1F1F1F — headings */ --neutral-900: 0 0% 7%; /* #121212 — primary / dark surfaces */ --neutral-950: 0 0% 3%; /* #080808 — deepest, rare */ /* Semantic status. Keep saturation moderate — shouts louder than accent if over-saturated. */ --danger-500: 0 72% 50%; /* #DC2626 */ --danger-100: 0 85% 96%; /* #FEE2E2 */ --warning-500: 38 92% 50%; /* #F59E0B */ --warning-100: 48 96% 89%; /* #FEF3C7 */ --success-500: 152 64% 40%; /* #25A06A — distinct hue from accent */ --success-100: 152 64% 92%; /* #D6F0E3 */ --info-500: 215 90% 54%; /* #2569EE */ --info-100: 215 100% 95%; /* #E6EEFF */ /* --- shadcn-vue semantic aliases (light theme) --------------------------- */ --background: var(--neutral-050); --foreground: var(--neutral-900); --card: var(--neutral-000); --card-foreground: var(--neutral-900); --popover: var(--neutral-000); --popover-foreground: var(--neutral-900); /* Primary = BLACK, not aquamarine. Accent is a color, primary is a stance. */ --primary: var(--neutral-900); --primary-foreground: var(--neutral-000); --secondary: var(--neutral-100); --secondary-foreground: var(--neutral-800); --muted: var(--neutral-100); --muted-foreground: var(--neutral-500); /* Accent slot = the aquamarine. Used on selection, focused chips, etc. */ --accent: var(--accent-500); --accent-foreground: #0F1F1A; /* Option A: warm near-black — passes AA (~5.4:1) */ --destructive: var(--danger-500); --destructive-foreground: var(--neutral-000); --border: var(--neutral-200); --input: var(--neutral-300); --ring: var(--accent-500); /* focus ring = accent */ /* --- Radii — keep SHARP ------------------------------------------------- */ --radius-none: 0px; --radius-xs: 2px; /* badges, status pills */ --radius-sm: 4px; /* buttons, inputs */ --radius-md: 8px; /* cards, larger surfaces */ --radius-full: 9999px; /* avatars, full pills */ --radius: var(--radius-sm); /* shadcn default (buttons) */ /* --- Typography --------------------------------------------------------- */ /* Inter is deliberately avoided. Two faces only: Satoshi (display) for headings/KPIs, IBM Plex Sans (UI) for everything else. `--font-mono` is kept as an alias for IBM Plex Sans so existing component CSS (eyebrow labels, IDs, timestamps) keeps working — those signals get their character from tracking + uppercasing, not from a mono face. */ --font-display: 'Satoshi', 'Satoshi Variable', 'Inter Tight', ui-sans-serif, system-ui, sans-serif; --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Fluid type scale — 1.200 minor third for UI, 1.333 perfect fourth for display */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; /* dashboard default — tighter than web default */ --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px; --text-5xl: 48px; --text-6xl: 64px; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* for eyebrow / uppercase labels */ /* --- Spacing — 4px base grid -------------------------------------------- */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* --- Elevation — used sparingly. Sharp design favors borders over shadows. */ --shadow-xs: 0 1px 0 0 hsl(var(--neutral-900) / 0.04); --shadow-sm: 0 1px 2px 0 hsl(var(--neutral-900) / 0.06), 0 1px 1px -0.5px hsl(var(--neutral-900) / 0.04); --shadow-md: 0 4px 8px -2px hsl(var(--neutral-900) / 0.08), 0 2px 4px -2px hsl(var(--neutral-900) / 0.05); --shadow-lg: 0 12px 24px -6px hsl(var(--neutral-900) / 0.12), 0 4px 8px -4px hsl(var(--neutral-900) / 0.06); --shadow-pop: 0 20px 40px -12px hsl(var(--neutral-900) / 0.18), 0 8px 16px -8px hsl(var(--neutral-900) / 0.08); /* Accent focus ring — wraps the ring variable with offset spacing */ --ring-offset-width: 2px; --ring-width: 2px; /* --- Motion ------------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-instant: 80ms; --duration-fast: 140ms; --duration-base: 200ms; --duration-slow: 320ms; /* --- Layout ------------------------------------------------------------- */ --sidebar-width: 240px; --sidebar-width-collapsed: 56px; --topbar-height: 56px; --container-max: 1440px; --content-max: 72ch; } /* ============================================================================= Dark theme — inverse of light. Still sharp, still same accent. Not every mini-app must implement this, but the tokens exist. ============================================================================= */ .dark, [data-theme="dark"] { --background: var(--neutral-950); --foreground: var(--neutral-050); --card: var(--neutral-900); --card-foreground: var(--neutral-050); --popover: var(--neutral-900); --popover-foreground: var(--neutral-050); --primary: var(--neutral-050); --primary-foreground: var(--neutral-900); --secondary: var(--neutral-800); --secondary-foreground: var(--neutral-100); --muted: var(--neutral-800); --muted-foreground: var(--neutral-400); --accent: var(--accent-500); --accent-foreground: var(--neutral-000); --destructive: var(--danger-500); --destructive-foreground: var(--neutral-000); --border: var(--neutral-800); --input: var(--neutral-700); --ring: var(--accent-500); }