/* GENERATED by frontend/scripts/build-tokens.mjs from frontend/src/design/tokens/. Do not edit. */ /* ---- base.css ---- */ /* IngredientsMatter — Base design tokens (interface-independent) These properties apply regardless of which interface mode is active. Interface-specific overrides are in safe-plate.css and calm-brain.css. This file is also concatenated into public/assets/im-tokens.css (npm run build) so the PHP-rendered public and admin pages share the same tokens. */ /* Inter, self-hosted (SIL OFL). No request leaves the origin to render text and the CSP stays font-src 'self'. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Typography */ --im-font-heading: 'Inter', system-ui, sans-serif; --im-font-body: 'Inter', system-ui, sans-serif; /* Border radius */ --im-radius-card: 16px; --im-radius-btn: 12px; --im-radius-pill: 999px; --im-radius-input: 12px; /* Spacing scale */ --im-space-xs: 4px; --im-space-sm: 8px; --im-space-md: 12px; --im-space-lg: 16px; --im-space-xl: 24px; --im-space-xxl: 32px; /* Status — text colours (same across both interfaces, meet WCAG AA on white) */ --im-status-safe-text: #155d31; --im-status-check-text: #7a4800; --im-status-avoid-text: #7f1616; --im-status-unknown-text: #4b5563; /* Focus ring — shared visible outline for all interactive elements */ --im-focus-ring: 0 0 0 3px rgba(58, 110, 165, 0.45); /* Elevation */ --im-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06); --im-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.10); --im-shadow-nav: 0 2px 8px rgba(0, 0, 0, 0.12); --im-shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.15); --im-shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.25); /* Transition */ --im-transition: 150ms ease; } /* ---- safe-plate.css ---- */ /* IngredientsMatter — Safe Plate interface tokens Food-safety-first view. Green-led. Strong badges. Summary-first dashboard. Applied by default (:root) and when , so PHP-rendered pages and the SPA before hydration get the green palette without any attribute. */ :root, [data-interface="safe-plate"] { /* Brand / primary */ --im-primary: #2E7D32; --im-primary-hover: #256628; --im-primary-light: #E8F5E9; /* Accent — orange used for active nav pill, cart badge, pantry-coverage "Missing" indicators, and in-progress step markers */ --im-accent: #F6921E; --im-accent-hover: #E07F0C; --im-accent-light: #FFE8CC; /* Page surfaces */ --im-bg: #F4F8F5; --im-surface: #FFFFFF; --im-surface-soft:#EAF4EC; --im-surface-warm:#FAF7F2; --im-border-soft: #D7E6DA; /* Text */ --im-text-primary: #1F2937; --im-text-secondary: #5B6472; /* Status — badge backgrounds */ --im-status-safe-bg: #43A047; --im-status-check-bg: #E6A700; --im-status-avoid-bg: #D95C5C; --im-status-unknown-bg: #94A3B8; /* Badge style — strong-pill: visible border ring */ --im-badge-border-width: 2px; /* Focus ring — green tint */ --im-focus-ring: 0 0 0 3px rgba(46, 125, 50, 0.4); /* Navigation accent */ --im-nav-active-color: #2E7D32; --im-nav-active-border: #2E7D32; /* Header gradient base */ --im-header-from: #1B5E20; --im-header-to: #2E7D32; } /* ---- calm-brain.css ---- */ /* IngredientsMatter — Calm Brain interface tokens Neurodiverse-friendly. Blue-led. Soft badges. Grouping-and-breathing-room dashboard. Applied when */ [data-interface="calm-brain"] { /* Brand / primary */ --im-primary: #3A6EA5; --im-primary-hover: #2F5A89; --im-primary-light: #E6EEF8; /* Accent — muted amber, softer than safe-plate's orange to keep the calmer palette intact */ --im-accent: #C77B2F; --im-accent-hover: #A8651E; --im-accent-light: #F5E4D0; /* Page surfaces */ --im-bg: #F7FAFC; --im-surface: #FFFFFF; --im-surface-soft: #E6EEF8; --im-surface-warm: #F5F0EA; --im-border-soft: #D8E3F0; /* Text */ --im-text-primary: #1F2937; --im-text-secondary: #6B7280; /* Status — badge backgrounds */ --im-status-safe-bg: #4CAF50; --im-status-check-bg: #FBC02D; --im-status-avoid-bg: #E57373; --im-status-unknown-bg: #94A3B8; /* Badge style — soft-pill: no border */ --im-badge-border-width: 0px; /* Focus ring — blue tint */ --im-focus-ring: 0 0 0 3px rgba(58, 110, 165, 0.45); /* Navigation accent */ --im-nav-active-color: #3A6EA5; --im-nav-active-border: #3A6EA5; /* Header gradient base */ --im-header-from: #1E3A5F; --im-header-to: #3A6EA5; }