Jason Woltje
780f85e0d6
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
116 lines
3.0 KiB
CSS
116 lines
3.0 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/*
|
|
* Mosaic Stack design tokens mapped to Tailwind v4 theme.
|
|
* Source: @mosaic/design-tokens (AD-13)
|
|
* Fonts: Outfit (sans), Fira Code (mono)
|
|
* Palette: deep blue-grays + blue/purple/teal accents
|
|
* Default: dark theme
|
|
*/
|
|
|
|
@theme {
|
|
/* ─── Fonts ─── */
|
|
--font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'Fira Code', ui-monospace, Menlo, monospace;
|
|
|
|
/* ─── Neutral blue-gray scale ─── */
|
|
--color-gray-50: #f0f2f5;
|
|
--color-gray-100: #dce0e8;
|
|
--color-gray-200: #b8c0cc;
|
|
--color-gray-300: #8e99a9;
|
|
--color-gray-400: #6b7a8d;
|
|
--color-gray-500: #4e5d70;
|
|
--color-gray-600: #3b4859;
|
|
--color-gray-700: #2a3544;
|
|
--color-gray-800: #1c2433;
|
|
--color-gray-900: #111827;
|
|
--color-gray-950: #0a0f1a;
|
|
|
|
/* ─── Primary — blue ─── */
|
|
--color-blue-50: #eff4ff;
|
|
--color-blue-100: #dae5ff;
|
|
--color-blue-200: #bdd1ff;
|
|
--color-blue-300: #8fb4ff;
|
|
--color-blue-400: #5b8bff;
|
|
--color-blue-500: #3b6cf7;
|
|
--color-blue-600: #2551e0;
|
|
--color-blue-700: #1d40c0;
|
|
--color-blue-800: #1e369c;
|
|
--color-blue-900: #1e317b;
|
|
--color-blue-950: #162050;
|
|
|
|
/* ─── Accent — purple ─── */
|
|
--color-purple-50: #f3f0ff;
|
|
--color-purple-100: #e7dfff;
|
|
--color-purple-200: #d2c3ff;
|
|
--color-purple-300: #b49aff;
|
|
--color-purple-400: #9466ff;
|
|
--color-purple-500: #7c3aed;
|
|
--color-purple-600: #6d28d9;
|
|
--color-purple-700: #5b21b6;
|
|
--color-purple-800: #4c1d95;
|
|
--color-purple-900: #3b1578;
|
|
--color-purple-950: #230d4d;
|
|
|
|
/* ─── Accent — teal ─── */
|
|
--color-teal-50: #effcf9;
|
|
--color-teal-100: #d0f7ef;
|
|
--color-teal-200: #a4eddf;
|
|
--color-teal-300: #6fddcb;
|
|
--color-teal-400: #3ec5b2;
|
|
--color-teal-500: #25aa99;
|
|
--color-teal-600: #1c897e;
|
|
--color-teal-700: #1b6e66;
|
|
--color-teal-800: #1a5853;
|
|
--color-teal-900: #194945;
|
|
--color-teal-950: #082d2b;
|
|
|
|
/* ─── Semantic surface tokens ─── */
|
|
--color-surface-bg: #0a0f1a;
|
|
--color-surface-card: #111827;
|
|
--color-surface-elevated: #1c2433;
|
|
--color-surface-border: #2a3544;
|
|
|
|
/* ─── Semantic text tokens ─── */
|
|
--color-text-primary: #f0f2f5;
|
|
--color-text-secondary: #8e99a9;
|
|
--color-text-muted: #6b7a8d;
|
|
|
|
/* ─── Status colors ─── */
|
|
--color-success: #22c55e;
|
|
--color-warning: #f59e0b;
|
|
--color-error: #ef4444;
|
|
--color-info: #3b82f6;
|
|
|
|
/* ─── Sidebar width ─── */
|
|
--spacing-sidebar: 16rem;
|
|
}
|
|
|
|
/* ─── Base styles ─── */
|
|
body {
|
|
background-color: var(--color-surface-bg);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* ─── Scrollbar styling ─── */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-gray-600);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-gray-500);
|
|
}
|