/* * Infinity Hospitality Group | ihg-tokens.css | Review draft, 2026-10-01 * Deliverable 1 only. Plain CSS; no imports, dependencies, or build step. * * Usage: load this file before component/page CSS. Staff pages use :root. * Kitchen/warehouse boards opt in on the document element only: * * No staff-wide dark theme or automatic prefers-color-scheme switch is shipped. * A future staff dark theme can replace the complete semantic color block below. * Components must consume semantic tokens, never hardcode palette colors. * * --lens-accent is the sole brand override hook; every brand inherits terracotta. * Use var(--lens-accent) directly for decorative marks, stripes, and icons. * It is NOT an approved text/button color. A future brand override must be audited; * accessible action/text tokens remain terracotta unless separately approved. * * Contrast comments approve ONLY the listed opaque foreground/background pairs. * Ratios use WCAG sRGB relative luminance and are truncated to two decimals; * pass/fail checks use full precision. All approved text pairs meet >= 4.5:1, * including wall text, even where large text could use 3:1. UI boundaries and * focus colors use >= 3:1. Opacity, blending, photos, and unlisted combinations * need a new check. A token file alone does not guarantee page accessibility. * References: * https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html * https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html * * Status meanings: on-track = ready/in progress; done = complete; * attention = needs action; late = overdue/failed; neutral = no active state. * Always pair color with a visible word and, when helpful, a line icon. * HR / HubSpot / Maintenance source tags are neutral, not status colors. * No token authorizes exposing internal codes, order numbers, or build language. * Inter and JetBrains Mono use existing font loading only; no new font requests. * Mono is optional for times/counts; do not use it to surface internal codes. */ :root { /* Identity: preserve the warm charcoal, cream, and decorative terracotta. * These are stable identity references; use semantic colors for UI surfaces. */ --ihg-color-charcoal: #211E1B; --ihg-color-cream: #FAF7F2; --ihg-color-accent-decorative: #BD574E; /* Decoration only; not approved for small text on cream. */ --ihg-color-accent-accessible: #A94B43; /* Text and filled actions. #A94B43 on #FAF7F2: 5.20:1; #A94B43 on #FFFFFF: 5.56:1; #A94B43 on #EFEEEC: 4.79:1. */ --lens-accent: var(--ihg-color-accent-decorative); /* Single brand hook; all brands inherit this default. */ /* Typography: one modest scale, relative units for zoom, existing UI fonts. * Do not reset the browser/root font size. Use weight and spacing for hierarchy. * Pair body copy with line-height-body; labels/buttons with line-height-ui. */ --ihg-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ihg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --ihg-text-xs: 0.75rem; --ihg-text-sm: 0.875rem; --ihg-text-base: 1rem; --ihg-text-md: 1.125rem; --ihg-text-lg: 1.25rem; --ihg-text-xl: 1.5rem; --ihg-text-2xl: 2rem; --ihg-text-3xl: 2.5rem; --ihg-weight-regular: 400; --ihg-weight-medium: 500; --ihg-weight-semibold: 600; --ihg-weight-bold: 700; --ihg-line-height-heading: 1.2; --ihg-line-height-ui: 1.4; --ihg-line-height-body: 1.6; --ihg-tracking-body: 0; --ihg-tracking-heading: -0.015em; --ihg-tracking-label: 0.025em; /* Spacing: a 4px rhythm at the default 16px root, in rem so it follows zoom. * Cards use space-4/6; page sections use space-8/12. Avoid ad hoc gaps. */ --ihg-space-0: 0; --ihg-space-1: .25rem; --ihg-space-2: .5rem; --ihg-space-3: .75rem; --ihg-space-4: 1rem; --ihg-space-5: 1.25rem; --ihg-space-6: 1.5rem; --ihg-space-8: 2rem; --ihg-space-10: 2.5rem; --ihg-space-12: 3rem; --ihg-space-16: 4rem; --ihg-space-20: 5rem; /* Shape: the existing 8px card radius is the default everywhere. * Smaller radius for nested controls; pills only for badges/statuses. */ --ihg-radius-sm: .25rem; --ihg-radius: .5rem; --ihg-radius-lg: .75rem; --ihg-radius-pill: 999px; --ihg-border-width: 1px; --ihg-border-width-emphasis: 2px; /* Density/layout: minimum heights, never fixed heights. Let labels wrap. * Office rows may be tighter; interactive controls stay at least 44px. * Crew controls use 48px+ for one-handed work. At 200% zoom, wrap/reflow. * CSS vars cannot be used as media-query breakpoints: use 48rem (two-column * candidate) and 72rem (wide office layout) only where content allows it. */ --ihg-target-min: max(44px, 2.75rem); --ihg-target-crew: max(48px, 3rem); --ihg-row-office-min: 2.5rem; --ihg-page-max: 80rem; --ihg-content-reading-max: 65ch; --ihg-card-padding: var(--ihg-space-6); --ihg-control-padding-inline: var(--ihg-space-4); --ihg-control-padding-block: var(--ihg-space-3); --ihg-icon-size: 1.5rem; --ihg-icon-stroke: 1.75; /* Motion: short feedback, no decorative movement. Reduced-motion preferences * replace these durations below. Animate named properties, never "all". */ --ihg-motion-fast: 120ms; --ihg-motion-base: 180ms; --ihg-motion-slow: 240ms; --ihg-motion-delay: 0ms; --ihg-ease-standard: cubic-bezier(.2, 0, 0, 1); --ihg-ease-exit: cubic-bezier(.4, 0, 1, 1); /* Layering: a small shared stack keeps menus, notices, and dialogs predictable. */ --ihg-z-base: 0; --ihg-z-sticky: 10; --ihg-z-menu: 20; --ihg-z-toast: 30; --ihg-z-dialog: 40; /* SEMANTIC COLOR BLOCK: light staff pages. * Future site-wide dark mode overrides this entire block, including shadows * and status triples. Direct values avoid inherited alias-resolution traps. * Surface-muted is the hover/secondary surface; borders never carry text. */ --ihg-color-scheme: light; --ihg-color-bg: #FAF7F2; --ihg-color-surface: #FFFFFF; --ihg-color-surface-muted: #EFEEEC; --ihg-color-text: #1F1C1A; /* #1F1C1A on #FAF7F2: 15.85:1; #1F1C1A on #FFFFFF: 16.94:1; #1F1C1A on #EFEEEC: 14.61:1. */ --ihg-color-text-secondary: #565559; /* #565559 on #FAF7F2: 6.92:1; #565559 on #FFFFFF: 7.39:1; #565559 on #EFEEEC: 6.37:1. */ --ihg-color-text-muted: #62615E; /* #62615E on #FAF7F2: 5.79:1; #62615E on #FFFFFF: 6.19:1; #62615E on #EFEEEC: 5.34:1. */ --ihg-color-border: #E3DED4; /* Decorative dividers only; insufficient for control identification. */ --ihg-color-border-control: #89847C; /* Control outlines against bg/surface/surface-muted; non-text. #89847C on #FAF7F2: 3.47:1; #89847C on #FFFFFF: 3.71:1; #89847C on #EFEEEC: 3.20:1. */ --ihg-color-focus: #A94B43; /* Focus outline against bg/surface/surface-muted; non-text. #A94B43 on #FAF7F2: 5.20:1; #A94B43 on #FFFFFF: 5.56:1; #A94B43 on #EFEEEC: 4.79:1. */ --ihg-focus-width: 3px; --ihg-focus-offset: 3px; /* Leave a visible surface-colored gap around filled controls; never clip focus. */ --ihg-color-accent-subtle: #F5E7E5; /* Soft selection/accent background. */ --ihg-color-accent-text: #A94B43; /* #A94B43 on #FAF7F2: 5.20:1; #A94B43 on #FFFFFF: 5.56:1; #A94B43 on #EFEEEC: 4.79:1; #A94B43 on #F5E7E5: 4.62:1. */ --ihg-color-action-bg: #A94B43; --ihg-color-action-hover: #954239; --ihg-color-action-pressed: #80382F; --ihg-color-action-text: #FAF7F2; /* Filled-button labels in every active state. #FAF7F2 on #A94B43: 5.20:1; #FAF7F2 on #954239: 6.30:1; #FAF7F2 on #80382F: 7.78:1. */ --ihg-color-disabled-bg: #EFEEEC; --ihg-color-disabled-text: #62615E; /* Disabled state stays readable; no opacity reduction. #62615E on #EFEEEC: 5.34:1. */ --ihg-color-inverse-bg: #211E1B; /* Shared charcoal navigation/header surface. */ --ihg-color-inverse-text: #FAF7F2; /* #FAF7F2 on #211E1B: 15.51:1. */ --ihg-color-inverse-muted: #C9C1B8; /* #C9C1B8 on #211E1B: 9.32:1. */ --ihg-color-inverse-focus: #FAF7F2; /* Focus/icons on inverse-bg; non-text. #FAF7F2 on #211E1B: 15.51:1. */ /* Status triples: tint = fill, fg = words, mark = border/icon. * Preserve teal/sage/clay; amber foreground is deeper for AA readability. * Badge text uses its matching tint. Text may also use staff surfaces below. */ --ihg-status-on-track-bg: #E8EFF4; --ihg-status-on-track-fg: #2D5A7B; /* #2D5A7B on #E8EFF4: 6.32:1; #2D5A7B on #FAF7F2: 6.87:1; #2D5A7B on #FFFFFF: 7.34:1; #2D5A7B on #EFEEEC: 6.33:1. */ --ihg-status-on-track-mark: #2D5A7B; /* Status boundary/icon; non-text. #2D5A7B on #E8EFF4: 6.32:1; #2D5A7B on #FAF7F2: 6.87:1; #2D5A7B on #FFFFFF: 7.34:1; #2D5A7B on #EFEEEC: 6.33:1. */ --ihg-status-done-bg: #EAF1EC; --ihg-status-done-fg: #3E7050; /* #3E7050 on #EAF1EC: 5.02:1; #3E7050 on #FAF7F2: 5.40:1; #3E7050 on #FFFFFF: 5.77:1; #3E7050 on #EFEEEC: 4.97:1. */ --ihg-status-done-mark: #3E7050; /* Status boundary/icon; non-text. #3E7050 on #EAF1EC: 5.02:1; #3E7050 on #FAF7F2: 5.40:1; #3E7050 on #FFFFFF: 5.77:1; #3E7050 on #EFEEEC: 4.97:1. */ --ihg-status-attention-bg: #F8EEDC; --ihg-status-attention-fg: #79511D; /* #79511D on #F8EEDC: 6.06:1; #79511D on #FAF7F2: 6.53:1; #79511D on #FFFFFF: 6.98:1; #79511D on #EFEEEC: 6.02:1. */ --ihg-status-attention-mark: #B07A2E; /* Status boundary/icon; non-text. #B07A2E on #F8EEDC: 3.21:1; #B07A2E on #FAF7F2: 3.46:1; #B07A2E on #FFFFFF: 3.70:1; #B07A2E on #EFEEEC: 3.19:1. */ --ihg-status-late-bg: #F5EAE4; --ihg-status-late-fg: #8A4832; /* #8A4832 on #F5EAE4: 5.81:1; #8A4832 on #FAF7F2: 6.43:1; #8A4832 on #FFFFFF: 6.87:1; #8A4832 on #EFEEEC: 5.93:1. */ --ihg-status-late-mark: #8A4832; /* Status boundary/icon; non-text. #8A4832 on #F5EAE4: 5.81:1; #8A4832 on #FAF7F2: 6.43:1; #8A4832 on #FFFFFF: 6.87:1; #8A4832 on #EFEEEC: 5.93:1. */ --ihg-status-neutral-bg: #EFEEEC; --ihg-status-neutral-fg: #565559; /* #565559 on #EFEEEC: 6.37:1; #565559 on #FAF7F2: 6.92:1; #565559 on #FFFFFF: 7.39:1. */ --ihg-status-neutral-mark: #565559; /* Status boundary/icon; non-text. #565559 on #EFEEEC: 6.37:1; #565559 on #FAF7F2: 6.92:1; #565559 on #FFFFFF: 7.39:1. */ /* Elevation: retain the original soft card shadow. Most hierarchy comes from * space and type; reserve the stronger shadow for floating menus/dialogs. */ --ihg-shadow-card: 0 1px 3px rgba(26, 26, 26, .10), 0 4px 14px rgba(26, 26, 26, .06); --ihg-shadow-overlay: 0 4px 14px rgba(26, 26, 26, .12), 0 12px 32px rgba(26, 26, 26, .10); } /* WALL BOARDS ONLY: kitchen and warehouse departure screens. * Opt-in on , never on general staff pages or nested cards. * The complete semantic block is repeated deliberately so derived colors do * not retain light-mode values. Wall rows use text + icon + words for status. * Shadows disappear; separators and generous type carry the hierarchy. */ :root[data-ihg-theme="wall"] { --ihg-color-scheme: dark; --ihg-color-bg: #211E1B; --ihg-color-surface: #2B2723; --ihg-color-surface-muted: #35302B; --ihg-color-text: #FAF7F2; /* #FAF7F2 on #211E1B: 15.51:1; #FAF7F2 on #2B2723: 13.86:1; #FAF7F2 on #35302B: 12.21:1. */ --ihg-color-text-secondary: #E3DED4; /* #E3DED4 on #211E1B: 12.37:1; #E3DED4 on #2B2723: 11.05:1; #E3DED4 on #35302B: 9.73:1. */ --ihg-color-text-muted: #C9C1B8; /* #C9C1B8 on #211E1B: 9.32:1; #C9C1B8 on #2B2723: 8.32:1; #C9C1B8 on #35302B: 7.33:1. */ --ihg-color-border: #544C44; /* Decorative separators only. */ --ihg-color-border-control: #A79D90; /* Non-text control outlines. #A79D90 on #211E1B: 6.21:1; #A79D90 on #2B2723: 5.55:1; #A79D90 on #35302B: 4.89:1. */ --ihg-color-focus: #FAF7F2; /* Non-text focus outlines. #FAF7F2 on #211E1B: 15.51:1; #FAF7F2 on #2B2723: 13.86:1; #FAF7F2 on #35302B: 12.21:1. */ --ihg-focus-width: 3px; --ihg-focus-offset: 3px; --ihg-color-accent-subtle: #482F2A; --ihg-color-accent-text: #F0ADA5; /* Wall-only light terracotta foreground. #F0ADA5 on #211E1B: 8.86:1; #F0ADA5 on #2B2723: 7.92:1; #F0ADA5 on #35302B: 6.97:1; #F0ADA5 on #482F2A: 6.54:1. */ --ihg-color-action-bg: #A94B43; --ihg-color-action-hover: #954239; --ihg-color-action-pressed: #80382F; --ihg-color-action-text: #FAF7F2; /* #FAF7F2 on #A94B43: 5.20:1; #FAF7F2 on #954239: 6.30:1; #FAF7F2 on #80382F: 7.78:1. */ --ihg-color-disabled-bg: #35302B; --ihg-color-disabled-text: #C9C1B8; /* #C9C1B8 on #35302B: 7.33:1. */ --ihg-color-inverse-bg: #211E1B; --ihg-color-inverse-text: #FAF7F2; /* #FAF7F2 on #211E1B: 15.51:1. */ --ihg-color-inverse-muted: #C9C1B8; /* #C9C1B8 on #211E1B: 9.32:1. */ --ihg-color-inverse-focus: #FAF7F2; /* Non-text. #FAF7F2 on #211E1B: 15.51:1. */ --ihg-status-on-track-bg: #243746; --ihg-status-on-track-fg: #A6D0EB; /* #A6D0EB on #243746: 7.51:1; #A6D0EB on #211E1B: 10.14:1; #A6D0EB on #2B2723: 9.06:1; #A6D0EB on #35302B: 7.98:1. */ --ihg-status-on-track-mark: #A6D0EB; /* Non-text status boundary/icon. #A6D0EB on #243746: 7.51:1; #A6D0EB on #211E1B: 10.14:1; #A6D0EB on #2B2723: 9.06:1; #A6D0EB on #35302B: 7.98:1. */ --ihg-status-done-bg: #273B2E; --ihg-status-done-fg: #B4D9BD; /* #B4D9BD on #273B2E: 7.76:1; #B4D9BD on #211E1B: 10.74:1; #B4D9BD on #2B2723: 9.59:1; #B4D9BD on #35302B: 8.45:1. */ --ihg-status-done-mark: #B4D9BD; /* Non-text status boundary/icon. #B4D9BD on #273B2E: 7.76:1; #B4D9BD on #211E1B: 10.74:1; #B4D9BD on #2B2723: 9.59:1; #B4D9BD on #35302B: 8.45:1. */ --ihg-status-attention-bg: #463723; --ihg-status-attention-fg: #F0CE8E; /* #F0CE8E on #463723: 7.60:1; #F0CE8E on #211E1B: 10.99:1; #F0CE8E on #2B2723: 9.82:1; #F0CE8E on #35302B: 8.65:1. */ --ihg-status-attention-mark: #F0CE8E; /* Non-text status boundary/icon. #F0CE8E on #463723: 7.60:1; #F0CE8E on #211E1B: 10.99:1; #F0CE8E on #2B2723: 9.82:1; #F0CE8E on #35302B: 8.65:1. */ --ihg-status-late-bg: #482E25; --ihg-status-late-fg: #F0B19B; /* #F0B19B on #482E25: 6.77:1; #F0B19B on #211E1B: 9.05:1; #F0B19B on #2B2723: 8.09:1; #F0B19B on #35302B: 7.12:1. */ --ihg-status-late-mark: #F0B19B; /* Non-text status boundary/icon. #F0B19B on #482E25: 6.77:1; #F0B19B on #211E1B: 9.05:1; #F0B19B on #2B2723: 8.09:1; #F0B19B on #35302B: 7.12:1. */ --ihg-status-neutral-bg: #35302B; --ihg-status-neutral-fg: #D6D0C8; /* #D6D0C8 on #35302B: 8.52:1; #D6D0C8 on #211E1B: 10.83:1; #D6D0C8 on #2B2723: 9.67:1. */ --ihg-status-neutral-mark: #D6D0C8; /* Non-text status boundary/icon. #D6D0C8 on #35302B: 8.52:1; #D6D0C8 on #211E1B: 10.83:1; #D6D0C8 on #2B2723: 9.67:1. */ --ihg-shadow-card: none; --ihg-shadow-overlay: none; /* Wall scale: read from 10–15 feet; use as minimums and verify on the actual * TV. Prioritize runs/statuses and reduce columns before shrinking this type. * Rem values respect zoom; no viewport-only type or fixed row heights. */ --ihg-wall-text-label: 1.5rem; --ihg-wall-text-body: 2rem; --ihg-wall-text-time: 3rem; --ihg-wall-text-heading: 3.5rem; --ihg-wall-line-height: 1.3; --ihg-wall-row-min: 6rem; --ihg-wall-row-padding: var(--ihg-space-6); --ihg-wall-gap: var(--ihg-space-8); } /* Honor reduced motion for both staff pages and wall boards. Components must * consume these durations/delay and skip auto-motion and smooth scrolling. */ @media (prefers-reduced-motion: reduce) { :root { --ihg-motion-fast: 0ms; --ihg-motion-base: 0ms; --ihg-motion-slow: 0ms; --ihg-motion-delay: 0ms; } } /* * LEGACY / ALIAS MAPPING TABLE * Replace legacy references with the canonical names below. Retired aliases * are intentionally NOT re-declared: this is one token set, not two APIs. * Context-dependent rows require choosing the semantic token for that use. * Existing pages must migrate references; this file is not a drop-in shim. * * Legacy token | Canonical replacement | Intent * -------------------------|-----------------------------------------------|------------------------------- * --cream | --ihg-color-bg | Page background; unified cream * --text | --ihg-color-text | Main text * --dim | --ihg-color-text-muted | Readable supporting text * --border | --ihg-color-border | Decorative divider * --ihg-navy | --ihg-color-inverse-bg | Charcoal headers/navigation * --ihg-terracotta | --ihg-color-accent-decorative | Decoration; text uses accent-text * --ihg-black | --ihg-color-text / --ihg-color-inverse-bg | Text / dark surface by use * --ihg-ink | --ihg-color-text | Main text * --ihg-charcoal | --ihg-color-inverse-bg | Charcoal surface * --ihg-charcoal-soft | --ihg-color-surface (wall scope) | Raised wall surface * --ihg-cream | --ihg-color-bg / --ihg-color-inverse-text | Page / inverse text by use * --ihg-surface | --ihg-color-surface | Card/input surface * --ihg-muted | --ihg-color-text-muted | Supporting text, strengthened * --ihg-graphite | --ihg-color-text-secondary | Secondary text * --ihg-graphite-tint | --ihg-color-surface-muted | Quiet/hover surface * --ihg-line | --ihg-color-border | Decorative divider * --ihg-line-dark | --ihg-color-border (wall scope) | Decorative wall divider * --ihg-accent | --ihg-color-accent-decorative | #BD574E decoration, unchanged * --ihg-accent | --ihg-color-accent-text / --ihg-color-action-bg | Accessible text / filled action * --ihg-accent-soft | --ihg-color-accent-subtle | Accent fill/selection * --lens-accent | --lens-accent | Retained sole decorative brand hook * --ihg-teal | --ihg-status-on-track-mark | On track / ready / in progress * --ihg-teal-dark | --ihg-status-on-track-fg | Matching readable status text * --ihg-teal-tint | --ihg-status-on-track-bg | Matching status fill * --ihg-sage | --ihg-status-done-mark | Done / complete * --ihg-sage-dark | --ihg-status-done-fg | Matching readable status text * --ihg-sage-tint | --ihg-status-done-bg | Matching status fill * --ihg-clay | --ihg-status-late-mark | Late / overdue / failed * --ihg-clay-dark | --ihg-status-late-fg | Matching readable status text * --ihg-clay-tint | --ihg-status-late-bg | Matching status fill * --ihg-amber | --ihg-status-attention-mark | Needs attention; not small text * --ihg-amber-dark | --ihg-status-attention-fg | Readable deeper amber text * --ihg-amber-tint | --ihg-status-attention-bg | Matching status fill * * The brief supplies status family names with -dark/-tint variants but does * not supply their previous variant values; the replacements above are audited * new values, not claims about unspecified legacy values. No unrelated aliases * are invented. If a legacy border identifies a field/control, migrate it to * --ihg-color-border-control, not --ihg-color-border. * * Existing radius 8px -> --ihg-radius (0.5rem at the default root size) * Existing two-part shadow -> --ihg-shadow-card * Inter UI -> --ihg-font-ui * JetBrains Mono numbers -> --ihg-font-mono (times/counts only) * * IMPLEMENTATION CONTRACT FOR THE LATER COMPONENT PASS * - Set color-scheme: var(--ihg-color-scheme) on the themed document. * - Use min-height: var(--ihg-target-min) for every interactive target; * crew controls use --ihg-target-crew. Padding cannot guarantee target size. * - Use :focus-visible outlines with --ihg-color-focus, --ihg-focus-width and * --ihg-focus-offset. On inverse-bg, use --ihg-color-inverse-focus. * - Do not place accent-decorative icons on dark backgrounds as meaningful * controls: use inverse-text or audited wall accent-text instead. * - If wall boards include filled action buttons, add border-control around * them: the dark terracotta fill alone is not an approved boundary against * charcoal surfaces. Keep the focus ring outside with its surface-colored gap. * - Status fill boundaries are subtle; add the matching mark when the boundary * conveys meaning. Always retain visible status words, even on wall boards. * - Keep labels/placeholders opaque and readable. Do not remove focus outlines, * fix content heights, disable zoom, or convey errors with color alone. * - Reflow at 200% zoom; stack cards and wrap long labels. No page layouts or * component classes are shipped in this token-only deliverable. */