/* shadcn/ui Design System: colors + type tokens * * Source: apps/v4/app/globals.css + apps/v4/registry/styles/style-nova.css * in github.com/shadcn-ui/ui (commit 56161142). Values verbatim. * * Usage: * * … (light, default) * … (dark) */ /* ---------- Type ---------- */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600;700&display=swap"); :root { --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-heading: "Geist", "Inter Tight", var(--font-sans); } /* ---------- Color tokens (light) ---------- */ .ds, :root { --radius: 0.625rem; --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.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.97 0.01 17); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --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); --surface: oklch(0.98 0 0); --surface-foreground: var(--foreground); } /* ---------- Color tokens (dark) ---------- */ .dark, .ds.dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.371 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.58 0.22 27); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --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.439 0 0); --surface: oklch(0.2 0 0); --surface-foreground: oklch(0.708 0 0); } /* ---------- Base typography ---------- */ .ds { font-family: var(--font-sans); color: var(--foreground); background: var(--background); font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; } .ds h1, .ds .h1 { font-family: var(--font-heading); font-size: 2.25rem; /* 36px */ line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; } .ds h2, .ds .h2 { font-family: var(--font-heading); font-size: 1.75rem; /* 28px */ line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; } .ds h3, .ds .h3 { font-family: var(--font-heading); font-size: 1.25rem; /* 20px */ line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; } .ds h4, .ds .h4 { font-family: var(--font-heading); font-size: 1rem; /* 16px */ line-height: 1.4; font-weight: 500; } .ds p, .ds .body { font-size: 0.875rem; /* 14px = text-sm, the dominant body size */ line-height: 1.5; color: var(--foreground); } .ds .body-lg { font-size: 1rem; line-height: 1.6; } .ds .small, .ds small { font-size: 0.75rem; line-height: 1.4; color: var(--muted-foreground); } .ds .muted { color: var(--muted-foreground); } .ds code, .ds kbd, .ds pre, .ds .mono { font-family: var(--font-mono); font-size: 0.8125rem; font-feature-settings: "calt" 0; } .ds a { color: var(--foreground); text-decoration: none; } .ds a:hover { text-decoration: underline; text-underline-offset: 4px; }