/* ===================================================================== PEKU · Design tokens --------------------------------------------------------------------- Single source of truth for the Peku visual system. - Light is default. Dark is opt-in via [data-theme="dark"] on . - All component CSS in peku.css references only these custom props. ===================================================================== */ /* ------------------------ Fonts ------------------------ */ /* Load via in HTML head — declared here so designers can find them. Instrument Serif (display, italic), Inter Tight (UI 400/500/600/700/800), JetBrains Mono (numerals + micro labels, 400/500/600/700) */ :root { /* ---------- Type ---------- */ --peku-font-display: 'Instrument Serif', 'Times New Roman', serif; --peku-font-ui: 'Inter Tight', system-ui, -apple-system, sans-serif; --peku-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (px) — display is serif italic-friendly, UI is sans, mono is numerals */ --peku-fs-display-xl: 88px; /* hero amount */ --peku-fs-display-lg: 56px; /* page hero h1 */ --peku-fs-display-md: 44px; /* envelope detail */ --peku-fs-display-sm: 32px; /* section h2 */ --peku-fs-display-xs: 24px; /* card h3 (serif) */ --peku-fs-body-lg: 16px; --peku-fs-body: 14px; --peku-fs-body-sm: 13px; --peku-fs-mono-lg: 20px; --peku-fs-mono: 14px; --peku-fs-mono-sm: 12px; --peku-fs-micro: 10px; /* uppercase JetBrains Mono labels */ --peku-fs-mini: 9px; /* even smaller stamp/meta */ --peku-lh-tight: 1; --peku-lh-display: 1.15; --peku-lh-body: 1.55; --peku-lh-relaxed: 1.7; --peku-tracking-display: -0.025em; --peku-tracking-tight: -0.01em; --peku-tracking-normal: 0; --peku-tracking-mono: 0.02em; --peku-tracking-label: 0.18em; --peku-tracking-stamp: 0.2em; /* ---------- Spacing (4px base) ---------- */ --peku-space-0: 0; --peku-space-1: 4px; --peku-space-2: 8px; --peku-space-3: 12px; --peku-space-4: 16px; --peku-space-5: 20px; --peku-space-6: 24px; --peku-space-7: 32px; --peku-space-8: 40px; --peku-space-9: 48px; --peku-space-10: 56px; --peku-space-11: 64px; --peku-space-12: 80px; /* ---------- Radius ---------- */ --peku-radius-0: 0; --peku-radius-1: 2px; /* default — flat, paper-like */ --peku-radius-2: 3px; /* cards */ --peku-radius-pill: 999px; --peku-radius-disc: 50%; /* ---------- Hairlines / borders ---------- */ --peku-border-w: 1px; --peku-border-w-2: 1.5px; /* stamps, devices */ --peku-border-style-solid: solid; --peku-border-style-dashed: dashed; /* ---------- Layout ---------- */ --peku-content-max: 1440px; --peku-page-pad-x: 56px; --peku-page-pad-y: 48px; --peku-page-pad-x-mobile: 24px; /* ---------- Motion ---------- */ --peku-easing: cubic-bezier(0.2, 0.6, 0.2, 1); --peku-dur-fast: 120ms; --peku-dur: 250ms; --peku-dur-slow: 400ms; /* ---------- Z layers ---------- */ --peku-z-base: 0; --peku-z-raised: 10; --peku-z-overlay: 100; --peku-z-modal: 1000; /* ---------- Grain (paper texture) ---------- */ --peku-grain-op: 0.06; --peku-grain-c: 30, 38, 32; /* RGB tuple */ --peku-grain-image: radial-gradient(circle at 20% 30%, rgba(var(--peku-grain-c), var(--peku-grain-op)) 0.5px, transparent 1.2px), radial-gradient(circle at 70% 60%, rgba(var(--peku-grain-c), var(--peku-grain-op)) 0.5px, transparent 1.2px), radial-gradient(circle at 40% 80%, rgba(var(--peku-grain-c), var(--peku-grain-op)) 0.5px, transparent 1.2px); --peku-grain-size: 3px 3px, 5px 5px, 7px 7px; } /* ===================================================================== LIGHT THEME (default) "Recycled paper under daylight" ===================================================================== */ :root, :root[data-theme="light"] { /* ---------- Surfaces ---------- */ --peku-bg: #f0ece0; /* canvas — warm linen */ --peku-bg-2: #e3ddcc; /* kraft inset */ --peku-paper: #faf7ef; /* card */ --peku-paper-hi: #ffffff; /* highest paper (rare) */ /* ---------- Ink (text) ---------- */ --peku-ink: #1e2620; /* primary text */ --peku-ink-2: #4a5248; /* secondary text */ --peku-ink-3: #8a9084; /* labels, meta */ --peku-ink-4: #b5b0a0; /* disabled */ /* ---------- Lines ---------- */ --peku-line: #d5cfbd; /* hairline */ --peku-line-2: #c7c0ac; /* stronger hairline */ /* ---------- Brand / signal ---------- */ --peku-moss: #4a6b3e; /* primary action · positive · system */ --peku-moss-2: #7d9a6a; /* moss variant */ --peku-moss-soft: #e4ecd8; /* moss tint */ --peku-clay: #b86f4a; /* expense · debit · destructive */ --peku-clay-soft: #f2d9c9; --peku-sand: #d9b86a; /* warning · behind pace */ --peku-sand-soft: #f4e7c0; --peku-sand-ink: #9a7a30; /* on-light readable border for sand */ --peku-sky: #5a7a9a; /* allocation · informational */ --peku-sky-soft: #d7e1ec; --peku-stamp: #b85848; /* rubber-stamp red, used sparingly */ /* ---------- Money colors (semantic) ---------- */ --peku-money-pos: var(--peku-moss); --peku-money-neg: var(--peku-clay); --peku-money-alloc: var(--peku-sky); --peku-money-warn: var(--peku-sand); /* ---------- Shadows (very subtle — paper not glass) ---------- */ --peku-shadow-0: 0 1px 0 rgba(30, 38, 32, 0.04); --peku-shadow-1: 0 1px 2px rgba(30, 38, 32, 0.06); --peku-shadow-2: 0 2px 8px rgba(30, 38, 32, 0.08); /* ---------- Focus ring ---------- */ --peku-focus: 0 0 0 2px var(--peku-moss-soft), 0 0 0 3px var(--peku-moss); color-scheme: light; } /* ===================================================================== DARK THEME "E-ink under a reading lamp" — low-luminance, warm, never midnight. ===================================================================== */ :root[data-theme="dark"] { --peku-bg: #1a1f1a; --peku-bg-2: #232923; --peku-paper: #20261f; --peku-paper-hi: #262d25; --peku-ink: #e8e2d0; --peku-ink-2: #b5b0a0; --peku-ink-3: #7e7a6e; --peku-ink-4: #4e4c44; --peku-line: #363b33; --peku-line-2: #434840; --peku-moss: #9ec184; --peku-moss-2: #b8d09e; --peku-moss-soft: #2a3525; --peku-clay: #e09874; --peku-clay-soft: #3a2820; --peku-sand: #e8c98a; --peku-sand-soft: #2f2a1c; --peku-sand-ink: #e8c98a; --peku-sky: #9cb6d0; --peku-sky-soft: #26303a; --peku-stamp: #e09874; --peku-grain-op: 0.05; --peku-grain-c: 232, 226, 208; --peku-shadow-0: 0 1px 0 rgba(0, 0, 0, 0.2); --peku-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --peku-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4); --peku-focus: 0 0 0 2px var(--peku-moss-soft), 0 0 0 3px var(--peku-moss); color-scheme: dark; } /* ===================================================================== AUTOMATIC DARK MODE (respects OS) — opt-in via class on Add class="peku-auto-theme" to if you want OS to drive it. ===================================================================== */ @media (prefers-color-scheme: dark) { :root.peku-auto-theme:not([data-theme="light"]) { --peku-bg: #1a1f1a; --peku-bg-2: #232923; --peku-paper: #20261f; --peku-paper-hi: #262d25; --peku-ink: #e8e2d0; --peku-ink-2: #b5b0a0; --peku-ink-3: #7e7a6e; --peku-ink-4: #4e4c44; --peku-line: #363b33; --peku-line-2: #434840; --peku-moss: #9ec184; --peku-moss-2: #b8d09e; --peku-moss-soft: #2a3525; --peku-clay: #e09874; --peku-clay-soft: #3a2820; --peku-sand: #e8c98a; --peku-sand-soft: #2f2a1c; --peku-sand-ink: #e8c98a; --peku-sky: #9cb6d0; --peku-sky-soft: #26303a; --peku-stamp: #e09874; --peku-grain-op: 0.05; --peku-grain-c: 232, 226, 208; color-scheme: dark; } }