/* ============================================================================ Cultiva ERP — Design tokens Source of truth for both surfaces (office / factory) and both themes. Themed via [data-theme="light"] and [data-theme="dark"] on . Office defaults light, factory defaults dark, but EVERY token is defined for BOTH themes so either surface renders in either theme. Families kept from the live app: --c-* (office) --fc-* (factory) ------------------------------------------------------------------------ Type: Mont (brand, self-hosted). Montserrat is the fallback only — the app ships NO external font request (plant network + CSP self-only). ============================================================================ */ /* Self-hosted Mont @font-face (files under app/static/brand/fonts/). Mont Book is 350; Montserrat has no 350 so 400 covers --weight-book on the fallback. */ @font-face { font-family:"Mont"; src:url("../brand/fonts/Mont-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; } @font-face { font-family:"Mont"; src:url("../brand/fonts/Mont-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; } @font-face { font-family:"Mont"; src:url("../brand/fonts/Mont-Book.ttf") format("truetype"); font-weight:350; font-display:swap; } @font-face { font-family:"Mont"; src:url("../brand/fonts/Mont-Light.ttf") format("truetype"); font-weight:300; font-display:swap; } :root { /* ---- Brand constants (theme-independent) ---- */ --brand-green: #00643C; /* Cultiva Green Dark — Pantone 342 CP */ --brand-green-bright: #008453; /* Cultiva Green Bright — Pantone 341 CP */ --brand-green-pressed: #004F30; --brand-green-hi: #12B978; /* lifted green for dark surfaces (AA on dark) */ /* ---- Type ---- */ --font-sans: 'Mont', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --weight-light: 300; --weight-book: 350; /* Mont Book */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px — office body (data-dense) */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --tracking-wide: 0.04em; /* eyebrows / labels */ --tracking-caps: 0.11em; /* all-caps brand labels */ /* ---- Spacing / radii / layout (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --container-max: 1360px; --tap: 44px; /* minimum touch target */ --transition-fast: 120ms ease; --transition: 180ms ease; } /* ========================================================================== LIGHT THEME (set on as :root; broadened to any [data-theme] element) ========================================================================== */ [data-theme="light"] { /* ---------- OFFICE (--c-*) ---------- */ --c-primary: #00643C; --c-primary-bright: #008453; --c-primary-pressed: #004F30; --c-on-primary: #FFFFFF; --c-bg: #F4F5F5; /* app canvas */ --c-surface: #FFFFFF; /* cards, tables */ --c-surface-2: #F4F5F5; /* section wash, hover rows, thead */ --c-surface-3: #ECEEED; /* pressed / inset */ --c-wash: #F0F6F3; /* faint green callout fill */ --c-text: #4B4C4E; /* body — darkened from gray-70 for AA */ --c-text-strong: #00643C; /* headings, titles */ --c-text-plain: #26332C; /* strong neutral heading (non-green) */ --c-muted: #6D6E71; /* secondary text (AA on white) */ --c-faint: #8A8C8F; /* placeholders, disabled label */ --c-border: #BCBEC0; /* dividers */ --c-border-subtle: #DEE0E0; --c-border-strong: #939598; --c-topbar-bg: #00643C; --c-topbar-text: #FFFFFF; --c-topbar-border: #00814F; --c-focus: #008453; --c-focus-ring: rgba(0,132,83,0.32); --c-link: #007A4C; --c-shadow-sm: 0 1px 3px rgba(0,40,24,0.10), 0 1px 2px rgba(0,40,24,0.06); --c-shadow-md: 0 4px 14px rgba(0,40,24,0.10); --c-shadow-lg: 0 14px 34px rgba(0,40,24,0.14); /* ---------- FACTORY (--fc-*) rendered in light ---------- */ --fc-bg: #EDEFEE; --fc-surface: #FFFFFF; --fc-surface-2: #F4F5F5; --fc-surface-3: #E7EAE8; --fc-text: #22302A; --fc-text-strong: #00643C; --fc-muted: #5E6B64; --fc-border: #C4C9C6; --fc-primary: #00643C; --fc-on-primary: #FFFFFF; --fc-topbar-bg: #00643C; --fc-topbar-text: #FFFFFF; --fc-focus: #008453; --fc-focus-ring: rgba(0,132,83,0.34); --fc-attention: #B4531B; --fc-shadow: 0 2px 10px rgba(0,40,24,0.10); /* ---------- STATUS (light: soft tint bg + dark fg) ---------- */ --st-neutral-bg: #E9EAEB; --st-neutral-fg: #4A4B4D; --st-confirmed-bg:#E1ECF8; --st-confirmed-fg:#175789; --st-progress-bg: #FBEFD6; --st-progress-fg: #855400; --st-qc-bg: #ECE6F6; --st-qc-fg: #5A379F; --st-fail-bg: #FBE2E0; --st-fail-fg: #A32922; --st-ready-bg: #DEECE5; --st-ready-fg: #00643C; --st-shipped-bg: #E1ECF8; --st-shipped-fg: #175789; --st-delivered-bg:#D6ECDF; --st-delivered-fg:#0A6B3F; --st-complete-bg: #CADFD2; --st-complete-fg: #004F30; /* Flash */ --flash-success-bg:#E3F1E9; --flash-success-fg:#0A5A36; --flash-success-bd:#9FC9B3; --flash-error-bg: #FBE4E2; --flash-error-fg: #97271F; --flash-error-bd: #E0A6A0; --flash-warning-bg:#FBEFD6; --flash-warning-fg:#7A4E00; --flash-warning-bd:#DEC188; --flash-info-bg: #E1ECF8; --flash-info-fg: #175789; --flash-info-bd: #AECBE8; color-scheme: light; } /* ========================================================================== DARK THEME ========================================================================== */ [data-theme="dark"] { /* ---------- OFFICE (--c-*) rendered in dark ---------- */ --c-primary: #12B978; --c-primary-bright: #1BCB86; --c-primary-pressed: #0E9A63; --c-on-primary: #062A1B; --c-bg: #0F1512; --c-surface: #18201C; --c-surface-2: #1F2925; --c-surface-3: #273331; --c-wash: #14261E; --c-text: #D6DBD8; --c-text-strong: #4FC08D; --c-text-plain: #E7ECE9; --c-muted: #9BA29E; --c-faint: #78807B; --c-border: #2E3A34; --c-border-subtle: #263029; --c-border-strong: #435049; --c-topbar-bg: #063A24; --c-topbar-text: #FFFFFF; --c-topbar-border: #0A5334; --c-focus: #1BCB86; --c-focus-ring: rgba(27,203,134,0.36); --c-link: #45C68E; --c-shadow-sm: 0 1px 3px rgba(0,0,0,0.44); --c-shadow-md: 0 6px 18px rgba(0,0,0,0.48); --c-shadow-lg: 0 16px 40px rgba(0,0,0,0.55); /* ---------- FACTORY (--fc-*) — the default plant-floor look ---------- */ --fc-bg: #0C120F; --fc-surface: #17201B; --fc-surface-2: #1F2B24; --fc-surface-3: #2A382F; --fc-text: #E9EDEA; /* high contrast for glare */ --fc-text-strong: #FFFFFF; --fc-muted: #A6ADA8; --fc-border: #314138; --fc-primary: #14C57F; /* high-vis action green */ --fc-on-primary: #05271A; --fc-topbar-bg: #063A24; --fc-topbar-text: #FFFFFF; --fc-focus: #24D98D; --fc-focus-ring: rgba(36,217,141,0.40); --fc-attention: #FF9A4D; --fc-shadow: 0 4px 16px rgba(0,0,0,0.5); /* ---------- STATUS (dark: deep tint bg + light fg) ---------- */ --st-neutral-bg: #2A322D; --st-neutral-fg: #C7CCC8; --st-confirmed-bg:#15334D; --st-confirmed-fg:#8CC4EC; --st-progress-bg: #3C2E10; --st-progress-fg: #EAB65C; --st-qc-bg: #2C2342; --st-qc-fg: #BC9FE8; --st-fail-bg: #401F1B; --st-fail-fg: #F09189; --st-ready-bg: #123527; --st-ready-fg: #5BC48F; --st-shipped-bg: #15334D; --st-shipped-fg: #8CC4EC; --st-delivered-bg:#0F3A28; --st-delivered-fg:#6BD09B; --st-complete-bg: #0C2E1F; --st-complete-fg: #52C68E; --flash-success-bg:#123527; --flash-success-fg:#8FDCB2; --flash-success-bd:#1E5C3E; --flash-error-bg: #3B1D1A; --flash-error-fg: #F0A29B; --flash-error-bd: #6B322C; --flash-warning-bg:#3A2C10; --flash-warning-fg:#EAC079; --flash-warning-bd:#6A4F1C; --flash-info-bg: #15334D; --flash-info-fg: #8CC4EC; --flash-info-bd: #2A5477; color-scheme: dark; }