/* ============================================================ WellFlow Design System — Tokens, Reset & Base wf-tokens.css Convention: --wf-* CSS custom properties, .wf-* classes. Per-company theming via [data-company="..."] on . ============================================================ */ :root { /* ---- Neutrals (blue-gray, corporate) ---- */ --wf-bg: #f3f5f9; --wf-surface: #ffffff; --wf-surface-2: #f7f9fc; --wf-surface-3: #eef1f6; --wf-border: #e4e8f0; --wf-border-strong: #cfd6e1; --wf-text: #19233a; --wf-text-muted: #5a6577; --wf-text-subtle: #8b93a3; --wf-text-inverse: #ffffff; /* ---- Primary ramp (WellGroup navy, brand: #13274e) ---- */ --wf-primary-50: #eef2f9; --wf-primary-100: #d8e1f0; --wf-primary-200: #b3c4e0; --wf-primary-300: #8099c9; --wf-primary-400: #4d6db0; --wf-primary-500: #2c4d92; --wf-primary-600: #203f7d; --wf-primary-700: #193465; --wf-primary-800: #13274e; /* brand / sidebar */ --wf-primary-900: #0d1b38; /* ---- Accent (THEMEABLE — overridden per company) ---- */ --wf-accent: var(--wf-primary-600); --wf-accent-hover: var(--wf-primary-700); --wf-accent-active: var(--wf-primary-800); --wf-accent-soft: var(--wf-primary-50); --wf-accent-soft-bd: var(--wf-primary-100); --wf-accent-fg: #ffffff; /* text/icon on accent fill */ --wf-accent-text: var(--wf-primary-700); /* accent text on light bg */ --wf-focus-ring: color-mix(in srgb, var(--wf-accent) 30%, transparent); /* ---- Chrome (app shell) ---- */ --wf-sidebar-bg: var(--wf-primary-800); --wf-sidebar-bg-2: #0f2042; --wf-sidebar-text: #aebdd6; --wf-sidebar-text-on: #ffffff; --wf-sidebar-hover: rgba(255,255,255,.06); --wf-sidebar-active-bg: rgba(255,255,255,.10); --wf-topbar-bg: var(--wf-surface); /* ---- Semantic ---- */ --wf-success: #2f7d3a; --wf-success-soft: #eaf5ec; --wf-success-bd: #cce6d1; --wf-success-text: #256730; --wf-warning: #c47d12; --wf-warning-soft: #fbf3e1; --wf-warning-bd: #f3e2bd; --wf-warning-text: #9a6310; --wf-danger: #c4362b; --wf-danger-soft: #fbeceb; --wf-danger-bd: #f3cdca; --wf-danger-text: #a32b22; --wf-info: #1f6fb2; --wf-info-soft: #eaf2fa; --wf-info-bd: #cadfef; --wf-info-text: #1a5d96; /* ---- Typography ---- */ --wf-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --wf-font-mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace; --wf-fs-xs: 11.5px; --wf-fs-sm: 12.5px; --wf-fs-base: 13.5px; /* compact */ --wf-fs-md: 15px; --wf-fs-lg: 17px; --wf-fs-xl: 20px; --wf-fs-2xl: 25px; --wf-fs-3xl: 31px; --wf-fw-regular: 400; --wf-fw-medium: 500; --wf-fw-semibold: 600; --wf-fw-bold: 700; --wf-lh-tight: 1.25; --wf-lh-base: 1.5; /* ---- Spacing (4px base, compact) ---- */ --wf-space-1: 4px; --wf-space-2: 8px; --wf-space-3: 12px; --wf-space-4: 16px; --wf-space-5: 20px; --wf-space-6: 24px; --wf-space-8: 32px; --wf-space-10: 40px; /* ---- Control heights (compact density) ---- */ --wf-control-h-sm: 28px; --wf-control-h: 34px; --wf-control-h-lg: 40px; /* ---- Radius ---- */ --wf-radius-sm: 4px; --wf-radius-md: 6px; --wf-radius-lg: 8px; --wf-radius-pill: 999px; /* ---- Shadows (soft) ---- */ --wf-shadow-sm: 0 1px 2px rgba(16,33,69,.06); --wf-shadow-md: 0 2px 8px rgba(16,33,69,.08); --wf-shadow-lg: 0 10px 28px rgba(16,33,69,.14); /* ---- Layout ---- */ --wf-sidebar-w: 248px; --wf-sidebar-w-collapsed: 64px; --wf-topbar-h: 56px; --wf-transition: 140ms ease; --wf-z-dropdown: 1000; --wf-z-sticky: 1020; --wf-z-modal: 1050; --wf-z-toast: 1080; } /* ===== Per-company accent themes ===== */ /* WellGroup = default navy (no override needed, listed for clarity) */ [data-company="wellgroup"] { --wf-accent: var(--wf-primary-600); --wf-accent-hover: var(--wf-primary-700); --wf-accent-active: var(--wf-primary-800); --wf-accent-soft: var(--wf-primary-50); --wf-accent-soft-bd: var(--wf-primary-100); --wf-accent-text: var(--wf-primary-700); } /* MineWell = earthy bronze (mining/geology) */ [data-company="minewell"] { --wf-accent: #a85a1f; --wf-accent-hover: #8c4a18; --wf-accent-active: #723c13; --wf-accent-soft: #fbf1e8; --wf-accent-soft-bd: #f0dcc8; --wf-accent-text: #8c4a18; } /* HidroWell = teal/cyan (water/hydro) */ [data-company="hidrowell"] { --wf-accent: #0e7490; --wf-accent-hover: #0b5e75; --wf-accent-active: #094d60; --wf-accent-soft: #e7f3f6; --wf-accent-soft-bd: #c4e3ea; --wf-accent-text: #0b5e75; } /* EnviroWell = green (environment) */ [data-company="envirowell"] { --wf-accent: #2f7d3a; --wf-accent-hover: #286a31; --wf-accent-active: #205528; --wf-accent-soft: #eaf5ec; --wf-accent-soft-bd: #cce6d1; --wf-accent-text: #286a31; } /* ============================================================ Reset & base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--wf-font); font-size: var(--wf-fs-base); line-height: var(--wf-lh-base); color: var(--wf-text); background: var(--wf-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { line-height: var(--wf-lh-tight); font-weight: var(--wf-fw-semibold); color: var(--wf-text); } h1 { font-size: var(--wf-fs-3xl); letter-spacing: -.02em; } h2 { font-size: var(--wf-fs-2xl); letter-spacing: -.015em; } h3 { font-size: var(--wf-fs-xl); letter-spacing: -.01em; } h4 { font-size: var(--wf-fs-lg); } h5 { font-size: var(--wf-fs-md); } h6 { font-size: var(--wf-fs-base); } a { color: var(--wf-accent-text); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--wf-accent-soft); } /* visible keyboard focus everywhere */ :focus-visible { outline: 2px solid var(--wf-accent); outline-offset: 1px; border-radius: var(--wf-radius-sm); } /* tabular numbers helper for money / hours */ .wf-num { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; animation-duration: 0ms !important; } } /* ===== A few layout helpers (used sparingly) ===== */ .wf-row { display: flex; align-items: center; } .wf-row-top { display: flex; align-items: flex-start; } .wf-col { display: flex; flex-direction: column; } .wf-spread { display: flex; align-items: center; justify-content: space-between; } .wf-wrap { flex-wrap: wrap; } .wf-gap-1 { gap: var(--wf-space-1); } .wf-gap-2 { gap: var(--wf-space-2); } .wf-gap-3 { gap: var(--wf-space-3); } .wf-gap-4 { gap: var(--wf-space-4); } .wf-gap-6 { gap: var(--wf-space-6); } .wf-grow { flex: 1 1 auto; } .wf-text-muted { color: var(--wf-text-muted); } .wf-text-subtle { color: var(--wf-text-subtle); } .wf-text-sm { font-size: var(--wf-fs-sm); } .wf-text-xs { font-size: var(--wf-fs-xs); } .wf-fw-medium { font-weight: var(--wf-fw-medium); } .wf-fw-semibold { font-weight: var(--wf-fw-semibold); }