/* variables.css — design tokens HACCP. * * THEMING MODEL (no hardcoded colors anywhere else in the app): * 1. A THEME is just two identity colors — --brand-base + --accent-base. * Presets set them via :root[data-palette="…"]; the custom picker sets * them inline on . * 2. Every shade/tint (-dark, -light) DERIVES from those via color-mix() over * the mode-aware --surface / black, so themes work in BOTH light and dark * with no per-theme tint tables. * 3. Semantic colors (ok/error/warn/info) are FIXED (green=ok, red=danger…) * so meaning never depends on the chosen palette. * 4. NEUTRALS + a few UI colors (--on-color/--overlay/--shimmer/--tint-weak) * are the only things that change between light and dark (see the dark * block in components.css). */ :root { /* ---- Palette identity (the ONLY themed colors; default = Red/Orange) ---- */ --brand-base: #D62828; /* primary: buttons, links, active chips */ --accent-base: #F77F00; /* highlight: indicators, progress, hover/selection */ /* Mode-adjusted brand/accent: light uses the base as-is; the dark block lightens them for vibrancy on a dark background. Everything reads these. */ --brand: var(--brand-base); --accent: var(--accent-base); /* Derived shades/tints — mode-aware because --surface changes per theme. */ --brand-dark: color-mix(in srgb, var(--brand), #000 30%); --brand-light: color-mix(in srgb, var(--brand) 14%, var(--surface)); --accent-dark: color-mix(in srgb, var(--accent), #000 28%); --accent-light: color-mix(in srgb, var(--accent) 16%, var(--surface)); /* ---- Fixed semantic colors (not themed) ---- */ --ok: #2E9E5B; --error: #8E1616; /* non-conformity / critical — distinct from brand */ --warn: #E8A317; --info: #5B6B7A; --ok-light: color-mix(in srgb, var(--ok) 16%, var(--surface)); --error-light: color-mix(in srgb, var(--error) 12%, var(--surface)); --warn-light: color-mix(in srgb, var(--warn) 18%, var(--surface)); --info-light: color-mix(in srgb, var(--info) 16%, var(--surface)); /* Neutrals (light mode) */ --text: #1A2530; --text-muted: #5B6B7A; --bg: #FFFFFF; --surface: #F4F6F8; --surface-2: #E8ECEF; --border: #D5DCE2; /* UI colors that flip with the mode */ --on-color: #FFFFFF; /* text/icons on brand/accent/semantic fills */ --overlay: rgba(26, 37, 48, 0.45); /* dialog / sheet scrim */ --shimmer: rgba(127, 127, 127, 0.12);/* skeleton loading sweep */ --tint-weak: rgba(0, 0, 0, 0.08); /* subtle chip/count background */ --shadow-color: rgba(26, 37, 48, 0.10); /* tint for ad-hoc box-shadows */ --toast-error-bg: #3A1B1C; /* dark error-toast surface */ /* Spacing scale (4 / 8px) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* Radii */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-full: 999px; /* Touch targets — compacted app-wide (dense scale, in tune with Structura) */ --touch-min: 40px; --touch-primary: 46px; --touch-lg: 52px; /* Typography */ /* Honest system stack — Inter was declared before but never bundled (zero-CDN), so the app ran on whatever system font existed. Use the system UI font explicitly for a consistent, native look without extra downloads. */ --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Type scale — compacted app-wide (dense, in tune with the Structura page) */ --fs-xs: 11px; /* dense contexts only (e.g. calendar object chips) */ --fs-base: 13px; --fs-sm: 12px; --fs-lg: 15px; --fs-xl: 18px; --fs-value: 34px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(26,37,48,0.08); --shadow: 0 2px 8px rgba(26,37,48,0.10); --shadow-lg: 0 8px 28px rgba(26,37,48,0.18); /* Layout */ --header-h: 64px; --tabbar-h: 64px; /* Sticky "De făcut" progress strip — fixed height so the feed's sticky zone headers can stack exactly beneath it (top offset = header-h + this). */ --progress-strip-h: 48px; --maxw: 1280px; /* Z layers */ --z-header: 100; --z-tabbar: 100; --z-sheet: 300; --z-toast: 400; /* Breakpoints (reference): sm 600 / md 1024 / lg 1280 */ } /* Accessible text shades of the semantic colors, for use as TEXT on their light backgrounds (badges/labels). The vivid base colors above stay for fills/borders/icons; these darker variants clear WCAG AA (>=4.5:1) as text. */ :root { --ok-text: #157A43; --error-text: #8E1616; /* crimson, matches --error; distinct from brand red */ --warn-text: #8A5A00; --info-text: #3E4C59; /* pending badge text — darker than --info for AA */ --await-text: #1E40AF; /* "așteptare dovadă" badge text — AA on --await-light */ } /* Compact density (opt-in via Settings → data-density="compact" on ). Re-densifies the whole app by shrinking the touch + type tokens every component reads — no per-component overrides needed. The comfortable default (the :root values above) meets the >=40px / >=12px accessibility floor; compact is a deliberate power-user trade-off. */ html[data-density="compact"] { --touch-min: 34px; --touch-primary: 40px; --touch-lg: 46px; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-lg: 14px; --fs-xl: 16px; --fs-value: 30px; } /* Status semantic mapping (fixed; not themed). */ :root { --await: #2563EB; /* "așteptare dovadă" — distinct from done(green) */ --await-light: color-mix(in srgb, var(--await) 16%, var(--surface)); --skipped: #9CA3AF; /* optional task marked "nu se aplică" */ --st-pending: var(--info); --st-done: var(--ok); --st-alert: var(--error); --st-missed: var(--warn); --st-await: var(--await); --st-skipped: var(--skipped); } /* ---- Color presets (Settings → Culori) --------------------------------- * * A preset only re-skins the two identity colors; every shade/tint derives, * so each preset works in BOTH light and dark. The custom picker instead sets * --brand-base / --accent-base inline on . Red/Orange = the :root default * (no data-palette attribute). */ :root[data-palette="teal"] { --brand-base: #0B7373; --accent-base: #F2994A; } :root[data-palette="blue"] { --brand-base: #2563EB; --accent-base: #F59E0B; } :root[data-palette="purple"] { --brand-base: #7C3AED; --accent-base: #F59E0B; } :root[data-palette="forest"] { --brand-base: #2E7D46; --accent-base: #E8A317; }