/* SPDX-License-Identifier: LicenseRef-Fundus-Commercial-1.0 */ /* SPDX-FileCopyrightText: 2026 Sascha Holliger */ /* Design tokens; the layer order is declared here, once. */ @layer vendor, tokens, layout, components, utilities; @layer tokens { /* Dark by default; the light palette via data-theme="light" on , set by the footer's brightness slider below 40%. Plain hex in two flat blocks, not light-dark(): that needs Safari 17.5, and on an older iPad it voids every colour token at computed-value time (no text colour at all). */ :root { color-scheme: dark; /* ---- surfaces ---- Neutral and low-chroma: any warmth in the surround shifts how a silver, albumen or hand-coloured plate reads. Never tint these. */ --fd-bg: #0f1214; --fd-surface: #171b1e; --fd-sunken: #0a0d0f; --fd-line: #282d31; --fd-line-soft: #1f2427; /* ---- elevation ---- The house modal shadow: on a dark ground a hairline alone reads as edgeless. */ --fd-shadow-modal: 0 20px 50px -12px rgb(0 0 0 / 0.75); /* ---- ink ---- */ --fd-ink: #e3e7e9; --fd-muted: #8a9298; --fd-faint: #626a70; /* ---- accent ---- Bottle green, from the velvet and silk linings of cased daguerreotypes and ambrotypes. Used sparingly (links, focus, the active facet), never as a large field. */ --fd-accent: #6cbfa4; --fd-accent-weak: #16302a; /* ---- certainty ---- F established, V presumed, O open. The line style carries the signal (.claim, 30-record.css); colour only reinforces V and O, and F stays neutral: an established fact needs no highlight. */ --fd-cert-f: var(--fd-ink); --fd-cert-v: #d4ab4a; --fd-cert-o: #d98686; --fd-warn: #d9a457; --fd-danger: #e08484; /* text on a filled accent, danger or warn button */ --fd-on-accent: #0c1512; --fd-on-danger: #160a0a; /* the filled warn button stays amber in both themes: --fd-warn is a text colour and turns ochre in the light one */ --fd-warn-fill: #d9a457; --fd-on-warn: #1a1206; } :root[data-theme="light"] { color-scheme: light; --fd-bg: #f1f3f4; --fd-surface: #ffffff; --fd-sunken: #e7eaec; --fd-line: #d6dadd; --fd-line-soft: #e8ebed; /* a softer shadow under the white box */ --fd-shadow-modal: 0 18px 50px -12px rgb(20 24 26 / 0.28); --fd-ink: #15181a; --fd-muted: #5d666c; --fd-faint: #8b9298; --fd-accent: #1e5945; --fd-accent-weak: #e4efe9; --fd-cert-v: #8a6a1f; --fd-cert-o: #8a3d3d; --fd-warn: #8a5a1f; --fd-danger: #8a2f2f; --fd-on-accent: #ffffff; --fd-on-danger: #ffffff; --fd-warn-fill: #e0a93f; } /* The canvas colour comes from the root: body's background reaches the canvas a frame late on a navigation, and Firefox flashes its white canvas in that gap. in the layouts covers the moment before this sheet arrives. */ html { background-color: var(--fd-bg); } html, body, .masthead, .tf, .card, .facet, .plate, .agentcard, .agents-table td, .agents-table th { /* the palette flip is a short fade: ink and ground cross during it, so a long fade means a long moment of unreadable grey text */ transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } :root { /* ---- type ---- Two self-hosted faces (05-fonts.css, font-src 'self'): Atkinson Hyperlegible Next and Mono. Three roles: ui for the application, content for the object (titles, descriptions, notes), data for codes (IDs, EDTF dates, measurements, hashes). */ --fd-font-ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* content keeps its own role, though it uses the same face */ --fd-font-content: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fd-font-data: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --fd-size-xs: 0.75rem; --fd-size-sm: 0.8125rem; --fd-size-md: 0.9375rem; --fd-size-lg: 1.125rem; --fd-size-xl: 1.5rem; --fd-size-2xl: 2rem; /* ---- space ---- */ --fd-space-1: 0.25rem; --fd-space-2: 0.5rem; --fd-space-3: 0.75rem; --fd-space-4: 1rem; --fd-space-5: 1.5rem; --fd-space-6: 2.5rem; --fd-radius: 2px; --fd-measure: 66ch; --fd-shell-max: 92rem; /* ---- Pico ---- Pico reads its own custom properties, so ours are assigned to its names. */ --pico-font-family: var(--fd-font-ui); --pico-font-size: 100%; --pico-line-height: 1.5; --pico-border-radius: var(--fd-radius); --pico-spacing: var(--fd-space-4); --pico-form-element-spacing-vertical: var(--fd-space-2); --pico-form-element-spacing-horizontal: var(--fd-space-3); --pico-background-color: var(--fd-bg); --pico-color: var(--fd-ink); --pico-h1-color: var(--fd-ink); --pico-h2-color: var(--fd-ink); --pico-h3-color: var(--fd-ink); --pico-muted-color: var(--fd-muted); --pico-muted-border-color: var(--fd-line); --pico-primary: var(--fd-accent); --pico-primary-hover: var(--fd-accent); --pico-primary-focus: var(--fd-accent-weak); --pico-primary-background: var(--fd-accent); --pico-primary-hover-background: var(--fd-accent); --pico-primary-border: var(--fd-accent); --pico-primary-underline: color-mix(in srgb, var(--fd-accent) 40%, transparent); --pico-card-background-color: var(--fd-surface); --pico-card-border-color: var(--fd-line); --pico-card-sectioning-background-color: var(--fd-surface); --pico-form-element-background-color: var(--fd-surface); --pico-form-element-border-color: var(--fd-line); --pico-form-element-focus-color: var(--fd-accent); --pico-code-background-color: var(--fd-sunken); --pico-code-color: var(--fd-ink); --pico-table-border-color: var(--fd-line-soft); --pico-table-row-stripped-background-color: transparent; } body { background: var(--fd-bg); color: var(--fd-ink); font-family: var(--fd-font-ui); font-size: var(--fd-size-md); -webkit-text-size-adjust: 100%; } /* Codes are set as codes wherever they appear. */ code, kbd, samp, pre, .uid, .edtf, .measure, .digest, time { font-family: var(--fd-font-data); font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } }