/* ========================================================================== Flobotics design tokens One system, four registers: corporate, lab, cto, ceo. Registers are set with . Theme with . ========================================================================== */ :root { /* ---- Brand palette (fixed values, never themed) ---- */ --c-graphite: #15181A; --c-lab-white: #F4F6F5; --c-report-white: #FFFFFF; --c-yellow: #F2C230; --c-steel: #5B6568; --c-rule: #D5DADA; --c-rule-strong: #AEB6B7; --c-blue: #2F52E0; --c-forest: #1F5641; --c-stone: #ECEAE4; --c-pass: #1E8E5A; --c-fail: #C8402C; /* ---- Roles: light theme ---- */ --bg: #F4F6F5; --surface: #FFFFFF; --surface-2: #EDF0EF; --ink: #15181A; --ink-2: #2A3033; --muted: #5B6568; --faint: #8A9496; --line: #D5DADA; --line-strong: #AEB6B7; --yellow: #F2C230; --on-yellow: #15181A; --yellow-soft: #FBEDB8; --blue: #2F52E0; --forest: #1F5641; --stone: #ECEAE4; --stone-ink: #1E211F; --pass: #1E8E5A; --fail: #C8402C; /* Instrument panels (dark in both themes) */ --panel: #15181A; --panel-2: #1F2427; --panel-ink: #E8ECEB; --panel-muted: #8E999B; --panel-line: #2F373A; /* Data series: validated categorical order (3-slot cap, all pairs pass CVD) */ --s1: #2F52E0; --s2: #D9661F; --s3: #159F72; --ref: #8A9496; /* Register accent (overridden per register) */ --accent: var(--yellow); --accent-ink: var(--on-yellow); /* Photo treatment tones (corporate: neutral cool) */ --ph-dark: #262C2F; --ph-mid: #69757A; --ph-light: #CDD5D6; /* ---- Type ---- */ --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif; --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --f-serif: "Newsreader", Georgia, "Times New Roman", serif; --f-head: var(--f-display); --head-stretch: 125%; --head-weight: 720; --head-track: -0.025em; /* ---- Layout ---- */ --maxw: 1280px; --pad-x: 24px; --gutter: 24px; --sec-y: 128px; --radius: 2px; --nav-h: 64px; /* ---- Motion ---- */ --ease: cubic-bezier(.2, 0, 0, 1); --t-fast: 120ms; --t-med: 220ms; } @media (max-width: 1024px) { :root { --sec-y: 96px; } } @media (max-width: 640px) { :root { --sec-y: 64px; --pad-x: 16px; --gutter: 16px; } } /* ---- Dark theme: designed, not inverted ---- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0F1213; --surface: #171B1D; --surface-2: #1C2124; --ink: #E8ECEB; --ink-2: #C9D0D0; --muted: #98A2A4; --faint: #6E787A; --line: #2A3134; --line-strong: #46525A; --yellow-soft: #3A3217; --blue: #8098FF; --forest: #7DBF9C; --stone: #1B1C19; --stone-ink: #ECE8E0; --pass: #45BE85; --fail: #F0705C; --panel: #1A1F22; --panel-2: #22292C; --panel-line: #343D41; --s1: #6F88F5; --s2: #D96A26; --s3: #1F9E74; --ref: #6E787A; } /* ========================================================================== Registers ========================================================================== */ /* LAB: yellow-led, graph paper, instrument-heavy */ body[data-register="lab"], .reg-lab { --bg: #EEF1EF; --grid-minor: rgba(21, 24, 26, .045); --grid-major: rgba(21, 24, 26, .09); } :root[data-theme="dark"] body[data-register="lab"], :root[data-theme="dark"] .reg-lab { --bg: #0D1011; --grid-minor: rgba(232, 236, 235, .035); --grid-major: rgba(232, 236, 235, .07); } /* CTO v0.1 (kept for comparison): white notebook, Markup Blue annotations */ body[data-register="cto-v1"], .reg-cto-v1 { --bg: #FAFBFB; --accent: var(--blue); --accent-ink: #FFFFFF; --head-stretch: 118%; --ph-dark: #111416; --ph-mid: #596265; --ph-light: #DDE2E3; } :root[data-theme="dark"] body[data-register="cto-v1"], :root[data-theme="dark"] .reg-cto-v1 { --bg: #0E1112; --accent-ink: #0E1112; } /* CTO: dark "night shift" by default. Embedded CTO elements (.reg-cto) elsewhere on the site are always dark. Bone text on near-black, yellow marker, alarm red for risk. */ body[data-register="cto"], .reg-cto, :root[data-theme="dark"] body[data-register="cto"], :root[data-theme="dark"] .reg-cto { color-scheme: dark; --bg: #0B0E0F; --surface: #13171A; --surface-2: #1A1F22; --ink: #ECEBE4; --ink-2: #C9CBC5; --muted: #8F9794; --faint: #5E6765; --line: #242A2D; --line-strong: #3A4346; --blue: #F2C230; --yellow-soft: #3A3217; --fail: #F0705C; --pass: #45BE85; --panel: #050707; --panel-2: #101415; --panel-line: #242A2D; --accent: #F2C230; --accent-ink: #15181A; --head-stretch: 125%; --ph-dark: #06080A; --ph-mid: #3B4346; --ph-light: #CBD2D2; --s1: #6F88F5; --s2: #D96A26; --s3: #1F9E74; --mark: #F2C230; /* marker strokes */ --mark-ink: #F2C230; /* marker handwriting and small annotation text */ --grain-op: .5; } /* CTO light "day shift": only when the visitor chooses light on CTO Notes. White notebook, graphite type, yellow highlighter strokes, amber ink for notes. */ :root[data-theme="light"] body[data-register="cto"] { color-scheme: light; --bg: #F6F7F4; --surface: #FFFFFF; --surface-2: #ECEEEA; --ink: #121517; --ink-2: #2A3033; --muted: #5B6568; --faint: #8A9496; --line: #DADDD8; --line-strong: #AEB6B7; --blue: #8A6100; --yellow-soft: #FBEDB8; --fail: #C8402C; --pass: #1E8E5A; --panel: #15181A; --panel-2: #1F2427; --panel-line: #2F373A; --accent: #F2C230; --accent-ink: #15181A; --ph-dark: #111416; --ph-mid: #596265; --ph-light: #DDE2E3; --s1: #2F52E0; --s2: #D9661F; --s3: #159F72; --mark: #F2C230; --mark-ink: #8A6100; --grain-op: 0; } /* CEO: warm Stone room, serif voice, Forest accent */ body[data-register="ceo"], .reg-ceo { --bg: #ECEAE4; --surface: #F6F5F1; --surface-2: #E3E0D8; --ink: #1E211F; --ink-2: #353834; --muted: #5E605A; --faint: #8C8C84; --line: #D6D3CB; --line-strong: #B5B1A6; --accent: var(--forest); --accent-ink: #FFFFFF; --f-head: var(--f-serif); --head-stretch: 100%; --head-weight: 480; --head-track: -0.015em; --ph-dark: #3A332B; --ph-mid: #8D8170; --ph-light: #E4DBCB; } :root[data-theme="dark"] body[data-register="ceo"], :root[data-theme="dark"] .reg-ceo { --bg: #191A17; --surface: #21221E; --surface-2: #282924; --ink: #ECE8E0; --ink-2: #D5D1C8; --muted: #A8A49A; --faint: #7A776F; --line: #34332D; --line-strong: #4C4A42; --accent-ink: #191A17; } /* Graph paper (Lab surfaces only) */ .graph { --grid-minor: rgba(21, 24, 26, .045); --grid-major: rgba(21, 24, 26, .09); background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px); background-size: 64px 64px, 64px 64px, 8px 8px, 8px 8px; } :root[data-theme="dark"] .graph { --grid-minor: rgba(232, 236, 235, .035); --grid-major: rgba(232, 236, 235, .07); }