/* ========================================================================= tokens.css — Desert Sage shared design-token layer (Phase 2, June 2026) ------------------------------------------------------------------------- Single source of truth for color / elevation / spacing / type. Loaded BEFORE both app stylesheets (style.css, portal.css). The color :root blocks have now been stripped from BOTH style.css and portal.css, so THIS file is authoritative: overriding the semantic surface/text tokens under [data-theme="dark"] flips every TOKENIZED surface in both apps with no per-component rules. The only thing that does NOT flip is a hardcoded hex literal in a component (style.css) or template (views/*.ejs) — that backlog is what scripts/css-theme-audit.js --hex tracks, migrated worst-first. (style.css still carries some legacy `[data-theme="dark"] .selector` hardcode overrides from before the token layer; each becomes redundant once its component reads tokens.) Reconciliation (the two old :root blocks disagreed): team-app values win for the sage scale + status ramp; the numeric gray scale is canonical and the portal's named grays (--off-white/--light-gray/...) alias into it. ========================================================================= */ :root { /* ----- Brand: sage scale (team values win) ----- */ --sage: #7C9473; /* light sage — borders, hover accents, decoration */ --sage-light: #A3B899; --sage-dark: #5A7051; /* AA on white ~5.4:1 — white text goes on this */ --sage-darker: #46583F; /* hover for sage-dark filled surfaces */ --sage-pale: #E5EBE0; --sage-50: #F0F4ED; /* Sage used as TEXT on a page/card surface. Distinct from --sage-dark, which is a FILLED background that white text sits on (.btn-primary, .task-cleaning-date, .ds-badge--today) and therefore must NOT flip in dark mode. --sage-text must flip, or sage-colored text renders at ~2.7:1 on a dark surface — which is how the mobile bottom nav's ACTIVE tab ended up dimmer than its inactive siblings. Use this for links, property names, window times, task numbers — anything sage-on-surface. */ --sage-text: var(--sage-dark); /* ----- Earth accents ----- */ --sand: #F5F0E8; --sand-dark: #E8DFD0; --terracotta: #C75B39; --terracotta-light: #E07A5A; --accent-cream: #C5B07B; /* ----- Neutral ramp (numeric is canonical) ----- */ --white: #FFFFFF; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; /* portal-name aliases → no find/replace needed for var(--medium-gray) callers */ --off-white: var(--gray-50); --light-gray: var(--gray-300); --medium-gray: var(--gray-500); --dark-gray: var(--gray-800); --black: #000000; /* ----- SEMANTIC SURFACES (new — the dark-mode keystones) ----- */ --surface: var(--white); /* default card / panel bg */ --surface-raised: #FFFFFF; /* modals, dropdowns, things above cards */ --surface-sunken: var(--gray-50); /* insets, table stripes */ --bg: var(--sand); /* app page background */ --bg-tinted: var(--sage-50); /* subtle sage-tinted alternate */ --bg-hover: var(--gray-100); /* ----- SEMANTIC TEXT (new — referenced-but-undefined in views today) ----- */ --text: var(--gray-900); --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-500); --text-faint: var(--gray-400); --text-inverse: #FFFFFF; /* legacy names some views used */ --text-color: var(--text); --bg-color: var(--bg); /* Legacy aliases (older views referenced these with a hardcoded light fallback like var(--card-bg,#fff) that NEVER flipped in dark — defining them here points every consumer at a semantic token, so they all flip at once). Found via scripts/css-theme-audit.js --vars. */ --card-bg: var(--surface); --bg-card: var(--surface); --input-bg: var(--surface); --light-bg: var(--surface-sunken); --bg-secondary: var(--surface-sunken); --border-color: var(--border); --mid-gray: var(--text-muted); --error: var(--btn-danger); --danger-color: var(--btn-danger); --success-color: var(--green); --warning-color: var(--orange); --info-bg: var(--status-info-bg); --info-border: var(--alert-info-border); --red-50: var(--status-danger-bg); --dark-sage: var(--sage-darker); --dark: var(--text); /* all uses are dark body text → flips */ /* ----- Borders ----- */ --border: var(--gray-200); --border-light: var(--gray-100); --border-strong: var(--gray-300); /* ----- Status pairs (team ramp wins) ----- */ --status-success-bg: #D1FAE5; --status-success-text: #065F46; --status-warning-bg: #FEF3C7; --status-warning-text: #92400E; --status-danger-bg: #FEE2E2; --status-danger-text: #991B1B; --status-info-bg: #DBEAFE; --status-info-text: #1E40AF; --status-muted-bg: #F0F0F0; --status-muted-text: var(--gray-600); /* gray-500 was 4.24:1 on F0F0F0 — below AA */ /* alert-component aliases (used by the .alert-* classes added in a later commit) */ --alert-success-bg: var(--status-success-bg); --alert-success-text: var(--status-success-text); --alert-warning-bg: var(--status-warning-bg); --alert-warning-text: var(--status-warning-text); --alert-danger-bg: var(--status-danger-bg); --alert-danger-text: var(--status-danger-text); --alert-info-bg: var(--status-info-bg); --alert-info-text: var(--status-info-text); --alert-success-border: #34D399; --alert-warning-border: #F59E0B; --alert-danger-border: #DC2626; --alert-info-border: #2563EB; /* ----- Core named colors + badges (kept for compat) ----- */ --red: #DC2626; --green: #16A34A; --yellow: #D97706; --blue: #2563EB; --purple: #7C3AED; --orange: #D97706; --revenue-green: #059669; --badge-active-bg: #D4EDDA; --badge-active-text: #155724; --badge-pending-bg: #FEF3CD; --badge-pending-text: #856404; --primary: #5A7051; --btn-danger: #C0392B; /* portal compat */ --danger: var(--btn-danger); --warning: #E67E22; --info: #2980B9; /* ----- Task-type badges (tokenized from the hardcoded badge rules) ----- */ --task-cleaning-bg: #DBEAFE; --task-cleaning-text: #1E40AF; --task-maintenance-bg: #FEF3C7; --task-maintenance-text: #92400E; --task-inspection-bg: #E0E7FF; --task-inspection-text: #3730A3; --task-restocking-bg: #D1FAE5; --task-restocking-text: #065F46; --task-admin-bg: #EDE9FE; --task-admin-text: #5B21B6; --task-misc-bg: #F3F4F6; --task-misc-text: #374151; /* ----- Elevation ----- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --shadow-lg: 0 10px 25px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.08); --focus-ring: 0 0 0 3px rgba(124,148,115,0.35); /* ----- Radius ----- */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-full: 999px; /* ----- Spacing scale (opt-in; replaces hardcoded paddings gradually) ----- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* ----- Type scale (opt-in) ----- */ --fs-xs: 0.7rem; --fs-sm: 0.8rem; --fs-base: 0.9rem; --fs-md: 1rem; --fs-lg: 1.1rem; --fs-xl: 1.35rem; --fs-2xl: 1.75rem; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; /* Mono "ops-terminal" face for DATA only (numbers/codes/IDs) — team app. Cascadia (Windows Terminal) / SF Mono (mac) / Consolas fallback. */ --font-mono: 'SF Mono', 'Cascadia Code', 'Cascadia Mono', Consolas, 'Roboto Mono', ui-monospace, Monaco, monospace; /* ----- Layout ----- */ --bottom-nav-height: 64px; --transition: 0.2s ease; /* ===================================================================== DESIGN-SYSTEM EXTENSION (redesign, July 2026) — additive tokens for the new "operational console" component layer (public/css/components.css). Existing tokens above are untouched + authoritative; these only ADD. ===================================================================== */ /* Motion — one easing/duration vocabulary so interactions feel consistent */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* standard */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* decelerate — enters, expands */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot — drag drop, chips */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* Elevation extension — flat resting card + a crisp hairline, plus a "lifted" shadow for dragged / floating elements (drag-and-drop). */ --shadow-hairline: 0 0 0 1px var(--border); --shadow-drag: 0 12px 28px rgba(17,24,39,0.18), 0 4px 10px rgba(17,24,39,0.10); --ring-focus: var(--focus-ring); --ring-sage: 0 0 0 2px var(--sage-dark); /* Console accents — the "bold but still DSR" layer. A confident sage→terracotta header gradient and a subtle surface gradient for the command strip. */ --grad-sage: linear-gradient(135deg, var(--sage-dark) 0%, var(--sage-darker) 100%); --grad-command: linear-gradient(135deg, var(--sage-50) 0%, var(--surface) 70%); --accent: var(--terracotta); /* single bold accent for CTAs / alerts */ --accent-text: #FFFFFF; /* Density — tighter rhythm for glance-dense ops surfaces (dashboard, board) */ --gap-tight: 0.4rem; --gap: 0.75rem; --pad-card: 1rem; --pad-tight: 0.6rem; --row-min: 44px; /* touch target floor */ /* Status dot colors (the health strip) — read on any surface */ --dot-ok: var(--green); --dot-warn: var(--orange); --dot-bad: var(--btn-danger); --dot-info: var(--blue); /* resolved via a known backup — FYI only, no action needed */ } [data-theme="dark"] { /* dark-tuned extension values */ --shadow-drag: 0 12px 28px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.45); --grad-command: linear-gradient(135deg, #16241C 0%, var(--surface) 70%); } /* ========================================================================= Dark theme — only the variables whose VALUE changes. Because surfaces and text are semantic tokens, overriding them here flips every tokenized surface with no per-component rules. This is LIVE for both apps (the duplicate color :root blocks were stripped from style.css and portal.css). A surface that stays light in dark mode is reading a hardcoded hex, not a token — fix it by pointing it at the right token (see css-theme-audit.js --hex). ========================================================================= */ [data-theme="dark"] { /* neutral ramp inverts */ --white: #1E293B; --gray-50: #0F172A; --gray-100: #1E293B; --gray-200: #334155; --gray-300: #475569; --gray-400: #64748B; --gray-500: #94A3B8; --gray-600: #CBD5E1; --gray-700: #E2E8F0; --gray-800: #F1F5F9; --gray-900: #F8FAFC; /* earth/brand tints that previously had no dark value (caused light bleed) */ --sand: #0F172A; --sand-dark: #1E293B; --sage-pale: #1E3A2E; --sage-50: #16241C; --bg-tinted: #16241C; /* Sage-as-TEXT flips to the light end of the scale (~6.9:1 on --surface). --sage-dark deliberately does NOT flip — it stays a filled background that white text sits on. See the :root note. */ --sage-text: var(--sage-light); /* semantic surfaces (pinned for contrast) */ --surface: #1E293B; --surface-raised: #243044; --surface-sunken: #0F172A; --bg: #0F172A; --bg-hover: #334155; --text: #E2E8F0; --text-primary: #E2E8F0; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-faint: #64748B; --text-inverse: #0F172A; --border: #334155; --border-light: #1E293B; --border-strong: #475569; /* status (dark-tuned) */ --status-success-bg: #064E3B; --status-success-text: #6EE7B7; --status-warning-bg: #78350F; --status-warning-text: #FCD34D; --status-danger-bg: #7F1D1D; --status-danger-text: #FCA5A5; --status-info-bg: #1E3A5F; --status-info-text: #93C5FD; --status-muted-bg: #334155; --status-muted-text: #CBD5E1; /* 94A3B8 was 4.04:1 on 334155 — below AA */ --alert-success-border: #065F46; --alert-warning-border: #92400E; --alert-danger-border: #991B1B; --alert-info-border: #1E40AF; /* task badges, dark-tuned */ --task-cleaning-bg: #1E3A5F; --task-cleaning-text: #93C5FD; --task-maintenance-bg: #78350F; --task-maintenance-text: #FCD34D; --task-inspection-bg: #312E81; --task-inspection-text: #C7D2FE; --task-restocking-bg: #064E3B; --task-restocking-text: #6EE7B7; --task-admin-bg: #4C1D95; --task-admin-text: #DDD6FE; --task-misc-bg: #334155; --task-misc-text: #CBD5E1; --revenue-green: #34D399; --purple: #A78BFA; --orange: #FBBF24; --btn-danger: #EF4444; --badge-active-bg: #064E3B; --badge-active-text: #6EE7B7; --badge-pending-bg: #78350F; --badge-pending-text: #FCD34D; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 10px 25px rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.4); --focus-ring: 0 0 0 3px rgba(163,184,153,0.4); }