/* ============================================================ Notiflye — design tokens Paper + ink palette, oklch accent, Instrument Serif + Inter + Geist Mono. Body should declare data-theme + data-density: ============================================================ */ :root { /* paper + ink */ --paper: #F4EFE6; --paper-2: #EDE6D8; --paper-3: #E5DCC9; --ink: #16181C; --ink-2: #2B2E36; --ink-3: #5B5F6A; --ink-4: #8A8E99; --rule: rgba(22,24,28,0.12); --rule-strong: rgba(22,24,28,0.22); /* accent (twilight blue) */ --accent-h: 200; --accent: oklch(0.52 0.13 var(--accent-h)); --accent-soft: oklch(0.92 0.04 var(--accent-h)); --accent-ink: oklch(0.32 0.10 var(--accent-h)); /* warm peach for sun-glow */ --glow: oklch(0.86 0.07 60); --glow-deep: oklch(0.74 0.11 50); /* status */ --success: oklch(0.55 0.13 155); --success-soft: oklch(0.94 0.04 155); --error: oklch(0.55 0.18 25); --error-soft: oklch(0.95 0.04 25); /* type */ --serif: "Instrument Serif", "Iowan Old Style", "Charter", Georgia, serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* density */ --section-y: 200px; --gutter: clamp(20px, 4vw, 56px); --maxw: 1240px; } [data-density="cozy"] { --section-y: 96px; } [data-density="comfortable"] { --section-y: 140px; } [data-density="airy"] { --section-y: 200px; } [data-theme="dark"] { --paper: #14161B; --paper-2: #1B1E25; --paper-3: #232730; --ink: #F1ECDF; --ink-2: #D9D2C2; --ink-3: #9DA0AA; --ink-4: #6E7280; --rule: rgba(241,236,223,0.10); --rule-strong: rgba(241,236,223,0.20); --accent: oklch(0.78 0.13 var(--accent-h)); --accent-soft: oklch(0.32 0.08 var(--accent-h)); --accent-ink: oklch(0.92 0.06 var(--accent-h)); --glow: oklch(0.55 0.10 60); --glow-deep: oklch(0.45 0.12 50); --success-soft: oklch(0.30 0.06 155); --error-soft: oklch(0.30 0.07 25); }