/* OperHub — Design tokens * * The single source of truth for colour, type, spacing and elevation. * Nothing in here targets a selector; it only declares values. Component * styling lives in main.css and should reference these variables rather * than hard-coding a hex or a pixel size. * * Direction: a dense operations tool. Neutrals carry the interface, one * accent marks the primary action, and saturated colour is reserved for * status so it always means something. */ :root { /* ---- Neutrals -------------------------------------------------- */ --oh-canvas: #f6f7f9; /* app background behind surfaces */ --oh-surface: #ffffff; /* cards, tables, modals */ --oh-surface-2: #fbfcfd; /* filter bars, table headers, wells */ --oh-surface-3: #f0f1f3; /* hover fills, inert chips */ --oh-border: #e3e5e9; /* dividers, table rules */ --oh-border-firm: #d0d3da; /* input and button outlines */ --oh-ink: #14161a; /* primary text */ --oh-ink-2: #5b6069; /* labels, secondary text */ --oh-ink-3: #8a8f99; /* placeholders, disabled, meta */ /* ---- Accent ---------------------------------------------------- */ --oh-accent: #3b5bdb; --oh-accent-hover: #3550c4; --oh-accent-soft: #eef1fd; /* tinted fill behind accent text */ --oh-accent-ink: #2f4bc4; /* accent text on a soft fill */ /* ---- Sidebar --------------------------------------------------- */ --oh-nav-bg: #17191d; --oh-nav-ink: #a8adb8; --oh-nav-ink-on: #ffffff; --oh-nav-hover: #1f2228; --oh-nav-active: #262a31; --oh-nav-rule: #24272d; --oh-nav-group: #6b7180; /* section headings */ /* ---- Schedule board -------------------------------------------- */ /* Draggable split (intake review) */ --oh-split-handle-w: 1rem; --oh-split-grip-h: 2.5rem; --oh-sched-label-w: 10.5rem; --oh-sched-lane-h: 2rem; --oh-sched-gridline: #eceef1; --oh-sched-gridline-major: #d0d3da; /* A booked run reads like a scheduled delivery — same status vocabulary, so the two boards don't teach two different colour languages. */ --oh-sched-bar-bg: #e6f4f8; --oh-sched-bar-fg: #1a6d84; --oh-sched-bar-past-bg: #f0f1f3; --oh-sched-bar-past-fg: #6b7180; --oh-sched-slot-hover: #f6f7f9; --oh-sched-now: #b42222; /* ---- Sidebar clock --------------------------------------------- */ --oh-clock-ink: var(--oh-nav-ink-on); --oh-clock-meta: var(--oh-nav-group); --oh-clock-size: 1.0625rem; /* 17px — readable across the room */ /* ---- Semantic -------------------------------------------------- */ --oh-success: #1c7a43; --oh-success-soft: #e7f5ec; --oh-warning: #92600b; --oh-warning-soft: #fdf1de; --oh-danger: #b42222; --oh-danger-soft: #fdecec; --oh-info: #1a6d84; --oh-info-soft: #e6f4f8; /* ---- Status ---------------------------------------------------- * Every status the app can render, as a soft-fill / readable-ink pair. * Orders: created, confirmed, finished. Deliveries: draft, scheduled, * delivering, delivered. Bills: draft, paid. Shared: cancelled. */ --oh-st-created-bg: #f0f1f3; --oh-st-created-fg: #5b6069; --oh-st-confirmed-bg: #eaeffe; --oh-st-confirmed-fg: #2f4bc4; --oh-st-finished-bg: #e7f5ec; --oh-st-finished-fg: #1c7a43; --oh-st-draft-bg: #f0f1f3; --oh-st-draft-fg: #6b7180; --oh-st-scheduled-bg: #e6f4f8; --oh-st-scheduled-fg: #1a6d84; --oh-st-delivering-bg: #fdf1de; --oh-st-delivering-fg: #92600b; --oh-st-delivered-bg: #e7f5ec; --oh-st-delivered-fg: #1c7a43; --oh-st-paid-bg: #e7f5ec; --oh-st-paid-fg: #1c7a43; --oh-st-cancelled-bg: #fdecec; --oh-st-cancelled-fg: #b42222; /* ---- Type ------------------------------------------------------ * 13px base. Latin and Traditional Chinese share the stack; the CJK * faces are listed ahead of the Latin fallbacks so 繁中 never lands on * a substituted face mid-sentence. */ --oh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif; --oh-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --oh-text-2xs: 0.6875rem; /* 11px — table headers, eyebrow labels */ --oh-text-xs: 0.75rem; /* 12px — meta, captions, counts */ --oh-text-sm: 0.78125rem; /* 12.5px — dense controls */ --oh-text-md: 0.8125rem; /* 13px — body, the default */ --oh-text-lg: 0.90625rem; /* 14.5px — page titles, card headers */ --oh-text-xl: 1.0625rem; /* 17px — section headings */ --oh-text-2xl: 1.375rem; /* 22px — screen titles */ --oh-text-3xl: 1.875rem; /* 30px — dashboard figures */ --oh-weight-normal: 400; --oh-weight-medium: 520; /* controls, emphasised cells */ --oh-weight-semi: 600; /* headers, active nav */ --oh-weight-bold: 680; /* figures */ --oh-leading-tight: 1.25; --oh-leading-body: 1.5; /* generous enough for CJK */ --oh-tracking-tight: -0.01em; /* headings */ --oh-tracking-wide: 0.045em; /* uppercase table headers */ /* ---- Spacing (4px scale) --------------------------------------- */ --oh-space-1: 0.25rem; /* 4px */ --oh-space-2: 0.5rem; /* 8px */ --oh-space-3: 0.75rem; /* 12px */ --oh-space-4: 1rem; /* 16px */ --oh-space-5: 1.25rem; /* 20px */ --oh-space-6: 1.5rem; /* 24px */ --oh-space-8: 2rem; /* 32px */ /* ---- Sizing ---------------------------------------------------- */ --oh-control-h: 1.75rem; /* 28px — default input/button height */ --oh-control-h-sm: 1.5rem; /* 24px — .btn-sm */ --oh-row-h: 2.125rem; /* 34px — table row */ --oh-sidebar-w: 12.125rem; /* 194px */ /* ---- Radius ---------------------------------------------------- */ --oh-radius-sm: 4px; --oh-radius: 6px; --oh-radius-lg: 10px; --oh-radius-pill: 20px; /* ---- Elevation ------------------------------------------------- * Sparingly. Depth is carried by borders; shadow marks things that * genuinely float above the page. */ --oh-shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.05); --oh-shadow: 0 1px 2px rgba(20, 22, 26, 0.05), 0 8px 24px -12px rgba(20, 22, 26, 0.12); --oh-shadow-lg: 0 12px 32px -8px rgba(20, 22, 26, 0.18); --oh-focus-ring: 0 0 0 3px var(--oh-accent-soft); }