109 lines
5.1 KiB
CSS
109 lines
5.1 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
@import './tokens/tokens-light.css';
|
|
@import './tokens/tokens-dark.css';
|
|
|
|
/* Aspekta — self-hosted sans font (canonical UI typeface) */
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 100; font-display: swap; src: url('/fonts/Aspekta-100.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 200; font-display: swap; src: url('/fonts/Aspekta-200.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Aspekta-300.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Aspekta-400.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Aspekta-500.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Aspekta-600.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Aspekta-700.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Aspekta-800.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Aspekta'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/Aspekta-900.woff2') format('woff2'); }
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* =============================================================================
|
|
GREYHAVEN DESIGN TOKENS
|
|
|
|
Token values are auto-generated by Style Dictionary from tokens/*.json
|
|
(W3C DTCG format). DO NOT hand-edit :root or .dark — edit the source
|
|
token files and run `pnpm tokens:build` instead.
|
|
|
|
Color Philosophy:
|
|
- Neutral and minimal scheme
|
|
- Off-black, warm grey, and white form the base
|
|
- Single accent (orange) used sparingly for active/important states
|
|
- No gradients, no decorative color
|
|
============================================================================= */
|
|
|
|
/* Radius — not color, kept inline */
|
|
:root {
|
|
--radius: 0.375rem;
|
|
}
|
|
|
|
/* =============================================================================
|
|
THEME CONFIGURATION
|
|
Typography: Source Serif Pro (primary/serif) + Aspekta (secondary/UI/sans)
|
|
============================================================================= */
|
|
|
|
@theme inline {
|
|
/* Typography — Aspekta (self-hosted) is the canonical sans font */
|
|
--font-sans: 'Aspekta', ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: var(--font-source-serif, 'Source Serif 4'), 'Source Serif Pro', Georgia, serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
|
|
/* Color mappings — maps CSS var RGB triplets to Tailwind utility classes */
|
|
--color-background: rgb(var(--background));
|
|
--color-foreground: rgb(var(--foreground));
|
|
--color-card: rgb(var(--card));
|
|
--color-card-foreground: rgb(var(--card-foreground));
|
|
--color-popover: rgb(var(--popover));
|
|
--color-popover-foreground: rgb(var(--popover-foreground));
|
|
--color-primary: rgb(var(--primary));
|
|
--color-primary-foreground: rgb(var(--primary-foreground));
|
|
--color-secondary: rgb(var(--secondary));
|
|
--color-secondary-foreground: rgb(var(--secondary-foreground));
|
|
--color-muted: rgb(var(--muted));
|
|
--color-muted-foreground: rgb(var(--muted-foreground));
|
|
--color-accent: rgb(var(--accent));
|
|
--color-accent-foreground: rgb(var(--accent-foreground));
|
|
--color-destructive: rgb(var(--destructive));
|
|
--color-destructive-foreground: rgb(var(--destructive-foreground));
|
|
--color-border: rgb(var(--border));
|
|
--color-input: rgb(var(--input));
|
|
--color-ring: rgb(var(--ring));
|
|
--color-chart-1: rgb(var(--chart-1));
|
|
--color-chart-2: rgb(var(--chart-2));
|
|
--color-chart-3: rgb(var(--chart-3));
|
|
--color-chart-4: rgb(var(--chart-4));
|
|
--color-chart-5: rgb(var(--chart-5));
|
|
--radius-sm: calc(var(--radius) - 2px);
|
|
--radius-md: var(--radius);
|
|
--radius-lg: calc(var(--radius) + 2px);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-hero-bg: rgb(var(--hero-bg));
|
|
--color-sidebar: rgb(var(--sidebar));
|
|
--color-sidebar-foreground: rgb(var(--sidebar-foreground));
|
|
--color-sidebar-primary: rgb(var(--sidebar-primary));
|
|
--color-sidebar-primary-foreground: rgb(var(--sidebar-primary-foreground));
|
|
--color-sidebar-accent: rgb(var(--sidebar-accent));
|
|
--color-sidebar-accent-foreground: rgb(var(--sidebar-accent-foreground));
|
|
--color-sidebar-border: rgb(var(--sidebar-border));
|
|
--color-sidebar-ring: rgb(var(--sidebar-ring));
|
|
|
|
/* Greyhaven-specific colors for direct use */
|
|
--color-greyhaven-orange: #D95E2A;
|
|
--color-greyhaven-offblack: #161614;
|
|
--color-greyhaven-offwhite: #F9F9F7;
|
|
--color-greyhaven-grey1: #F0F0EC;
|
|
--color-greyhaven-grey2: #DDDDD7;
|
|
--color-greyhaven-grey3: #C4C4BD;
|
|
--color-greyhaven-grey4: #A6A69F;
|
|
--color-greyhaven-grey5: #7F7F79;
|
|
--color-greyhaven-grey7: #575753;
|
|
--color-greyhaven-grey8: #2F2F2C;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|