/* ESPYCRUX shared design system — v1.css * * Declares the --espy-* token contract and nothing else. No selectors that * touch consumer markup, no reset, no utility classes. A property adopts a * design exactly as far as its own CSS reads these variables. * * Generated from the design definitions already shipping on espycrux.com * (assets/index-DqfuC4I_.css). The names differ — the app uses shadcn-style * --background / --foreground / --signal; this file republishes the same * values under the --espy-* names the v1 contract specifies. Values are not * reinterpreted: every triple here is byte-for-byte what espycrux.com uses. * * Colours are unwrapped HSL triples. Wrap them: hsl(var(--espy-bg)). * * Light is the default for every design; add class="dark" on for the * dark variant. The design id and the light/dark choice are independent. * * Immutable at this path. A breaking change ships as v2.css. */ @import "https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400;75..125,600;75..125,800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:wght@400;600;700&family=Newsreader:wght@400;500;600;700&family=Instrument+Serif:wght@400&family=Playfair+Display:wght@400;700;900&family=Courier+Prime:wght@400;700&family=Poppins:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;700&family=Sora:wght@200;400;600;800&display=swap"; /* ---- default (structural) ------------------------------------------------ */ :root { --espy-bg: 40 24% 95%; --espy-fg: 24 12% 10%; --espy-card: 40 30% 97%; --espy-muted: 40 18% 91%; --espy-muted-fg: 28 6% 38%; --espy-border: 30 12% 82%; --espy-signal: 12 82% 47%; --espy-signal-fg: 40 30% 97%; --espy-font-display: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif; --espy-font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --espy-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --espy-display-weight: 800; --espy-display-tracking: -.035em; --espy-display-leading: .92; --espy-display-transform: uppercase; --espy-meta-tracking: .16em; --espy-meta-transform: uppercase; --espy-radius: 0px; --espy-surface-border: 1px solid hsl(var(--espy-border)); --espy-surface-shadow: none; } :root.dark { --espy-bg: 24 8% 7%; --espy-fg: 40 16% 92%; --espy-card: 24 8% 10%; --espy-muted: 24 7% 14%; --espy-muted-fg: 36 8% 62%; --espy-border: 30 6% 20%; --espy-signal: 14 90% 57%; --espy-signal-fg: 24 8% 7%; } /* ---- Structural ---- */ /* ---- Kinetic Swiss ---- */ :root[data-design="kinetic-swiss"] { --espy-bg: 0 0% 100%; --espy-fg: 0 0% 3.9%; --espy-card: 0 0% 100%; --espy-muted: 0 0% 94.9%; --espy-muted-fg: 0 0% 35.3%; --espy-border: 0 0% 3.9%; --espy-signal: 10.6 100% 50%; --espy-signal-fg: 0 0% 100%; --espy-font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-mono: "Archivo",ui-monospace,monospace; --espy-display-weight: 900; --espy-display-tracking: -.055em; --espy-display-leading: .86; --espy-display-transform: uppercase; --espy-meta-tracking: .2em; --espy-meta-transform: uppercase; --espy-radius: 0px; --espy-surface-border: 2px solid hsl(var(--espy-fg)); --espy-surface-shadow: none; } :root[data-design="kinetic-swiss"].dark { --espy-bg: 0 0% 3.9%; --espy-fg: 0 0% 100%; --espy-card: 0 0% 6.7%; --espy-muted: 0 0% 9%; --espy-muted-fg: 0 0% 63.9%; --espy-border: 0 0% 100%; --espy-signal: 10.9 100% 56.7%; --espy-signal-fg: 0 0% 3.9%; } /* ---- Terminal ---- */ :root[data-design="terminal"] { --espy-bg: 200 15.8% 3.7%; --espy-fg: 193.3 12.7% 86.1%; --espy-card: 204 15.2% 6.5%; --espy-muted: 200 13.6% 8.6%; --espy-muted-fg: 190 7.3% 51.8%; --espy-border: 192 15.6% 12.5%; --espy-signal: 145 73.8% 53.5%; --espy-signal-fg: 180 20% 2%; --espy-font-display: "JetBrains Mono",ui-monospace,SFMono-Regular,monospace; --espy-font-body: "JetBrains Mono",ui-monospace,SFMono-Regular,monospace; --espy-font-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,monospace; --espy-display-weight: 700; --espy-display-tracking: -.01em; --espy-display-leading: 1.05; --espy-display-transform: uppercase; --espy-meta-tracking: .18em; --espy-meta-transform: uppercase; --espy-radius: 0px; --espy-surface-border: 1px solid hsl(var(--espy-border)); --espy-surface-shadow: none; } :root[data-design="terminal"].dark { --espy-bg: 200 23.1% 2.5%; --espy-fg: 193.3 12.7% 86.1%; --espy-card: 204 18.5% 5.3%; --espy-muted: 200 15.8% 7.5%; --espy-muted-fg: 190 7.3% 51.8%; --espy-border: 192 15.6% 12.5%; --espy-signal: 145 73.8% 53.5%; --espy-signal-fg: 180 20% 2%; } /* ---- Editorial ---- */ :root[data-design="editorial"] { --espy-bg: 42 31.3% 93.7%; --espy-fg: 34.3 18.9% 7.3%; --espy-card: 41.2 25.8% 87.8%; --espy-muted: 41.2 29.6% 89.4%; --espy-muted-fg: 36.7 10.7% 32.9%; --espy-border: 40.8 20.7% 76.3%; --espy-signal: 9.7 65.7% 33.1%; --espy-signal-fg: 42 31.3% 93.7%; --espy-font-display: "Instrument Serif","Playfair Display",Georgia,serif; --espy-font-body: "Newsreader","Source Serif 4",Georgia,serif; --espy-font-mono: "JetBrains Mono",ui-monospace,monospace; --espy-display-weight: 400; --espy-display-tracking: -.015em; --espy-display-leading: .98; --espy-display-transform: none; --espy-meta-tracking: .13em; --espy-meta-transform: uppercase; --espy-radius: 0px; --espy-surface-border: 1px solid hsl(var(--espy-border)); --espy-surface-shadow: none; } :root[data-design="editorial"].dark { --espy-bg: 36 14.3% 6.9%; --espy-fg: 41.2 29.6% 89.4%; --espy-card: 30 12.5% 9.4%; --espy-muted: 34.3 12.3% 11.2%; --espy-muted-fg: 36.9 12.5% 59.2%; --espy-border: 35 13.3% 17.6%; --espy-signal: 11.9 53.5% 50.2%; --espy-signal-fg: 36 14.3% 6.9%; } /* ---- Brutalist ---- */ :root[data-design="brutalist"] { --espy-bg: 48 100% 98%; --espy-fg: 0 0% 6.7%; --espy-card: 0 0% 100%; --espy-muted: 49.9 100% 50%; --espy-muted-fg: 0 0% 23.9%; --espy-border: 0 0% 6.7%; --espy-signal: 49.9 100% 50%; --espy-signal-fg: 0 0% 100%; --espy-font-display: "Space Grotesk", "Archivo", ui-sans-serif, system-ui, sans-serif; --espy-font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-mono: "Archivo",ui-monospace,monospace; --espy-display-weight: 900; --espy-display-tracking: -.04em; --espy-display-leading: .9; --espy-display-transform: uppercase; --espy-meta-tracking: .14em; --espy-meta-transform: uppercase; --espy-radius: 0px; --espy-surface-border: 3px solid hsl(var(--espy-fg)); --espy-surface-shadow: 8px 8px 0 0 hsl(var(--espy-fg)); } :root[data-design="brutalist"].dark { --espy-bg: 0 0% 6.7%; --espy-fg: 48 100% 98%; --espy-card: 0 0% 10.2%; --espy-muted: 45.5 100% 11.4%; --espy-muted-fg: 44.2 11.8% 68.4%; --espy-border: 48 100% 98%; --espy-signal: 334.4 100% 68.2%; --espy-signal-fg: 0 0% 6.7%; } /* ---- Spatial ---- */ :root[data-design="spatial"] { --espy-bg: 228 26.3% 3.7%; --espy-fg: 220 21.4% 94.5%; --espy-card: 225 26.7% 5.9%; --espy-muted: 223.6 26.8% 8%; --espy-muted-fg: 220.9 10.4% 58.4%; --espy-border: 225 18.6% 16.9%; --espy-signal: 187.3 100% 50%; --espy-signal-fg: 230 42.9% 2.7%; --espy-font-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif; --espy-font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-mono: "JetBrains Mono",ui-monospace,monospace; --espy-display-weight: 200; --espy-display-tracking: -.045em; --espy-display-leading: .95; --espy-display-transform: none; --espy-meta-tracking: .22em; --espy-meta-transform: uppercase; --espy-radius: 2px; --espy-surface-border: 1px solid hsl(var(--espy-border)); --espy-surface-shadow: none; } :root[data-design="spatial"].dark { --espy-bg: 228 33.3% 2.9%; --espy-fg: 220 21.4% 94.5%; --espy-card: 222.9 28% 4.9%; --espy-muted: 222 27.8% 7.1%; --espy-muted-fg: 220.9 10.4% 58.4%; --espy-border: 225 18.6% 16.9%; --espy-signal: 187.3 100% 50%; --espy-signal-fg: 230 42.9% 2.7%; } /* ---- Blueprint ---- */ :root[data-design="blueprint"] { --espy-bg: 210.5 70.1% 17.1%; --espy-fg: 211.8 68% 95.1%; --espy-card: 211.2 75.8% 12.9%; --espy-muted: 211.1 73% 14.5%; --espy-muted-fg: 211.8 29.3% 67.3%; --espy-border: 211.4 41.7% 29.6%; --espy-signal: 36.1 100% 65.1%; --espy-signal-fg: 211.2 75.8% 12.9%; --espy-font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-mono: "JetBrains Mono",ui-monospace,monospace; --espy-display-weight: 700; --espy-display-tracking: -.02em; --espy-display-leading: .98; --espy-display-transform: uppercase; --espy-meta-tracking: .2em; --espy-meta-transform: uppercase; --espy-radius: 0px; --espy-surface-border: 1px solid hsl(var(--espy-border)); --espy-surface-shadow: none; } :root[data-design="blueprint"].dark { --espy-bg: 211.2 75.8% 12.9%; --espy-fg: 211.8 68% 95.1%; --espy-card: 211.4 77.8% 10.6%; --espy-muted: 208.8 75% 12.5%; --espy-muted-fg: 211.8 29.3% 67.3%; --espy-border: 211 43.9% 25.9%; --espy-signal: 36.1 100% 65.1%; --espy-signal-fg: 211.2 75.8% 12.9%; } /* ---- Risograph ---- */ :root[data-design="risograph"] { --espy-bg: 44 48.4% 93.9%; --espy-fg: 33.3 17% 10.4%; --espy-card: 46.7 100% 98.2%; --espy-muted: 43.6 40.7% 89.4%; --espy-muted-fg: 38.2 11.5% 37.6%; --espy-border: 41.5 25% 79.6%; --espy-signal: 6.8 100% 63.9%; --espy-signal-fg: 46.7 100% 98.2%; --espy-font-display: "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif; --espy-font-body: "Newsreader","Iowan Old Style",Georgia,serif; --espy-font-mono: "JetBrains Mono",ui-monospace,monospace; --espy-display-weight: 800; --espy-display-tracking: -.03em; --espy-display-leading: .94; --espy-display-transform: none; --espy-meta-tracking: .16em; --espy-meta-transform: uppercase; --espy-radius: 0px; --espy-surface-border: 2px solid hsl(var(--espy-fg) / .14); --espy-surface-shadow: 4px 4px 0 0 hsl(var(--signal) / .28); } :root[data-design="risograph"].dark { --espy-bg: 34.3 17.9% 7.6%; --espy-fg: 40 40.9% 91.4%; --espy-card: 33.3 17.6% 10%; --espy-muted: 35 20% 11.8%; --espy-muted-fg: 37.8 13.4% 60.6%; --espy-border: 35.3 20% 16.7%; --espy-signal: 6.8 100% 63.9%; --espy-signal-fg: 34.3 17.9% 7.6%; } /* ---- Transit ---- */ :root[data-design="transit"] { --espy-bg: 221 50.6% 15.9%; --espy-fg: 0 0% 100%; --espy-card: 222.4 46.8% 21.4%; --espy-muted: 222.9 57.4% 12%; --espy-muted-fg: 220.5 30.3% 74.1%; --espy-border: 222.9 35.4% 31%; --espy-signal: 42.9 100% 50.6%; --espy-signal-fg: 221 50.6% 15.9%; --espy-font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-mono: "JetBrains Mono",ui-monospace,monospace; --espy-display-weight: 800; --espy-display-tracking: -.025em; --espy-display-leading: .94; --espy-display-transform: uppercase; --espy-meta-tracking: .18em; --espy-meta-transform: uppercase; --espy-radius: 2px; --espy-surface-border: 1px solid hsl(var(--espy-border)); --espy-surface-shadow: none; } :root[data-design="transit"].dark { --espy-bg: 222.9 57.4% 12%; --espy-fg: 0 0% 100%; --espy-card: 226.2 54.2% 18.8%; --espy-muted: 222.9 58.3% 9.4%; --espy-muted-fg: 220.5 30.3% 74.1%; --espy-border: 222.7 37.7% 27.1%; --espy-signal: 42.9 100% 50.6%; --espy-signal-fg: 222.9 57.4% 12%; } /* ---- Archive ---- */ :root[data-design="archive"] { --espy-bg: 40 43.9% 83.9%; --espy-fg: 32.7 14.7% 14.7%; --espy-card: 42.9 56% 90.2%; --espy-muted: 41.4 37.5% 78%; --espy-muted-fg: 39 12.2% 32.2%; --espy-border: 42.3 26.8% 67.8%; --espy-signal: 5.5 58.6% 43.5%; --espy-signal-fg: 42.9 56% 90.2%; --espy-font-display: "Courier Prime","JetBrains Mono",ui-monospace,monospace; --espy-font-body: "Source Serif 4",Georgia,"Iowan Old Style",serif; --espy-font-mono: "Courier Prime","JetBrains Mono",ui-monospace,monospace; --espy-display-weight: 700; --espy-display-tracking: .01em; --espy-display-leading: 1.06; --espy-display-transform: uppercase; --espy-meta-tracking: .15em; --espy-meta-transform: uppercase; --espy-radius: 0px; --espy-surface-border: 1px solid hsl(var(--espy-border)); --espy-surface-shadow: 3px 3px 0 0 hsl(var(--espy-fg) / .14); } :root[data-design="archive"].dark { --espy-bg: 36 16.7% 11.8%; --espy-fg: 40 43.9% 83.9%; --espy-card: 35 16.2% 14.5%; --espy-muted: 36 17.2% 17.1%; --espy-muted-fg: 40 14.7% 60%; --espy-border: 37.1 18.6% 22.2%; --espy-signal: 9.6 56.1% 51.8%; --espy-signal-fg: 36 16.7% 11.8%; } /* ---- Thread ---- */ :root[data-design="thread"] { --espy-bg: 40 25.7% 93.1%; --espy-fg: 240 8.3% 9.4%; --espy-card: 0 0% 100%; --espy-muted: 40 21.4% 89%; --espy-muted-fg: 240 3.9% 40.4%; --espy-border: 40 15.2% 80.6%; --espy-signal: 74.4 100% 24.5%; --espy-signal-fg: 0 0% 100%; --espy-font-display: "Archivo","Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-body: "Inter",ui-sans-serif,system-ui,sans-serif; --espy-font-mono: "JetBrains Mono",ui-monospace,monospace; --espy-display-weight: 700; --espy-display-tracking: -.03em; --espy-display-leading: .95; --espy-display-transform: none; --espy-meta-tracking: .17em; --espy-meta-transform: uppercase; --espy-radius: 0px; --espy-surface-border: 1px solid hsl(var(--espy-border)); --espy-surface-shadow: none; } :root[data-design="thread"].dark { --espy-bg: 240 7.7% 7.6%; --espy-fg: 40 25.7% 93.1%; --espy-card: 240 12.3% 11.2%; --espy-muted: 240 11.4% 13.7%; --espy-muted-fg: 240 5.2% 62.4%; --espy-border: 240 9.7% 18.2%; --espy-signal: 77 100% 62%; --espy-signal-fg: 240 7.7% 7.6%; }