/* ============================================ OAKLENS OS — SHARED STYLES main.css · Every page imports this ============================================ Design system: five presets × two modes, all through L2 semantic tokens (design-spec: docs/starter-template/design-spec.md — palette source of truth). The preset is stamped on by the worker from site.config.js. - aperture contemporary studio (cobalt) — starter default - passe-partout fine-art gallery (oxblood on warm paper) - noir the original tech-noir DNA (#000 / #E0E0E0 / #FF0000) - selenium the folio — cool selenium gray, serif, coral accent - cyanotype the folio in Prussian-blue ink on cool paper New styles use semantic tokens (--bg, --fg, --accent, …) — never raw hex; legacy names (--black, --red, --gray-*) resolve via the compat shim below. ============================================ */ /* ---- SELF-HOSTED FONTS ---- Latin subset, served from /fonts/ on our own origin — replaces the render-blocking Google Fonts request (no third-party DNS/TLS in the critical path). Syne is a variable font: one file covers weights 400–800. font-display: swap keeps text visible during load. */ @font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/syne-latin-var.woff2') format('woff2'); } @font-face { font-family: 'Syne Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/syne-mono-latin.woff2') format('woff2'); } /* Preset faces (starter template). All declared unconditionally — a browser only downloads faces the active preset's font-family stacks actually use. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/archivo-latin-var.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/sora-latin-var.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/fraunces-latin-var.woff2') format('woff2'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/hanken-grotesk-latin-var.woff2') format('woff2'); } /* ---- RESET ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ---- L2 SEMANTIC TOKENS ---- The preset owns the values; components reference only these names. The worker stamps data-preset + data-theme-default on per request (injectSiteChrome), so first paint is already in the configured preset. Default preset: aperture. Mode: Midnight default, Daylight via :root[data-theme="light"] — the same attribute convention the Field Console already uses. Palette values are design-spec §3 literals — do not re-derive them. --accent-rgb carries the accent's raw channels so alpha-composited effects (glows, washes at odd opacities) re-theme with the preset instead of staying hardwired red. */ :root { /* aperture · Midnight */ --bg: #0C0E13; --bg-rgb: 12, 14, 19; --surface: #141821; --surface-2: #1B2233; --line: #242B37; --line-2: #2F3A4C; --fg: #E7EBF2; --fg-strong: #F4F7FC; --muted: #838C9C; --faint: #5A6272; --accent: #5680FF; --accent-rgb: 86, 128, 255; --accent-text: #8FA8FF; --on-accent: #080D1C; --accent-wash: rgba(86, 128, 255, 0.10); --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Sora', system-ui, sans-serif; --font-meta: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --r-card: 10px; --r-chip: 7px; --nav-h: 52px; color-scheme: dark; } :root[data-theme="light"] { /* aperture · Daylight */ --bg: #EBEEF3; --bg-rgb: 235, 238, 243; --surface: #FFFFFF; --surface-2: #F3F5F9; --line: #DBE1EA; --line-2: #C6CEDC; --fg: #0D1017; --fg-strong: #06080C; --muted: #58616F; --faint: #7A8290; --accent: #1E3FDB; --accent-rgb: 30, 63, 219; --accent-text: #1E3FDB; --on-accent: #FFFFFF; --accent-wash: rgba(30, 63, 219, 0.08); color-scheme: light; } :root[data-preset="passe-partout"] { /* passe-partout · Midnight — the matted print on a gallery wall */ --bg: #17130F; --bg-rgb: 23, 19, 15; --surface: #201A14; --surface-2: #2A221A; --line: #332B20; --line-2: #453A2C; --fg: #EEE7DA; --fg-strong: #FBF6EA; --muted: #A99B85; --faint: #7E735F; --accent: #C4604F; --accent-rgb: 196, 96, 79; --accent-text: #E08A75; --on-accent: #17130F; --accent-wash: rgba(196, 96, 79, 0.12); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-meta: 'Hanken Grotesk', system-ui, sans-serif; --r-card: 4px; --r-chip: 3px; } :root[data-preset="passe-partout"][data-theme="light"] { /* passe-partout · Daylight */ --bg: #EFE9DE; --bg-rgb: 239, 233, 222; --surface: #F8F4EC; --surface-2: #FFFDF8; --line: #E0D7C7; --line-2: #CBBFA9; --fg: #211C15; --fg-strong: #14100B; --muted: #6F6455; --faint: #8D8271; --accent: #963A30; --accent-rgb: 150, 58, 48; --accent-text: #963A30; --on-accent: #FFFFFF; --accent-wash: rgba(150, 58, 48, 0.08); } :root[data-preset="noir"] { /* noir · Midnight — the legacy DNA, exactly today's literals */ --bg: #000000; --bg-rgb: 0, 0, 0; --surface: #0A0A0A; --surface-2: #1A1A1A; --line: #1A1A1A; --line-2: #333333; --fg: #E0E0E0; --fg-strong: #F0F0F0; --muted: #919191; --faint: #555555; --accent: #FF0000; --accent-rgb: 255, 0, 0; --accent-text: #FF4646; --on-accent: #000000; --accent-wash: rgba(255, 0, 0, 0.12); --font-display: 'Syne', sans-serif; --font-body: 'Syne Mono', monospace; --font-meta: 'Syne Mono', monospace; --r-card: 0; --r-chip: 2px; } :root[data-preset="noir"][data-theme="light"] { /* noir · Daylight — the console's proven DAYLIGHT palette (paper + ink + red stamp), lifted as-is */ --bg: #F4F1EA; --bg-rgb: 244, 241, 234; --surface: #FBF9F4; --surface-2: #FFFFFF; --line: #E3DED2; --line-2: #D3CEC2; --fg: #3D3A34; --fg-strong: #131210; --muted: #6B675F; --faint: #8B867C; --accent: #C41111; --accent-rgb: 196, 17, 17; --accent-text: #C41111; --on-accent: #FFFFFF; --accent-wash: rgba(196, 17, 17, 0.07); } :root[data-preset="selenium"] { /* selenium · Midnight — the folio. Named for the toner that gives print blacks their cool cast: a neutral-cool ground, serif display at modest weight, and the coral accent carried over from the OS marketing surface. Squarer geometry than passe-partout — hairlines, not cards. */ --bg: #101318; --bg-rgb: 16, 19, 24; --surface: #171B21; --surface-2: #1C212A; --line: #262B33; --line-2: #333A44; --fg: #DCD8D0; --fg-strong: #EFECE6; --muted: #8F8D88; --faint: #6A6863; --accent: #D8674A; --accent-rgb: 216, 103, 74; --accent-text: #E08063; --on-accent: #101318; --accent-wash: rgba(216, 103, 74, 0.10); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-meta: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --r-card: 2px; --r-chip: 2px; } :root[data-preset="selenium"][data-theme="light"] { /* selenium · Daylight — warm-neutral paper, the accent deepened for small-text contrast on light ground */ --bg: #F4F2EE; --bg-rgb: 244, 242, 238; --surface: #FBF9F6; --surface-2: #FFFFFF; --line: #D6D2CA; --line-2: #C4BFB4; --fg: #2B2E33; --fg-strong: #14171B; --muted: #6D7178; --faint: #8E9198; --accent: #B8482C; --accent-rgb: 184, 72, 44; --accent-text: #B8482C; --on-accent: #FFFFFF; --accent-wash: rgba(184, 72, 44, 0.07); } :root[data-preset="cyanotype"] { /* cyanotype · Midnight — the folio in another darkroom. Named for the Prussian-blue contact print: an inky blue-black ground with a steel-blue accent lifted for dark-ground legibility. Same faces and geometry as selenium — a palette sibling, not a new layout. */ --bg: #0D1620; --bg-rgb: 13, 22, 32; --surface: #14202C; --surface-2: #1A2A3A; --line: #22364A; --line-2: #2E4762; --fg: #D7E0E7; --fg-strong: #EDF4F8; --muted: #8299A9; --faint: #5B7080; --accent: #5C9FCE; --accent-rgb: 92, 159, 206; --accent-text: #85BADF; --on-accent: #0D1620; --accent-wash: rgba(92, 159, 206, 0.10); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-meta: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --r-card: 2px; --r-chip: 2px; } :root[data-preset="cyanotype"][data-theme="light"] { /* cyanotype · Daylight — the print itself: Prussian ink on cool paper */ --bg: #F1F4F5; --bg-rgb: 241, 244, 245; --surface: #F9FBFB; --surface-2: #FFFFFF; --line: #D5DDE1; --line-2: #BFCBD2; --fg: #24323C; --fg-strong: #0F1B24; --muted: #5D7280; --faint: #839299; --accent: #23648E; --accent-rgb: 35, 100, 142; --accent-text: #23648E; --on-accent: #FFFFFF; --accent-wash: rgba(35, 100, 142, 0.08); } /* ---- COMPAT SHIM ---- Legacy names re-resolve against the active preset/mode because the referenced properties change on the same (root) element — the exact trick field-console.css already uses. Page-local