/** * ASK — shadcn / Tailwind CSS variables * Single source of truth → derived from design-tokens/tokens.json * * Use: * 1. Drop this file at app/globals.css (Next.js) or src/index.css (Vite). * 2. Wrap your root in or apply :root scope as-is. * 3. shadcn components will pick up these variables automatically. * Color values are HSL channels (no hsl() wrapper) — matches shadcn convention. * Use as: hsl(var(--primary)) or via Tailwind utility classes. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300..900;1,300..900&family=Archivo+Black&family=JetBrains+Mono:wght@400;500&display=swap'); @layer base { :root { /* ── Brand ── */ --ask-red: 354 78% 52%; /* #E42438 */ --ask-red-hover: 353 76% 45%; /* #C81B2E */ --ask-red-soft: 352 79% 95%; /* #FCE6E9 */ /* ── Neutrals ── */ --ask-ink: 0 0% 4%; /* #0A0A0A */ --ask-graphite: 240 3% 17%; /* #2A2A2D */ --ask-steel: 240 4% 45%; /* #6E6E76 */ --ask-mist: 240 5% 91%; /* #E8E8EA */ --ask-paper: 40 16% 96%; /* #F7F6F4 */ --ask-white: 0 0% 100%; --ask-rule: 40 7% 84%; /* #D8D6D2 */ /* ── shadcn semantic tokens (light) ── */ --background: var(--ask-paper); --foreground: var(--ask-ink); --muted: var(--ask-mist); --muted-foreground: var(--ask-steel); --popover: var(--ask-white); --popover-foreground: var(--ask-ink); --card: var(--ask-white); --card-foreground: var(--ask-ink); --border: var(--ask-rule); --input: var(--ask-mist); --primary: var(--ask-red); --primary-foreground: var(--ask-white); --secondary: var(--ask-ink); --secondary-foreground: var(--ask-white); --accent: var(--ask-red-soft); --accent-foreground: var(--ask-red); --destructive: var(--ask-red); --destructive-foreground: var(--ask-white); --ring: var(--ask-red); /* ── State intents ── */ --success: 152 63% 33%; /* #1F8A5B */ --success-soft: 146 39% 93%; /* #E7F5EE */ --warning: 38 72% 41%; /* #B7791F */ --warning-soft: 42 72% 92%; /* #FBF1DD */ --danger: 353 76% 45%; /* #C81B2E */ --danger-soft: 352 79% 95%; /* #FCE6E9 */ --info: 215 71% 51%; /* #2A6FDB */ --info-soft: 215 71% 94%; /* #E3EDFB */ /* ── Motion ── */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.5, -0.2, 0.5, 1.4); /* ── Elevation (z-index) ── */ --z-content: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; /* ── Radii ── */ --radius: 4px; /* shadcn baseline — Ask uses a sharp aesthetic */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; /* ── Type ── */ --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif; --font-sans: 'Archivo', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } .dark { --background: var(--ask-ink); --foreground: var(--ask-paper); --muted: 240 3% 14%; --muted-foreground: var(--ask-steel); --popover: var(--ask-graphite); --popover-foreground: var(--ask-paper); --card: var(--ask-graphite); --card-foreground: var(--ask-paper); --border: 240 3% 22%; --input: 240 3% 22%; --primary: var(--ask-red); --primary-foreground: var(--ask-white); --secondary: var(--ask-paper); --secondary-foreground: var(--ask-ink); --accent: 240 3% 22%; --accent-foreground: var(--ask-paper); --destructive: var(--ask-red); --destructive-foreground: var(--ask-white); --ring: var(--ask-red); } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } }