/* ============================================================ Clipper — shared editorial design tokens Source of truth for every page. One accent, ink-on-paper. Fonts (Inter + Newsreader) are loaded via a in each page to avoid a render-blocking @import chain. ============================================================ */ :root { /* Type */ --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Surfaces — paper on a quiet desk. No cream. */ --bg: oklch(0.962 0.003 264); --surface: oklch(1 0 0); --surface-2: oklch(0.975 0.003 264); /* Ink ramp — all body/meta tuned to clear AA on white */ --ink: oklch(0.21 0.012 264); --ink-2: oklch(0.40 0.012 264); --ink-3: oklch(0.50 0.010 264); --muted: oklch(0.56 0.008 264); /* Hairlines */ --line: oklch(0.912 0.004 264); --line-2: oklch(0.852 0.005 264); /* Accent — editorial red. Marks new / live / link / action. */ --accent: oklch(0.52 0.20 27); --accent-ink: oklch(0.45 0.18 27); --accent-wash: oklch(0.96 0.04 27); --accent-line: oklch(0.86 0.07 27); /* Read / success / warning */ --ok: oklch(0.50 0.12 150); --ok-wash: oklch(0.955 0.045 150); --ok-line: oklch(0.84 0.09 150); --warn: oklch(0.58 0.13 70); --warn-wash: oklch(0.96 0.05 80); --warn-line: oklch(0.86 0.09 80); /* Ink button hover */ --ink-hover: oklch(0.30 0.012 264); /* Radii & shadow */ --r-xs: 3px; --r-sm: 5px; --r: 8px; --r-lg: 12px; --shadow-sm: 0 1px 2px oklch(0.21 0.012 264 / 0.06); --shadow: 0 6px 22px oklch(0.21 0.012 264 / 0.09); /* Z-scale (semantic) */ --z-dropdown: 10; --z-sticky: 20; --z-overlay: 50; --z-toast: 80; --z-modal: 100; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */ } [hidden] { display: none !important; } /* Corner credit badge — shared across pages */ .vt-badge { position: fixed; bottom: 16px; right: 16px; z-index: var(--z-overlay); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: oklch(1 0 0 / 0.92); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); color: var(--ink-3); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .vt-badge:hover { background: oklch(1 0 0 / 0.98); border-color: var(--ink-3); } /* Dev-only magic-link bypass button (injected into auth shells). Secondary style. */ .auth-dev-login { display: block; width: 100%; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 600; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease); } .auth-dev-login:hover { background: var(--bg); border-color: var(--ink-3); color: var(--ink); } .auth-dev-login:disabled { background: var(--line); border-color: var(--line-2); color: var(--muted); cursor: not-allowed; } .vt-badge img { height: 18px; width: auto; } @media (max-width: 760px) { .vt-badge { bottom: 10px; right: 10px; font-size: 0.72rem; padding: 6px 10px; } .vt-badge img { height: 14px; } }