120 lines
4.5 KiB
CSS
120 lines
4.5 KiB
CSS
@theme {
|
|
--font-sans: "Avenir Next", "Segoe UI", sans-serif;
|
|
--font-display: "Iowan Old Style", "Palatino Linotype", serif;
|
|
--font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;
|
|
|
|
--color-stone-50: oklch(0.986 0.008 86);
|
|
--color-stone-100: oklch(0.974 0.012 84);
|
|
--color-stone-150: oklch(0.958 0.016 82);
|
|
--color-stone-200: oklch(0.936 0.018 79);
|
|
--color-stone-300: oklch(0.896 0.025 76);
|
|
--color-ink-700: oklch(0.4 0.04 244);
|
|
--color-ink-800: oklch(0.31 0.04 248);
|
|
--color-ink-900: oklch(0.23 0.038 252);
|
|
--color-brand-300: oklch(0.84 0.05 228);
|
|
--color-brand-400: oklch(0.76 0.09 214);
|
|
--color-brand-500: oklch(0.67 0.12 226);
|
|
--color-brand-700: oklch(0.48 0.1 232);
|
|
--color-mint-300: oklch(0.85 0.05 182);
|
|
--color-mint-500: oklch(0.72 0.07 186);
|
|
--color-mint-700: oklch(0.54 0.07 184);
|
|
--color-amber-300: oklch(0.88 0.045 73);
|
|
--color-amber-500: oklch(0.75 0.085 62);
|
|
--color-amber-700: oklch(0.56 0.09 54);
|
|
--color-red-500: oklch(0.62 0.16 28);
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
--color-background: var(--color-stone-50);
|
|
--color-background-elevated: var(--color-stone-100);
|
|
--color-foreground: var(--color-ink-900);
|
|
--color-muted: var(--color-stone-150);
|
|
--color-muted-foreground: var(--color-ink-700);
|
|
--color-card: rgba(255, 255, 255, 0.9);
|
|
--color-card-foreground: var(--color-ink-900);
|
|
--color-border: rgba(17, 36, 58, 0.12);
|
|
--color-border-strong: rgba(47, 111, 183, 0.22);
|
|
--color-border-subtle: rgba(17, 36, 58, 0.07);
|
|
--color-frame: rgba(17, 36, 58, 0.06);
|
|
--color-input: rgba(255, 255, 255, 0.94);
|
|
--color-primary: var(--color-brand-500);
|
|
--color-primary-foreground: #f9fbff;
|
|
--color-secondary: rgba(255, 255, 255, 0.82);
|
|
--color-secondary-foreground: var(--color-ink-900);
|
|
--color-accent: rgba(47, 111, 183, 0.1);
|
|
--color-accent-foreground: var(--color-brand-700);
|
|
--color-success: var(--color-mint-700);
|
|
--color-warning: var(--color-amber-700);
|
|
--color-destructive: var(--color-red-500);
|
|
--color-info: var(--color-brand-700);
|
|
|
|
--surface-page: rgba(255, 255, 255, 0.34);
|
|
--surface-shell: rgba(255, 255, 255, 0.78);
|
|
--surface-shell-strong: rgba(255, 255, 255, 0.94);
|
|
--surface-card-soft: rgba(246, 248, 251, 0.82);
|
|
--surface-muted: rgba(243, 247, 251, 0.88);
|
|
--surface-muted-strong: rgba(247, 249, 252, 0.94);
|
|
--surface-accent: rgba(47, 111, 183, 0.1);
|
|
--surface-accent-strong: rgba(241, 246, 253, 0.98);
|
|
--surface-trust: rgba(59, 139, 120, 0.09);
|
|
|
|
--radius-sm: 1rem;
|
|
--radius-md: 1.35rem;
|
|
--radius-lg: 1.75rem;
|
|
--radius-panel: 2rem;
|
|
--radius-pill: 999px;
|
|
|
|
--shadow-panel-strong: 0 28px 90px rgba(17, 36, 58, 0.14);
|
|
--shadow-card: 0 20px 56px rgba(17, 36, 58, 0.1);
|
|
--shadow-soft: 0 12px 36px rgba(17, 36, 58, 0.08);
|
|
--shadow-inline: 0 10px 22px rgba(17, 36, 58, 0.08);
|
|
|
|
--space-page-x: clamp(1.25rem, 2vw, 2.5rem);
|
|
--space-page-y: clamp(4rem, 6vw, 6rem);
|
|
--space-section-compact: clamp(3rem, 4vw, 4.25rem);
|
|
--space-section: clamp(4rem, 6vw, 5.75rem);
|
|
--space-section-spacious: clamp(5rem, 7vw, 7rem);
|
|
--space-cluster-sm: 0.75rem;
|
|
--space-cluster: 1rem;
|
|
--space-cluster-lg: 1.5rem;
|
|
--space-stack-sm: 0.75rem;
|
|
--space-stack: 1.25rem;
|
|
--space-stack-lg: 1.75rem;
|
|
--space-grid: 1.25rem;
|
|
--space-grid-lg: 1.75rem;
|
|
|
|
--content-max-width: 76rem;
|
|
--wide-max-width: 84rem;
|
|
--reading-max-width: 68rem;
|
|
|
|
--type-display-size: clamp(3.3rem, 6vw, 5rem);
|
|
--type-page-size: clamp(2.75rem, 4.2vw, 3.75rem);
|
|
--type-section-size: clamp(2rem, 3.5vw, 3rem);
|
|
--type-card-size: clamp(1.35rem, 2vw, 1.85rem);
|
|
--type-body-size: 1.02rem;
|
|
--type-small-size: 0.94rem;
|
|
--type-eyebrow-size: 0.74rem;
|
|
--type-helper-size: 0.82rem;
|
|
--tracking-display: -0.055em;
|
|
--tracking-tight: -0.03em;
|
|
--tracking-eyebrow: 0.18em;
|
|
--line-display: 0.95;
|
|
--line-heading: 1.02;
|
|
--line-body: 1.75;
|
|
--line-tight: 1.45;
|
|
|
|
/* Legacy aliases used by existing primitives and content blocks. */
|
|
--color-copy: var(--color-muted-foreground);
|
|
--color-line: var(--color-border);
|
|
--color-panel: var(--surface-shell);
|
|
--color-panel-strong: var(--surface-shell-strong);
|
|
--color-panel-soft: var(--surface-muted);
|
|
--color-brand: var(--color-primary);
|
|
--color-brand-soft: var(--surface-accent);
|
|
--color-signal: var(--color-success);
|
|
--color-warm: var(--color-warning);
|
|
--shadow-panel: var(--shadow-panel-strong);
|
|
}
|