/* ══════════════════════════════════════════════════════════════ Design tokens — ported from the K12 reference repo. Source of truth: ~/Documents/K12/app/src/ui/styles/tokens.css When K12 updates, re-sync this file verbatim, then refactor. ══════════════════════════════════════════════════════════════ */ :root { /* ── Lab Design System ── */ /* Palette — Field Notebook v2 (Apr 2026) */ --color-bg: #F4F1E1; --color-surface: #FFFDF5; --color-surface-hover: #EDE9D9; --color-border: rgba(26, 26, 26, 0.14); --color-border-strong: rgba(26, 26, 26, 0.40); /* Text */ --color-text: #1A1A1A; --color-text-secondary: #43423D; --color-text-tertiary: #6A695F; /* Accent (legacy ink for emphasis frames) */ --color-accent: #1A1A1A; --color-accent-hover: #000000; --color-accent-muted: rgba(26, 26, 26, 0.06); /* Semantic */ --color-primary: #1A1A1A; --color-primary-hover: #333; --color-white: #FFFDF5; --color-white-muted: rgba(26, 26, 26, 0.45); /* Yellow accent — secondary CTA, tools, "do this" cue. Hover direction INVERTED in v2: hover is DARKER, not lighter. */ --color-yellow-sticky: #F5C24E; --color-yellow-hover: #EDB22D; --color-yellow-tint: #FBE9B5; /* "Active / live / completed" — primary CTA, ON state */ --color-success: #1F8F4E; --color-success-hover: #177A40; --color-success-border: #0F5C4A; --color-success-tint: #D8EFDF; /* Quiet states (new in v2) — replace bare #fff for inactive */ --color-inactive: #A8A498; --color-off: #D5D1C2; /* Info — modals, helper callouts, current-trial highlight */ --color-highlight: #2C5C8A; --color-highlight-tint: #DCE7F2; --color-highlight-light: #4A7CB0; --color-warning: #B45A0E; --color-warning-tint: #F4DEC1; --color-error: #B23A2A; --color-error-tint: #F1D6D0; --color-value-blue: #1A1A1A; /* Pour-fluid colors — promoted from PourWidget hardcodes. Cold/room/warm/done must read as distinct temperatures at a glance. Per UI feedback (Lisa): the previous --color-pour-room (#9CC2D8) was too close to cold (#1E5DA8) — both blue. Room is now a warm neutral beige so cold reads unambiguously. */ --color-pour-cold: #1E5DA8; --color-pour-room: #C8BFA8; --color-pour-warm: #E07A2A; --color-pour-done: #1F8F4E; /* Neutral intermediates */ --color-gray-600: #666; --color-gray-700: #333; --color-gray-100: #f5f5f7; /* Typography — Field Notebook v2: Space Grotesk · IBM Plex Sans · IBM Plex Mono */ --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 2rem; /* 32px */ --font-size-3xl: 3rem; /* 48px */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Spacing */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.125rem; /* 18px */ --space-xl: 1.5rem; /* 24px */ --space-2xl: 2rem; /* 32px */ /* Radii — tight for clean feel */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 2px; /* K12 convention — tight rectangles. Use 9999px literal for circles. */ --radius-pill: 9999px; /* wrapper-only alias for pill/circle shapes */ /* Shadows — hard offset */ --shadow-panel: 2px 2px 0 rgba(26, 26, 26, 0.10), 0 0 0 1px rgba(26, 26, 26, 0.08); --shadow-panel-hover: 3px 3px 0 rgba(26, 26, 26, 0.15), 0 0 0 1px rgba(26, 26, 26, 0.12); --shadow-button: 2px 2px 0 rgba(26, 26, 26, 0.10); --shadow-hard: 2px 2px 0 #1A1A1A; /* Transitions */ --transition-fast: 150ms ease-out; --transition-normal: 250ms ease-out; /* ── Widget system — Field Notebook v2 chrome ── Was a 75 px yellow sticky bar; now a 56 px cream-paper card with ink border and mono UPPERCASE label, per the K12 Design v2 spec (Sensor · CO₂ widget). */ --widget-bar-bg: var(--color-surface); --widget-bar-border: 2px solid var(--color-text); --widget-bar-radius: 6px; --widget-bar-shadow: 4px 4px 0 rgba(26, 26, 26, 0.18); --widget-bar-color: var(--color-text); --widget-bar-height: 56px; --widget-label-font: var(--font-mono); --widget-label-weight: 500; --widget-label-size: 10px; --widget-label-tracking: 0.10em; --widget-label-color: var(--color-text-tertiary); /* Widget button radius — the only widget-btn token still consumed. The button surface (.widget-btn in widget-base-styles.js, .wb-btn in widget-bar.css) inlines its green-stamp colour/shadow directly against --color-success / --shadow-button. */ --widget-btn-radius: 4px; --widget-toggle-bg: var(--color-surface); --widget-sep-color: rgba(26, 26, 26, 0.14); --widget-host-width: fit-content; --widget-host-max-width: none; /* Spring/time-control scale pill */ --scale-pill-bg: transparent; --scale-pill-border: none; --scale-pill-radius: 2px; --scale-pill-shadow: none; --scale-pill-color: var(--color-text); --scale-pill-unit-color: var(--color-text-tertiary); --scale-value-font: var(--font-display); --scale-value-weight: 600; --scale-value-size: 22px; --scale-unit-weight: 500; --scale-unit-font: var(--font-mono); --scale-unit-size: 11px; --scale-zero-bg: rgba(26, 26, 26, 0.08); --scale-track-bg: var(--color-surface); --scale-track-border: 1.5px solid var(--color-text); --scale-track-shadow: none; --scale-track-height: 24px; --scale-fill-color: var(--color-success); --scale-tick-color: rgba(10, 66, 56, 0.2); --scale-tick-major: rgba(10, 66, 56, 0.2); /* ── Step bar ── */ --step-bar-instruction-font: var(--font-display); --step-bar-instruction-weight: 700; --step-bar-instruction-tracking: -0.03em; --step-bar-surface: #FFFDF5; --step-bar-border: 2px solid #1A1A1A; --step-bar-radius: 12px; --step-bar-shadow: 6px 6px 0 rgba(26, 26, 26, 0.18); --step-bar-btn-border: 1px solid rgba(26, 26, 26, 0.2); --step-bar-btn-radius: 2px; --step-bar-btn-bg: transparent; --step-bar-btn-shadow: none; --step-bar-segment-radius: 1px; --step-bar-segment-bg: rgba(26, 26, 26, 0.12); /* ── Loading screen ── */ --loading-bg: #F4F1E1; --loading-color: #1A1A1A; --loading-sub: #7a7a7a; --loading-spinner: #1A1A1A; --loading-ring: rgba(26, 26, 26, 0.12); /* ── Completion screen ── */ --completion-card-bg: #FFFDF5; --completion-card-shadow: 4px 4px 0 rgba(26, 26, 26, 0.12); --completion-card-border: 1px solid rgba(26, 26, 26, 0.15); --completion-card-radius: 6px; --completion-title-color: #1A1A1A; --completion-sub-color: #7a7a7a; --completion-btn-primary-bg: #1A1A1A; --completion-btn-primary-border: #1A1A1A; --completion-btn-primary-hover: #333; --completion-btn-secondary-bg: #FFFDF5; --completion-btn-secondary-color: #1A1A1A; --completion-btn-secondary-border: rgba(26, 26, 26, 0.2); --completion-btn-radius: 2px; /* ── Restart link ── */ --restart-bg: transparent; --restart-border: 1px solid rgba(26, 26, 26, 0.15); --restart-shadow: 1px 1px 0 rgba(26, 26, 26, 0.08); /* ── Info modal ── */ --info-modal-backdrop: rgba(26, 26, 26, 0.35); --info-modal-bg: #FFFFFF; --info-modal-border: 1.5px solid #1A1A1A; --info-modal-shadow: 3px 3px 0 rgba(26, 26, 26, 0.45); --info-modal-radius: 4px; --info-modal-item-bg: rgba(26, 26, 26, 0.03); --info-modal-item-accent: #1A1A1A; --info-modal-arrow-bg: rgba(26, 26, 26, 0.06); --info-modal-callout-bg: rgba(252, 221, 93, 0.15); --info-modal-callout-accent: #FFCC66; --info-modal-icon-bg: #FFCC66; } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; } }