/* Ansikt — shared design tokens. Imported by both Design System.html and App Components.html, and by the application surfaces themselves. */ :root { /* ─── Surfaces ─── */ --paper: #fafaf7; --paper-2: #f3f1ea; --paper-3: #ebe8de; /* ─── Ink ─── */ --ink: #0d0d0c; --ink-2: #2a2926; --ink-3: #5b5853; --ink-4: #8b877f; /* ─── Structure ─── */ --hairline: #e2dfd6; --hairline-strong: #c9c5b8; /* ─── Accent (oklch — retunable) ─── */ --accent: oklch(0.55 0.12 178); --accent-deep: oklch(0.42 0.10 178); --accent-soft: oklch(0.96 0.04 178); /* ─── Status (muted on purpose — no SaaS-bright) ─── */ --status-warn: oklch(0.62 0.10 70); /* warm amber */ --status-warn-soft: oklch(0.95 0.04 80); --status-error: oklch(0.50 0.13 28); /* clay red */ --status-error-soft: oklch(0.95 0.03 28); --status-ok: oklch(0.50 0.08 150); /* moss */ --status-ok-soft: oklch(0.95 0.03 150); --status-info: var(--accent-deep); --status-info-soft: var(--accent-soft); /* ─── Type families ─── */ --serif: "Instrument Serif", "Times New Roman", Georgia, serif; --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ─── Radii ─── */ --r-1: 2px; /* bbox, tight tags */ --r-2: 3px; /* mono accent tags */ --r-3: 4px; /* buttons, inputs, cards */ --r-4: 6px; /* logo mark, modals */ --r-pill: 99px; /* chips, status pills */ /* ─── Spacing — document register (existing) ─── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; /* ─── Spacing — app register (compact, new) ─── */ --sa-1: 2px; --sa-2: 6px; --sa-3: 10px; --sa-4: 14px; --sa-5: 20px; --sa-6: 28px; /* ─── Type scale — document (existing) ─── */ --fs-display: 84px; --fs-headline: 38px; --fs-title: 24px; --fs-body: 15px; --fs-small: 13px; --fs-mono: 11px; /* ─── Type scale — app (compact, new) ─── */ --fs-app-h: 20px; /* page headers (serif) */ --fs-app-row: 13px; /* table & form bodies */ --fs-app-ui: 12.5px; /* buttons, inputs, tabs */ --fs-app-meta: 11px; /* mono labels, IDs */ --fs-app-tiny: 10.5px; /* axis, helper, kicker */ /* ─── Control heights ─── */ --h-sm: 28px; --h-md: 32px; --h-lg: 38px; /* document register */ --h-xl: 44px; /* CTAs */ /* ─── Elevation ─── */ --shadow-modal: 0 20px 60px rgba(0,0,0,0.18); --shadow-pop: 0 8px 24px rgba(0,0,0,0.10); /* ─── Icon stroke ─── */ --icon-stroke: 1.3; /* ─── Motion ─── */ --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1); --t-fast: 120ms; --t-med: 150ms; --t-slow: 400ms; /* ─── Themed alphas (light defaults) ─── */ --hbar-bg: rgba(250, 249, 247, 0.92); --overlay-scrim: rgba(10, 10, 10, 0.4); --on-accent: #ffffff; } /* ─── Dark theme — retuned, not inverted ──────────────────────────── Keeps the warm hue so it still reads as Watchtower paper at night. Toggle with [data-theme="dark"] on . */ :root[data-theme="dark"] { /* Surfaces — warm near-black, stepping up */ --paper: oklch(0.18 0.005 90); --paper-2: oklch(0.22 0.006 90); --paper-3: oklch(0.27 0.007 90); /* Ink — warm off-white, stepping down */ --ink: oklch(0.96 0.005 90); --ink-2: oklch(0.86 0.006 90); --ink-3: oklch(0.68 0.007 90); --ink-4: oklch(0.52 0.008 90); /* Structure — subtle highlights instead of dark lines */ --hairline: oklch(0.30 0.006 90); --hairline-strong: oklch(0.40 0.007 90); /* Accent — lift lightness, ease chroma so teal still reads */ --accent: oklch(0.72 0.11 178); --accent-deep: oklch(0.82 0.10 178); --accent-soft: oklch(0.30 0.05 178); /* Status — same hues, retuned for dark backgrounds */ --status-warn: oklch(0.78 0.10 70); --status-warn-soft: oklch(0.30 0.04 70); --status-error: oklch(0.70 0.13 28); --status-error-soft: oklch(0.30 0.04 28); --status-ok: oklch(0.72 0.09 150); --status-ok-soft: oklch(0.28 0.03 150); --status-info: var(--accent-deep); --status-info-soft: var(--accent-soft); /* Elevation — rings, not glows */ --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--hairline-strong); --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--hairline); /* Themed alphas */ --hbar-bg: rgba(28, 27, 25, 0.88); --overlay-scrim: rgba(0, 0, 0, 0.6); --on-accent: oklch(0.18 0.005 90); } /* ─── Base reset shared by all Ansikt surfaces ─── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }