/* ===================================================================== * styles.css — shared stylesheet for nano-key-ui * * Loaded by: * • multi-chroma-key-setup.html (full 7-step workflow) * • multi-chroma-key-sample.html (simplified sample page) * • multi-chroma-key-player.html (player) * • setup.html (refresh setup page) * * Section tags in comments: * [shared] — used by both pages * [setup only] — only referenced by multi-chroma-key-setup.html * [sample only] — only referenced by multi-chroma-key-sample.html * * Brand: nanocosmos demo tier (web.pages.gitlab.nanocosmos.cloud). * Headings: Lexend Deca · Body: Source Sans 3 * Orange #F48220 · Navy #00486C · Light Blue #0F8DC8 * ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap'); /* ---------- Brand tokens ---------- */ :root { /* Brand core */ --orange: #F48220; --orange-dark: #EF7D00; --blue: #0F8DC8; --navy: #00486C; --hero-navy: #0A436A; /* Dark-UI surface scale derived from navy */ --surface-0: #0E2A3F; /* page background */ --surface-1: #0A436A; /* section panels */ --surface-2: #0F537F; /* nested cards / table-row hover */ --surface-3: #14628F; /* selected state */ --surface-deep: #061B29; /* inputs, code, deepest */ /* Text on dark — tuned for AA contrast on --surface-1/2 */ --text: #FFFFFF; --text-soft: #E3EDF3; /* AAA on all dark surfaces */ --text-muted: #B5C8D6; /* AA on surface-1/2; use for body-meta */ --text-faint: #8FA8B8; /* AA-large on surface-1/2; use for 11–12px hints only */ /* Lines / dividers */ --line-dark: #1F5E85; --line-faint: rgba(255, 255, 255, 0.08); /* Status colors (legible on navy) */ --ok: #4CAF50; --warn: #F4A720; --err: #F25C5C; /* Form-field text on white field bg */ --ink-on-light: #313131; /* Typography (demo tier: Lexend Deca + Source Sans 3 per brand guide) */ --font-display: 'Lexend Deca', 'Source Sans 3', Helvetica, Arial, sans-serif; --font-body: 'Source Sans 3', 'Open Sans', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Geometry */ --radius: 8px; --radius-sm: 4px; --shadow: 0 18px 50px rgba(0, 0, 0, 0.28); } /* ---------- Light theme overrides ---------- * Activated by ``. The pre-paint