Identity Theme

1/* ============================================================
2 * IDENTITY — warm paper, forest green, gallery language.
3 * Consume: `@import "tailwindcss"; @import "./identity.css";`
4 * Knobs: override ONLY --primary and --radius after the import.
5 * Everything else (paper, type, gallery language) IS the identity.
6 * The .prose-gallery drop cap assumes @tailwindcss/typography in
7 * the consuming app if you use prose classes alongside it.
8 * ============================================================ */
9 
10@custom-variant dark (&:is(.dark *));
11 
12@theme {
13  --font-display:
14    var(--site-font-display), ui-sans-serif, system-ui, sans-serif,
15    'Apple Color Emoji', 'Segoe UI Emoji';
16  --font-body:
17    var(--site-font-body), ui-sans-serif, system-ui, sans-serif,
18    'Apple Color Emoji', 'Segoe UI Emoji';
19  --font-mono:
20    var(--site-font-mono), ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
21 
22  /* NOTE: do not define --spacing-xs/sm/md/lg/xl/2xl/... tokens here. In
23   * Tailwind v4 they generate spacing-suffixed utilities (max-w-2xl, w-lg, …)
24   * that shadow the standard container scale — a --spacing-2xl: 48px once
25   * silently collapsed every `max-w-2xl` on the source site to 48px. */
26 
27  /* Radius scale derives from the --radius knob (default 0.75rem = 12px,
28   * giving 6/8/10/14/18px — the source site's exact values). */
29  --radius-sm: calc(var(--radius) - 6px);
30  --radius-md: calc(var(--radius) - 4px);
31  --radius-lg: calc(var(--radius) - 2px);
32  --radius-xl: calc(var(--radius) + 2px);
33  --radius-2xl: calc(var(--radius) + 6px);
34 
35  --color-primary: hsl(var(--primary));
36  --color-primary-foreground: hsl(var(--primary-foreground));
37  --color-secondary: hsl(var(--secondary));
38  --color-secondary-foreground: hsl(var(--secondary-foreground));
39  --color-background: hsl(var(--background));
40  --color-foreground: hsl(var(--foreground));
41  --color-muted: hsl(var(--muted));
42  --color-muted-foreground: hsl(var(--muted-foreground));
43  --color-card: hsl(var(--card));
44  --color-card-foreground: hsl(var(--card-foreground));
45  --color-popover: hsl(var(--popover));
46  --color-popover-foreground: hsl(var(--popover-foreground));
47  --color-accent: hsl(var(--accent));
48  --color-accent-foreground: hsl(var(--accent-foreground));
49  --color-destructive: hsl(var(--destructive));
50  --color-destructive-foreground: hsl(var(--destructive-foreground));
51  --color-border: hsl(var(--border));
52  --color-input: hsl(var(--input));
53  --color-ring: hsl(var(--ring));
54// … truncated