@import "tailwindcss"; @import "tw-animate-css"; @import "shadcn/tailwind.css"; @import "@fontsource-variable/onest"; /* ---break--- */ @custom-variant dark (&:is(.dark *)); /* * @lua-ai-global/ui design tokens. * * Hand-curated. Originally seeded via `shadcn apply --preset`; values * are now edited directly. Dark mode follows shadcn convention: add the * `.dark` class to a parent (typically ). Storybook's theme * toggle does this. * * Two theme layers: * 1. @theme inline { … } — references :root / .dark vars so swapping * the class switches modes. Colors + per-mode radius live here. * 2. @theme { … } — fixed values that don't need mode-switching: * spacing scale, type scale, font weights, tracking, leading, * shadows. These match Tailwind v4 defaults; override any line * to retheme the whole system. */ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-brand: var(--brand); --color-brand-foreground: var(--brand-foreground); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); /* Single-family system per Figma (LUARY-DS2). --font-heading is kept as a token-level alias for backwards compat — body and headings differentiate via weight (variable axis), not family. No --font-mono token: not part of Figma's source-of-truth. The `font-mono` utility keeps Tailwind's built-in ui-monospace stack (no consumer impact). */ --font-sans: 'Onest Variable', sans-serif; --font-heading: 'Onest Variable', sans-serif; } /* * Tailwind v4 defaults — exposed here so they're overridable in one * place. Touch any line to retheme. Drop a line to fall back to the * built-in default. */ @theme { /* Spacing — base unit. Every spacing/sizing utility multiplies this (p-1 = var(--spacing) * 1, p-4 = var(--spacing) * 4, etc.). Bump to 0.3rem for a chunkier system, 0.2rem for tighter. */ --spacing: 0.25rem; /* Type scale — size + line-height + letter-spacing (2xl+) + font-weight. Figma LUARY-DS2. */ --text-xs: 0.75rem; --text-xs--line-height: calc(1.125 / 0.75); --text-xs--font-weight: var(--font-weight-medium); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-sm--font-weight: var(--font-weight-medium); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-base--font-weight: var(--font-weight-normal); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-lg--font-weight: var(--font-weight-medium); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-xl--font-weight: var(--font-weight-medium); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-2xl--letter-spacing: var(--tracking-tight); --text-2xl--font-weight: var(--font-weight-semibold); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-3xl--letter-spacing: var(--tracking-tight); --text-3xl--font-weight: var(--font-weight-semibold); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-4xl--letter-spacing: var(--tracking-tighter); --text-4xl--font-weight: var(--font-weight-bold); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-5xl--letter-spacing: var(--tracking-wider); --text-5xl--font-weight: var(--font-weight-bold); --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; /* Font weights — variable-font axis values for Onest. */ --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* Tracking — rem (not em) so values don't compound at display sizes; rem still scales with the user's root font-size preference. */ --tracking-tighter: -0.05rem; --tracking-tight: -0.025rem; --tracking-normal: 0rem; --tracking-wide: 0.025rem; --tracking-wider: 0.05rem; --tracking-widest: 0.1rem; /* Leading (line-height) — applied via the leading-* utilities. The per-size leading values above are the defaults for text-*. */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Elevation / shadow ramp. */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); } :root { --radius: 0.875rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.181 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.181 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.49 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.181 0 0); --destructive: oklch(0.482 0.219 28.4); --destructive-foreground: oklch(0.985 0 0); --brand: oklch(0.526 0.244 296.6); --brand-foreground: oklch(1 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.526 0.244 296.6); --chart-1: oklch(0.811 0.111 293.571); --chart-2: oklch(0.606 0.25 292.717); --chart-3: oklch(0.541 0.281 293.009); --chart-4: oklch(0.491 0.27 292.581); --chart-5: oklch(0.432 0.232 292.759); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } /* * Tailwind v4 registers --tw-border-style and --tw-outline-style via * @property with initial-value:solid. Chrome only registers @property for * the document tree, so a stylesheet loaded inside a shadow root never * picks up the initial value — `var(--tw-border-style)` resolves to empty * and `.border` collapses to border-style:none with computed width 0. * Plain CSS fallback so the cascade always has a value (no-op outside a * shadow tree; harmless inside the document tree alongside @property). */ :root, :host { --tw-border-style: solid; --tw-outline-style: solid; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } html { @apply font-sans; } } /* ---break--- */ .dark { --background: oklch(0.116 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.181 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.181 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.181 0 0); --secondary: oklch(0.227 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.227 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.227 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.681 0.224 22.93); --brand: oklch(0.526 0.244 296.6); --brand-foreground: oklch(1 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.526 0.244 296.6); --chart-1: oklch(0.811 0.111 293.571); --chart-2: oklch(0.606 0.25 292.717); --chart-3: oklch(0.541 0.281 293.009); --chart-4: oklch(0.491 0.27 292.581); --chart-5: oklch(0.432 0.232 292.759); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); }