/* ========================================================================= * Elora Studio — Design tokens * Single source of truth for color, type, spacing, motion. * Both the public site and the admin dashboard inherit from here. * ========================================================================= */ /* Webfonts worden niet-blokkerend in de van de layouts geladen * (preconnect + preload-onload), niet via @import — dat brak de render-keten. */ :root { /* --- Brand palette --------------------------------------------------- */ --color-bg: #050505; --color-bg-elevated: #0e0d0c; --color-bg-gradient: #12100f; --color-surface: #161412; --color-surface-2: #1f1c1a; --color-border: #2a2622; --color-border-strong: #3a342e; --color-text: #eaddd3; /* champagne, primary */ --color-text-muted: rgba(234, 221, 211, 0.65); --color-text-dim: rgba(234, 221, 211, 0.40); --color-accent: #8c7a6b; --color-accent-hover: #a99481; --color-accent-soft: rgba(140, 122, 107, 0.15); --color-success: #7ea98c; --color-warning: #d4a574; --color-danger: #c97b6b; --color-info: #8aa9c9; /* --- Type ----------------------------------------------------------- */ --font-display: 'Cinzel', 'Cormorant Garamond', Georgia, serif; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.375rem; /* 22 */ --fs-xl: 1.75rem; /* 28 */ --fs-2xl: 2.25rem; /* 36 */ --fs-3xl: 3rem; /* 48 */ --fs-4xl: 4rem; /* 64 */ --lh-tight: 1.2; --lh-body: 1.6; --lh-loose: 1.8; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.18em; /* --- Spacing scale -------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* --- Radius / shadow / motion -------------------------------------- */ --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --radius-xl: 16px; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 12px rgba(0,0,0,.5); --shadow-3: 0 12px 40px rgba(0,0,0,.6); --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 720ms; --max-w-prose: 64ch; --max-w-page: 1280px; } /* --- Base reset ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--color-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--color-accent-hover); } ::selection { background: var(--color-accent); color: var(--color-bg); }