/* ============================================================ Crossbuck — design tokens ============================================================ Every color, size, space and radius in this app is defined here. No hardcoded hex values, no pixel values, no inline styles anywhere else. A design pass in Claude Design follows this build and depends on this layer staying clean. Two halves: 1. BRIEF §4 — copied verbatim from docs/BRIEF.md. Do not change these values; the brand ones are Benesch's and the derived ones were chosen for sun legibility. 2. Additions — tokens the brief didn't enumerate but component code needs. Added so no component has to invent a value. Marked clearly so the boundary with the spec stays visible. Light mode only, deliberately: this is read in direct August sun in New Mexico and maximum contrast wins. Dark mode is v2 at best. Measured contrast against --color-bg (#ffffff), sRGB, WCAG 2.1: --ink 13.8:1 AAA --brand-gray-dark 7.3:1 AAA --brand-red 6.0:1 AA --brand-green-deep 5.4:1 AA --brand-blue 5.3:1 AA --brand-green 3.5:1 FAILS body text — large/accent only ============================================================ */ :root { /* Enforces the light-mode decision: without this, iOS Safari applies its own dark styling to native form controls when the phone is in dark mode, and this app is nothing but native form controls. */ color-scheme: light; /* ======================================================== 1. FROM BRIEF §4 — verbatim, do not change ======================================================== */ /* --- Benesch brand, unmodified --- */ --brand-green: #4c9b44; --brand-green-light: #b7dc78; --brand-gray-dark: #545759; --brand-gray-light: #e2e3e4; --brand-blue: #147490; --brand-red: #a84234; --brand-yellow: #f8ac1a; /* --- Screen-adjusted derivatives --- */ --brand-green-deep: #3a7734; /* AA-compliant green for text and links */ --ink: #2b2d2e; /* body text, darker than brand gray for sun */ /* --- Semantic --- */ --color-text: var(--ink); --color-text-muted: var(--brand-gray-dark); --color-text-invert: #ffffff; --color-bg: #ffffff; --color-surface: #f5f6f6; --color-surface-sunk: var(--brand-gray-light); --color-border: #c9cccc; --color-border-strong: #9aa09f; --color-accent: var(--brand-green); --color-accent-text: var(--brand-green-deep); --color-danger: var(--brand-red); --color-warning: var(--brand-yellow); --color-info: var(--brand-blue); /* --- Provenance chips (the app's signature feature) --- */ --color-src-inventory: var(--brand-blue); --color-src-desk: var(--brand-gray-dark); --color-src-field: var(--brand-green); --color-discrepancy: var(--brand-red); /* --- Type --- */ --font-heading: 'Archivo Narrow', 'Proxima Nova Condensed', sans-serif; --font-body: 'Archivo', 'Proxima Nova', system-ui, sans-serif; --text-xs: 13px; --text-sm: 15px; --text-base: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --weight-regular: 400; --weight-bold: 700; /* --- Space --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* --- Shape --- */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; /* --- Touch --- */ --tap-min: 44px; /* ======================================================== 2. ADDITIONS — not in BRIEF §4 Needed so component code never has to hardcode a value. ======================================================== */ /* --- Provenance chips, text-safe companions --- --color-src-field is brand green at 3.5:1 on white. As small text, or as a fill behind white text (also 3.5:1), it FAILS WCAG AA. The chips are small by nature, so use these variants for anything text-sized. The values above are left exactly as the brief specifies them; these are additions, not corrections. */ --color-src-inventory-ink: var(--brand-blue); /* 5.3:1 */ --color-src-desk-ink: var(--brand-gray-dark); /* 7.3:1 */ --color-src-field-ink: var(--brand-green-deep); /* 5.4:1 */ --color-discrepancy-ink: var(--brand-red); /* 6.0:1 */ /* --- Status --- Sync state, save state, validation. Reuses the brand palette rather than introducing new hues. All are text-safe on --color-bg. */ --color-success: var(--brand-green-deep); --color-pending: var(--brand-gray-dark); --color-error: var(--brand-red); /* Tinted fills for banners and chips. Dark text goes on top of these, never white — they are pale by design so the text carries the contrast. */ --color-success-fill: #eaf3e8; --color-warning-fill: #fdf0d6; --color-error-fill: #f7e7e4; --color-info-fill: #e4eff2; /* --- Line height --- Unitless so they scale with font-size. */ --leading-tight: 1.2; /* headings */ --leading-base: 1.45; /* body, form labels */ --leading-loose: 1.6; /* long-form notes and help text */ /* --- Border width --- Field mode needs heavier borders than desk mode; glare flattens 1px. */ --border-width: 1px; --border-width-strong: 2px; /* --- Elevation --- Restrained on purpose. Shadows read as mud in direct sun; borders do the work of separating surfaces. These are for genuinely floating things (sync badge, sheets, the camera button). */ --shadow-sm: 0 1px 2px rgba(43, 45, 46, 0.08); --shadow: 0 2px 6px rgba(43, 45, 46, 0.12); --shadow-lg: 0 8px 24px rgba(43, 45, 46, 0.18); /* --- Focus --- Must stay visible: this is operated one-handed with gloves and sun, and the desk side is keyboard-driven. Never set outline: none without substituting this. */ --color-focus: var(--brand-blue); --focus-ring-width: 3px; --focus-ring: var(--focus-ring-width) solid var(--color-focus); --focus-ring-offset: 2px; /* --- Motion --- Sparing. Respect prefers-reduced-motion in component CSS. */ --duration-fast: 120ms; --duration: 200ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* --- Layout --- Desk gets a wide multi-column form; field gets one section at a time. */ --width-content: 1200px; /* desk form max width */ --width-prose: 640px; /* single-column reading measure */ --width-field: 560px; /* field mode max width, keeps line length sane */ --header-height: 56px; /* --- Stacking --- Named so no component invents a z-index. */ --z-base: 0; --z-sticky: 10; /* section headers, sticky form footer */ --z-header: 20; --z-overlay: 30; /* scrim behind a sheet */ --z-sheet: 40; /* photo detail, caption review */ --z-toast: 50; /* sync badge, save confirmation */ }