/* FA-01 Foundation — New-look (v2) design tokens: Dusk / Ivory / Slate palettes, spacing/type/radii scale, per BUILD_INSTRUCTIONS.md §2-4. Every rule here is scoped under [data-look="v2"] — with the switch OFF (no data-look attribute on ), none of this applies and the app looks exactly as it does today. See frontend/js/lookV2.js for the switch itself. Do not edit frontend/design-tokens.css or frontend/ds/ from this package — this file layers a Field-App-scoped mapping on top instead. */ [data-look="v2"] { /* ---- spacing (§2) ---- */ --field-space-1: 4px; --field-space-2: 8px; --field-space-3: 12px; --field-space-4: 16px; --field-space-5: 24px; --field-space-6: 32px; --field-space-7: 48px; /* ---- type scale (§3) ---- */ --field-text-welcome: 700 32px/40px var(--font); --field-text-page-title: 700 24px/32px var(--font); --field-text-section: 600 18px/24px var(--font); --field-text-card-heading: 600 16px/24px var(--font); --field-text-body: 400 16px/24px var(--font); --field-text-button: 600 16px/24px var(--font); --field-text-meta: 400 14px/20px var(--font); --field-text-label: 500 14px/20px var(--font); --field-text-nav: 600 12px/16px var(--font); --field-text-metric: 700 28px/32px var(--font); /* ---- radii + icon sizes (§3) ---- */ --field-radius-card: 14px; --field-radius-control: 10px; --field-radius-sheet: 20px; --field-radius-pill: 999px; --field-icon-main: 24px; --field-icon-inline: 20px; --field-icon-meta: 16px; /* ---- status pairs (same across all three palettes, §4) ---- Reserved for v2 job-card/status components (FA-03 onward); not wired into today's existing badges in this foundation package. */ --field-status-inprogress-fill: #8BE5AF; --field-status-inprogress-ink: #103E2C; --field-status-scheduled-fill: #B6DBFA; --field-status-scheduled-ink: #143B5C; --field-status-supplystop-fill: #DFC4F4; --field-status-supplystop-ink: #4A246B; } /* ---- palettes (§4) — default Dusk when the switch turns on without a saved palette choice ---- */ [data-look="v2"][data-palette="dusk"], [data-look="v2"]:not([data-palette]) { --field-page: #0B293C; --field-surface: #14394F; --field-raised: #204A62; --field-border: #496B80; --field-text-primary: #F1F6FA; --field-text-secondary: #BCD0DE; --field-action-fill: #F6C794; --field-action-text: #102C42; --field-active-text: #FFD2A0; } [data-look="v2"][data-palette="ivory"] { --field-page: #F2EEE7; --field-surface: #FAF7F1; --field-raised: #E6DED2; --field-border: #8D857B; --field-text-primary: #132C40; --field-text-secondary: #52616B; --field-action-fill: #F6C794; --field-action-text: #102C42; --field-active-text: #77502B; } [data-look="v2"][data-palette="slate"] { --field-page: #E5ECEF; --field-surface: #F3F6F7; --field-raised: #D8E3E9; --field-border: #82949E; --field-text-primary: #173345; --field-text-secondary: #506570; --field-action-fill: #CADCE8; --field-action-text: #102C42; --field-active-text: #244F68; } /* ---- task 4: existing screens under v2 get the palette only (page, surface, text, borders, primary button color) — reusing the SAME variable names style.css already reads, so no existing screen needs to change to pick this up. --ink3 (hints/inactive nav labels) maps to the same secondary text as --ink2: this palette does not define a third text tier. ---- */ [data-look="v2"] { --bg: var(--field-page); --surface: var(--field-surface); --surface-2: var(--field-raised); --line: var(--field-border); --ink: var(--field-text-primary); --ink2: var(--field-text-secondary); --ink3: var(--field-text-secondary); --orange: var(--field-action-fill); } /* .btn-primary hardcodes color:#fff (style.css) instead of reading a variable, so the fill-color swap above would put dark ink from §4 (--field-action-text) underneath white text. Restated here, not in style.css, to keep the v1 rule untouched for the switch-OFF case. */ [data-look="v2"] .btn-primary { color: var(--field-action-text); }