/* ============================================================ ITMEase — Design Tokens ============================================================ Single source of truth for color, type, space, radius, shadow, motion, and z-index. All component CSS references these — no raw hex values in component files, ever. Architecture ------------ Two layers: 1. PRIMITIVES — raw values (color ramps, type scale, etc.) Prefix: --c-*, --type-*, --space-*, --radius-* 2. SEMANTICS — meaning-bound aliases that components use. Prefix: --bg-*, --fg-*, --border-*, --action-* Components import semantics. Themes re-bind semantics to different primitives. Primitives almost never change. Status: LOCKED to the Fast Check identity (June 2026). Brand: warm signal red #E5472C on warm neutrals; logo renders ink/cream (see --logo-* at the bottom of :root). Provenance: this file = brand/itm-tokens.css (the locked brand handoff) + the APP-SIDE sections appended at the bottom: A. dark-mode link lift B. app semantic deltas C. legacy compatibility shim To take a new brand drop: re-copy brand/itm-tokens.css over the body, re-apply the --font-sans next/font binding below, and keep sections A–C. Do not edit the body by hand otherwise. Modules ------- ITMEase ships verticals (Fire Alarms, Sprinklers, Elevators…). Each module overrides --module-* tokens on a [data-module] container. The brand mark stays put; only the eyebrow color changes. ============================================================ */ :root { /* ───────────────────────────────────────────────────────── 1 · COLOR PRIMITIVES 11-step ramps (50–950) for every hue we use. Generated on a perceptual lightness curve so any two adjacent steps have equivalent contrast deltas. Use the ramp directly only when you genuinely need a specific step; otherwise use semantic tokens further down so dark mode + theming work. ───────────────────────────────────────────────────────── */ /* Neutrals — warm graphite, not pure gray. Slightly cooler than paper-bag warm so it pairs with both red and teal accents. */ --c-neutral-0: #FFFFFF; --c-neutral-50: #FAF8F5; --c-neutral-100: #F4F1EC; --c-neutral-200: #E8E3DA; --c-neutral-300: #D2CBBE; --c-neutral-400: #A89F8F; --c-neutral-500: #75695A; --c-neutral-600: #524A3F; --c-neutral-700: #38332C; --c-neutral-800: #24211C; --c-neutral-900: #15130F; --c-neutral-950: #0B0A08; /* Brand — Safety Orange-Red (Swift Check). Reads as alarm/ action without being clichéd fire-truck red. */ --c-brand-50: #FFF1ED; --c-brand-100: #FFDED2; --c-brand-200: #FFB8A1; --c-brand-300: #FF8B6A; --c-brand-400: #F4623E; --c-brand-500: #E5472C; /* core */ --c-brand-600: #C7361E; --c-brand-700: #A02916; --c-brand-800: #7A1F11; --c-brand-900: #4F140A; --c-brand-950: #2B0A05; /* Status colors — bound to inspection outcomes (PASS / DEFICIENT / CRITICAL / NOT-APPLICABLE). These DO NOT change across themes because the semantics are regulatory, not aesthetic. */ --c-success-50: #ECFDF3; --c-success-100: #D1FADF; --c-success-300: #6CE9A6; --c-success-500: #12B76A; /* PASS */ --c-success-600: #039855; --c-success-700: #027A48; --c-warning-50: #FFFAEB; --c-warning-100: #FEF0C7; --c-warning-300: #FEC84B; --c-warning-500: #F79009; /* DEFICIENT — major */ --c-warning-600: #DC6803; --c-warning-700: #B54708; --c-danger-50: #FEF3F2; --c-danger-100: #FEE4E2; --c-danger-300: #FDA29B; --c-danger-500: #F04438; /* CRITICAL */ --c-danger-600: #D92D20; --c-danger-700: #B42318; --c-info-50: #EFF8FF; --c-info-100: #D1E9FF; --c-info-300: #84CAFF; --c-info-500: #2E90FA; --c-info-600: #1570EF; --c-info-700: #175CD3; /* Module hues — fixed across themes. Vertical identity is non-negotiable: a fire alarm inspection should always feel red, an elevator inspection should always feel blue. */ --c-module-fire-alarm: #DC2626; --c-module-sprinkler: #EA580C; --c-module-extinguisher: #B91C1C; --c-module-elevator: #1D4ED8; --c-module-boiler: #7C2D12; --c-module-electrical: #CA8A04; --c-module-backflow: #0E7490; /* ───────────────────────────────────────────────────────── 2 · TYPOGRAPHY Inter for UI (system fallback for offline-first PWA loads). JetBrains Mono for code/IDs/timestamps where tnum matters. ───────────────────────────────────────────────────────── */ /* --font-inter is bound by next/font on (layout.tsx); the literal "Inter" after it is the no-JS / non-app fallback. */ --font-sans: var(--font-inter, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --font-display: var(--font-sans); /* same family, looser tracking */ /* Type scale — modular, 1.25 ratio above body, 0.875 below. Line heights bias toward readability over "tight design" because inspectors read this on a 6.1" phone in glare. */ --type-xs-size: 11px; --type-xs-line: 16px; --type-xs-track: 0.02em; --type-sm-size: 13px; --type-sm-line: 18px; --type-sm-track: 0; --type-base-size: 15px; --type-base-line: 22px; --type-base-track: 0; --type-md-size: 17px; --type-md-line: 24px; --type-md-track: -0.005em; --type-lg-size: 20px; --type-lg-line: 28px; --type-lg-track: -0.012em; --type-xl-size: 24px; --type-xl-line: 32px; --type-xl-track: -0.018em; --type-2xl-size: 30px; --type-2xl-line: 38px; --type-2xl-track: -0.022em; --type-3xl-size: 36px; --type-3xl-line: 44px; --type-3xl-track: -0.028em; --type-4xl-size: 48px; --type-4xl-line: 56px; --type-4xl-track: -0.034em; --type-5xl-size: 60px; --type-5xl-line: 64px; --type-5xl-track: -0.04em; /* Eyebrow / tag — small all-caps used for module names, status. */ --type-eyebrow-size: 10px; --type-eyebrow-line: 14px; --type-eyebrow-track: 0.12em; --type-eyebrow-weight: 700; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ───────────────────────────────────────────────────────── 3 · SPACE 4px base. Use scale tokens, not raw px, in component CSS. Below 8 reserved for icon-internal padding only — never between two UI elements (would compress on a touch screen). ───────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 128px; /* ───────────────────────────────────────────────────────── 4 · RADIUS Single curve language — components match by tier (xs for chips, sm for inputs, md for cards, lg for sheets, full for avatars/pills). ───────────────────────────────────────────────────────── */ --radius-none: 0; --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 999px; /* ───────────────────────────────────────────────────────── 5 · BORDER WIDTHS ───────────────────────────────────────────────────────── */ --border-0: 0; --border-hair: 1px; --border-1: 1px; --border-2: 2px; --border-3: 3px; --border-4: 4px; /* ───────────────────────────────────────────────────────── 6 · SHADOW (elevation) Low-contrast shadows on warm neutrals. Heavy shadows look wrong on a paper-bag background. ───────────────────────────────────────────────────────── */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(21, 19, 15, 0.05); --shadow-sm: 0 1px 3px rgba(21, 19, 15, 0.07), 0 1px 2px rgba(21, 19, 15, 0.04); --shadow-md: 0 4px 8px -2px rgba(21, 19, 15, 0.08), 0 2px 4px -2px rgba(21, 19, 15, 0.05); --shadow-lg: 0 12px 16px -4px rgba(21, 19, 15, 0.08), 0 4px 6px -2px rgba(21, 19, 15, 0.04); --shadow-xl: 0 20px 24px -4px rgba(21, 19, 15, 0.10), 0 8px 8px -4px rgba(21, 19, 15, 0.04); --shadow-2xl: 0 24px 48px -12px rgba(21, 19, 15, 0.18); --shadow-inset: inset 0 1px 2px rgba(21, 19, 15, 0.06); /* Focus ring — used everywhere. Carries brand color so it's also visual identity. */ --shadow-focus: 0 0 0 3px var(--c-brand-200), 0 0 0 1px var(--c-brand-500); /* ───────────────────────────────────────────────────────── 7 · MOTION Short, cubic ease for UI; longer for reveals. The "swift" curve is brand-coded — it's the same curve the logo's check tail uses. ───────────────────────────────────────────────────────── */ --motion-duration-instant: 80ms; --motion-duration-fast: 140ms; --motion-duration-base: 200ms; --motion-duration-slow: 320ms; --motion-duration-slowest: 500ms; --motion-ease-linear: linear; --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* swift — brand */ --motion-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ───────────────────────────────────────────────────────── 8 · Z-INDEX Component z lives in --z-component. Anything floating above content uses these named layers — no magic numbers. ───────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 200; --z-drawer: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-tooltip: 700; /* ───────────────────────────────────────────────────────── 9 · LAYOUT ───────────────────────────────────────────────────────── */ --layout-max-content: 1280px; --layout-max-prose: 680px; --layout-max-form: 560px; --layout-gutter: var(--space-7); /* 24 */ --layout-gutter-mobile: var(--space-5); /* 16 */ --layout-section: var(--space-12); /* 80 */ /* Touch targets — inspector phone hit-target floor. */ --touch-target-min: 44px; --touch-target-comfy: 48px; /* ───────────────────────────────────────────────────────── 10 · SEMANTIC ALIASES — the API for components Components read these. Themes rebind these to different primitives. NEVER reference --c-* directly in components. ───────────────────────────────────────────────────────── */ /* Surface / background */ --bg-canvas: var(--c-neutral-50); /* page background */ --bg-surface: var(--c-neutral-0); /* card / panel */ --bg-surface-sunk: var(--c-neutral-100); /* nested panel, input */ --bg-surface-raised: var(--c-neutral-0); /* modal, popover */ --bg-overlay: rgba(21, 19, 15, 0.55); /* scrim */ --bg-inverse: var(--c-neutral-900); /* Foreground / text */ --fg-primary: var(--c-neutral-900); /* body text */ --fg-secondary: var(--c-neutral-600); /* secondary copy */ --fg-tertiary: var(--c-neutral-500); /* muted, placeholders */ --fg-disabled: var(--c-neutral-400); --fg-on-brand: var(--c-neutral-0); /* text on brand fill */ --fg-on-inverse: var(--c-neutral-50); --fg-link: var(--c-brand-600); --fg-link-hover: var(--c-brand-700); /* Border */ --border-subtle: var(--c-neutral-200); --border-default: var(--c-neutral-300); --border-strong: var(--c-neutral-500); --border-inverse: var(--c-neutral-700); --border-focus: var(--c-brand-500); /* Action — the brand surface */ --action-primary-bg: var(--c-brand-500); --action-primary-bg-hover: var(--c-brand-600); --action-primary-bg-active: var(--c-brand-700); --action-primary-fg: var(--c-neutral-0); --action-primary-border: var(--c-brand-600); --action-secondary-bg: var(--c-neutral-0); --action-secondary-bg-hover: var(--c-neutral-100); --action-secondary-bg-active: var(--c-neutral-200); --action-secondary-fg: var(--c-neutral-900); --action-secondary-border: var(--c-neutral-300); --action-ghost-bg: transparent; --action-ghost-bg-hover: var(--c-neutral-100); --action-ghost-bg-active: var(--c-neutral-200); --action-ghost-fg: var(--c-neutral-700); --action-danger-bg: var(--c-danger-500); --action-danger-bg-hover: var(--c-danger-600); --action-danger-fg: var(--c-neutral-0); /* Status — bound to inspection outcomes. */ --status-pass-bg: var(--c-success-50); --status-pass-fg: var(--c-success-700); --status-pass-border: var(--c-success-300); --status-pass-solid: var(--c-success-500); --status-deficient-bg: var(--c-warning-50); --status-deficient-fg: var(--c-warning-700); --status-deficient-border: var(--c-warning-300); --status-deficient-solid: var(--c-warning-500); --status-critical-bg: var(--c-danger-50); --status-critical-fg: var(--c-danger-700); --status-critical-border: var(--c-danger-300); --status-critical-solid: var(--c-danger-500); --status-info-bg: var(--c-info-50); --status-info-fg: var(--c-info-700); --status-info-border: var(--c-info-300); --status-info-solid: var(--c-info-500); --status-na-bg: var(--c-neutral-100); --status-na-fg: var(--c-neutral-600); --status-na-border: var(--c-neutral-300); /* Module — bound on a [data-module] container. Default empty; set by ./modules.css when a module is active. */ --module-bg: var(--c-neutral-100); --module-fg: var(--c-neutral-700); --module-accent: var(--c-brand-500); /* Logo — Fast Check. The mark renders in ink on light surfaces and cream on dark; motion echoes inherit the mark color (never separate). Signal is reserved for UI actions, not the mark itself. */ --logo-ink: var(--c-neutral-900); /* #15130F */ --logo-cream: #F5F1EA; --logo-signal: var(--c-brand-500); /* #E5472C — special uses only */ } /* ============================================================ MODULE OVERRIDES Apply on a container with [data-module=""]. The brand stays put; only the module accent shifts. ============================================================ */ [data-module="fire-alarm"] { --module-accent: var(--c-module-fire-alarm); } [data-module="sprinkler"] { --module-accent: var(--c-module-sprinkler); } [data-module="extinguisher"] { --module-accent: var(--c-module-extinguisher); } [data-module="elevator"] { --module-accent: var(--c-module-elevator); } [data-module="boiler"] { --module-accent: var(--c-module-boiler); } [data-module="electrical"] { --module-accent: var(--c-module-electrical); } [data-module="backflow"] { --module-accent: var(--c-module-backflow); } /* ============================================================ DARK MODE — flips surface + foreground only. Brand and status hues stay; their primitives are tuned to work in both light + dark contexts. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme-scheme="light"]) { --bg-canvas: var(--c-neutral-950); --bg-surface: var(--c-neutral-900); --bg-surface-sunk: var(--c-neutral-800); --bg-surface-raised: var(--c-neutral-800); --bg-overlay: rgba(0, 0, 0, 0.7); --bg-inverse: var(--c-neutral-50); --fg-primary: var(--c-neutral-50); --fg-secondary: var(--c-neutral-300); --fg-tertiary: var(--c-neutral-400); --fg-disabled: var(--c-neutral-600); --fg-on-inverse: var(--c-neutral-900); --border-subtle: var(--c-neutral-800); --border-default: var(--c-neutral-700); --border-strong: var(--c-neutral-500); --action-secondary-bg: var(--c-neutral-800); --action-secondary-bg-hover: var(--c-neutral-700); --action-secondary-bg-active: var(--c-neutral-600); --action-secondary-fg: var(--c-neutral-50); --action-secondary-border: var(--c-neutral-700); --action-ghost-bg-hover: var(--c-neutral-800); --action-ghost-bg-active: var(--c-neutral-700); --action-ghost-fg: var(--c-neutral-200); --status-pass-bg: rgba(18, 183, 106, 0.12); --status-deficient-bg: rgba(247, 144, 9, 0.14); --status-critical-bg: rgba(240, 68, 56, 0.14); --status-info-bg: rgba(46, 144, 250, 0.14); --status-na-bg: var(--c-neutral-800); } } /* Forced light/dark via attribute (overrides system preference) */ [data-theme-scheme="dark"] { --bg-canvas: var(--c-neutral-950); --bg-surface: var(--c-neutral-900); --bg-surface-sunk: var(--c-neutral-800); --bg-surface-raised: var(--c-neutral-800); --bg-inverse: var(--c-neutral-50); --fg-primary: var(--c-neutral-50); --fg-secondary: var(--c-neutral-300); --fg-tertiary: var(--c-neutral-400); --fg-on-inverse: var(--c-neutral-900); --border-subtle: var(--c-neutral-800); --border-default: var(--c-neutral-700); --border-strong: var(--c-neutral-500); } /* ============================================================ REDUCED MOTION — collapse durations, keep visibility changes. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --motion-duration-fast: 0ms; --motion-duration-base: 0ms; --motion-duration-slow: 0ms; --motion-duration-slowest: 0ms; } } /* ============================================================ A · DARK-MODE LINK LIFT (app-side) The base sheet binds --fg-link to brand-600/700, tuned for light surfaces; on dark canvas those drop below comfortable contrast. Lift to the 300/200 ramp steps on dark. Both selectors needed: system preference OR forced via attribute. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme-scheme="light"]) { --fg-link: var(--c-brand-300); --fg-link-hover: var(--c-brand-200); } } [data-theme-scheme="dark"] { --fg-link: var(--c-brand-300); --fg-link-hover: var(--c-brand-200); } /* ============================================================ B · APP SEMANTIC DELTAS (app-side) Components never reference --c-* directly (token rule), so the app needs scheme-aware aliases the brand handoff doesn't define: --logo-fg mark + wordmark color (ink ↔ cream) --bg-brand-subtle warm brand-tinted surface (washes, active nav) --fg-brand brand-colored text that stays readable in dark ============================================================ */ :root { --logo-fg: var(--logo-ink); --bg-brand-subtle: var(--c-brand-50); --fg-brand: var(--c-brand-600); } @media (prefers-color-scheme: dark) { :root:not([data-theme-scheme="light"]) { --logo-fg: var(--logo-cream); --bg-brand-subtle: rgba(229, 71, 44, 0.14); --fg-brand: var(--c-brand-300); } } [data-theme-scheme="dark"] { --logo-fg: var(--logo-cream); --bg-brand-subtle: rgba(229, 71, 44, 0.14); --fg-brand: var(--c-brand-300); } /* ============================================================ C · COMPATIBILITY SHIM (temporary, app-side) ============================================================ Maps the legacy --color-*, --spacing-*, --font-size-* names that ~31 existing CSS modules still reference to the new semantic aliases above. Values resolve at use-time, so the dark-mode re-binds above flow through automatically. Drop this block once the modules have been swept to the new names. ============================================================ */ :root { /* Color */ --color-bg: var(--bg-canvas); --color-surface: var(--bg-surface); --color-surface-raised: var(--bg-surface-raised); --color-text-primary: var(--fg-primary); --color-text-secondary: var(--fg-secondary); --color-text-muted: var(--fg-tertiary); /* Pinned to a fixed light value (not --fg-on-inverse, which flips per-mode). Legacy --color-text-inverse meant "light text on a colored fill" (impersonation banner, primary button); the new --fg-on-inverse means "text on a bg-inverse surface" and goes dark in dark mode — using it here renders dark-on-red. */ --color-text-inverse: var(--c-neutral-0); --color-border: var(--border-subtle); --color-border-strong: var(--border-strong); --color-primary: var(--action-primary-bg); --color-primary-hover: var(--action-primary-bg-hover); --color-primary-active: var(--action-primary-bg-active); --color-on-primary: var(--action-primary-fg); /* --c-accent-* no longer exists (it was a multi-theme concept); the fallback chain lands on the brand action color — signal red. */ --color-accent: var(--c-accent-500, var(--action-primary-bg)); --color-accent-hover: var(--c-accent-700, var(--action-primary-bg-hover)); --color-accent-active: var(--c-accent-700, var(--action-primary-bg-active)); --color-on-accent: var(--action-primary-fg); --color-success: var(--status-pass-solid); --color-warning: var(--status-deficient-solid); --color-danger: var(--status-critical-solid); --color-info: var(--status-info-solid); --color-severity-critical: var(--status-critical-solid); --color-severity-major: var(--c-warning-700); --color-severity-minor: var(--status-deficient-solid); --color-severity-advisory: var(--status-info-solid); /* Legacy names referenced by modules but never previously defined — these declarations were silently invalid before the brand lock. Defined here so status badges, dividers, and hover states render. */ --color-surface-alt: var(--bg-surface-sunk); --color-primary-subtle: var(--bg-brand-subtle); --color-warning-subtle: var(--status-deficient-bg); --color-success-subtle: var(--status-pass-bg); --color-text-tertiary: var(--fg-tertiary); --color-bg-hover: var(--action-secondary-bg-hover); --radius-pill: var(--radius-full); /* Spacing — old --spacing-N (4px*N) maps to new --space-X (12-step) */ --spacing-0: var(--space-0); --spacing-1: var(--space-2); /* 4px */ --spacing-2: var(--space-3); /* 8px */ --spacing-3: var(--space-4); /* 12px */ --spacing-4: var(--space-5); /* 16px */ --spacing-6: var(--space-7); /* 24px */ --spacing-8: var(--space-8); /* 32px */ --spacing-12: var(--space-10); /* 48px */ --spacing-16: var(--space-11); /* 64px */ /* Typography */ --font-family-sans: var(--font-sans); --font-family-mono: var(--font-mono); --font-size-xs: var(--type-xs-size); --font-size-sm: var(--type-sm-size); --font-size-base: var(--type-base-size); --font-size-lg: var(--type-md-size); --font-size-xl: var(--type-lg-size); --font-size-2xl: var(--type-xl-size); --font-size-3xl: var(--type-2xl-size); --font-weight-regular: var(--weight-regular); --font-weight-medium: var(--weight-medium); --font-weight-semibold: var(--weight-semibold); --font-weight-bold: var(--weight-bold); --line-height-tight: 1.25; --line-height-normal: 1.5; /* Radius — `--radius-sm/md/lg/full` already exist on the new sheet with the same names; no aliases needed. Same for shadow-sm/md/lg and z-* layers. */ }