/* ═══════════════════════════════════════════════════════════════════ PHLOEM — DESIGN TOKENS · v0.2 Source of truth. Link first, before components.css. ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300;400;500;600&family=JetBrains+Mono:wght@300;400;500&family=Newsreader:ital,opsz,wght@0,6..72,200;0,6..72,300;1,6..72,200;1,6..72,300;1,6..72,400&display=swap'); :root { /* ── PIGMENT · figurative names ─────────────────────── */ --phl-void: #000000; /* primary bg · 68% */ --phl-ink: #0B0B0B; /* panel · 18% */ --phl-panel: #070707; --phl-line: #1A1A1A; /* dividers · 8% */ --phl-line-hi: #2A2A2A; /* hover / active */ --phl-dim: #4A4A4A; --phl-mid: #6B6B6B; /* meta */ --phl-hi: #A8A8A8; /* secondary text */ --phl-bone: #E6E4DE; /* body · 3% */ --phl-white: #F5F3ED; /* display */ --phl-signal: #3CFFB0; /* reactive · ≤0.5% */ --phl-warn: #C4584A; --phl-gold: #8B7249; /* warm accent · ≤1% */ /* ── PIGMENT · semantic aliases ─────────────────────── */ --phl-bg: var(--phl-void); --phl-surface: var(--phl-ink); --phl-border: var(--phl-line); --phl-border-hi: var(--phl-line-hi); --phl-text: var(--phl-bone); --phl-text-display: var(--phl-white); --phl-text-muted: var(--phl-hi); --phl-text-meta: var(--phl-mid); --phl-text-dim: var(--phl-dim); --phl-accent: var(--phl-signal); --phl-accent-warm: var(--phl-gold); --phl-danger: var(--phl-warn); /* ── TYPE ──────────────────────────────────────────── */ --phl-sans: 'Inter Tight', system-ui, -apple-system, sans-serif; --phl-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --phl-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* scale — anchored to 14px body */ --phl-t-micro: 10px; --phl-t-meta: 11px; --phl-t-body: 14px; --phl-t-body-lg: 15px; --phl-t-lede: 17px; --phl-t-h3: 22px; --phl-t-h2: 28px; --phl-t-h1: 40px; --phl-t-display: 64px; --phl-t-hero: clamp(80px, 14vw, 220px); --phl-lh-tight: 0.9; --phl-lh-snug: 1; --phl-lh-body: 1.55; --phl-lh-mono: 1.45; --phl-tr-display: -0.045em; --phl-tr-hero: -0.06em; --phl-tr-body: 0; --phl-tr-caps: 0.14em; --phl-tr-mono: 0.04em; /* ── SPACING / RHYTHM ──────────────────────────────── */ --phl-s-0: 0; --phl-s-1: 4px; --phl-s-2: 8px; --phl-s-3: 12px; --phl-s-4: 16px; --phl-s-5: 22px; --phl-s-6: 28px; --phl-s-7: 36px; --phl-s-8: 48px; --phl-s-9: 64px; --phl-s-10: 80px; --phl-s-11: 120px; /* ── GRID RAILS ────────────────────────────────────── */ --phl-rail-l: 240px; /* index column width */ --phl-rail-r: 200px; /* meta column width */ --phl-gutter: 1px; /* line, not gap */ /* ── STROKE / BORDER ───────────────────────────────── */ --phl-stroke: 1px solid var(--phl-border); --phl-stroke-hi: 1px solid var(--phl-border-hi); /* ── MOTION ─────────────────────────────────────────── */ --phl-ease: cubic-bezier(.2, .6, .2, 1); --phl-dur-fast: 160ms; --phl-dur-med: 300ms; --phl-dur-slow: 600ms; /* ── DENSITY ───────────────────────────────────────── */ --phl-pad-cell: var(--phl-s-7) var(--phl-s-5); } /* Density variants — set [data-phl-density] on or any container */ [data-phl-density="compact"] { --phl-pad-cell: var(--phl-s-5) var(--phl-s-4); --phl-s-7: 22px; --phl-s-8: 32px; --phl-s-10: 56px; } [data-phl-density="loose"] { --phl-pad-cell: var(--phl-s-8) var(--phl-s-7); --phl-s-7: 48px; --phl-s-8: 64px; --phl-s-10: 120px; } /* ── BASELINE RESET ────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--phl-bg); } body { background: var(--phl-bg); color: var(--phl-text); font-family: var(--phl-sans); font-size: var(--phl-t-body); line-height: var(--phl-lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--phl-accent); color: var(--phl-void); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* Optional — living grain overlay */ .phl-grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: 0.5; }