/* * shadcn/ui Design System — Colors & Type Tokens * * Extracted from: apps/v4/app/globals.css on shadcn-ui/ui (New York v4 style). * All colors in OKLCH. Neutrals have 0 chroma — the system is near-monochrome. * Every surface token has a matching -foreground token for contrast. * * Usage: * * * */ /* ———————————————————————————————————————————————————————————— Fonts shadcn.com uses Geist + Geist Mono. Both are on Google Fonts. ———————————————————————————————————————————————————————————— */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap"); :root { /* Typography families */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Type scale — semantic */ --text-xs: 0.75rem; /* 12px — tiny labels, kbd, badge */ --text-sm: 0.875rem; /* 14px — default UI, buttons, inputs */ --text-base: 1rem; /* 16px — body prose */ --text-lg: 1.125rem; /* 18px — lead paragraph */ --text-xl: 1.25rem; /* 20px — card titles */ --text-2xl: 1.5rem; /* 24px — h3 */ --text-3xl: 1.875rem; /* 30px — h2 */ --text-4xl: 2.25rem; /* 36px — h1 */ --text-5xl: 3rem; /* 48px — display */ --text-6xl: 3.75rem; /* 60px — hero */ /* Line heights */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ———————————————————————————————————————————————————————— Radii — single source, derived scale ———————————————————————————————————————————————————————— */ --radius: 0.625rem; /* 10px */ --radius-sm: calc(var(--radius) * 0.6); /* 6px */ --radius-md: calc(var(--radius) * 0.8); /* 8px */ --radius-lg: var(--radius); /* 10px */ --radius-xl: calc(var(--radius) * 1.4); /* 14px */ --radius-2xl: calc(var(--radius) * 1.8); /* 18px */ --radius-3xl: calc(var(--radius) * 2.2); /* 22px */ /* ———————————————————————————————————————————————————————— Shadows — three levels, no color ———————————————————————————————————————————————————————— */ --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-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* ———————————————————————————————————————————————————————— Color tokens — Light mode (LOCKED to globals.css values) All colors are OKLCH. Neutrals are L 0 0 (pure grey). ———————————————————————————————————————————————————————— */ --background: oklch(1 0 0); /* #ffffff */ --foreground: oklch(0.145 0 0); /* near-black */ --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); /* very dark neutral */ --primary-foreground: oklch(0.985 0 0); /* near-white */ --secondary: oklch(0.97 0 0); /* light grey */ --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); /* mid grey */ --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); /* red */ --destructive-foreground: oklch(0.97 0.01 17); --border: oklch(0.922 0 0); /* hairline grey */ --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); /* focus ring */ --surface: oklch(0.98 0 0); --surface-foreground: var(--foreground); /* Sidebar */ --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); /* Charts — blue scale (only place "color" appears in defaults) */ --chart-1: oklch(0.809 0.105 251.813); /* blue-300 approx */ --chart-2: oklch(0.623 0.214 259.815); /* blue-500 */ --chart-3: oklch(0.546 0.245 262.881); /* blue-600 */ --chart-4: oklch(0.488 0.243 264.376); /* blue-700 */ --chart-5: oklch(0.424 0.199 265.638); /* blue-800 */ /* Code */ --code: var(--surface); --code-foreground: var(--surface-foreground); --code-highlight: oklch(0.96 0 0); --code-number: oklch(0.56 0 0); --selection: oklch(0.145 0 0); --selection-foreground: oklch(1 0 0); } .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); --surface: oklch(0.2 0 0); --surface-foreground: oklch(0.708 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); --code-highlight: oklch(0.27 0 0); --code-number: oklch(0.72 0 0); --selection: oklch(0.922 0 0); --selection-foreground: oklch(0.205 0 0); } /* ———————————————————————————————————————————————————————————— Base reset + semantic type ———————————————————————————————————————————————————————————— */ *, *::before, *::after { border-color: var(--border); box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; } body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0; } ::selection { background: var(--selection); color: var(--selection-foreground); } /* Semantic type — use these as base styles */ h1, .h1 { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -0.02em; } h2, .h2 { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: -0.015em; } h3, .h3 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: -0.01em; } h4, .h4 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); } p, .body { font-size: var(--text-base); line-height: var(--leading-relaxed); } .lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--muted-foreground); } .muted { color: var(--muted-foreground); } small, .small { font-size: var(--text-xs); line-height: var(--leading-normal); } code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--muted); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); } kbd { background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.125rem 0.375rem; font-size: var(--text-xs); font-weight: var(--weight-medium); }