/* ========================================================================== SARVA FOAM ERP — design tokens Client: Sarva Foam Industries Ltd, Bhopal — PU trim recycler / rebonded foam. Form archetype: LEDGER. Nav archetype: RAIL + PANEL + DRAWER. Colour strategy: RESTRAINED (tinted neutrals + petrol accent under 10%). Brand hue H = 196 (petrol). Sarva red is IDENTITY REGISTER ONLY — inside the product, red means rejected / overdue / failed and nothing else. Rationale: docs/DESIGN.md. Nothing in components.css hardcodes a value here. ========================================================================== */ :root { color-scheme: light; /* ---- Neutrals — tinted toward the brand's OWN hue (196), never pure grey, and deliberately not the cream/sand band. ---- */ --bg: oklch(0.930 0.008 196); /* toned ground: hierarchy by tone */ --surface: oklch(0.988 0.003 196); /* panels sit above the ground */ --surface-2: oklch(0.962 0.006 196); /* table head, inset, striping */ --surface-3: oklch(0.905 0.010 196); /* deeper inset, disabled fill */ --ink: oklch(0.235 0.022 196); --ink-2: oklch(0.340 0.020 196); --muted: oklch(0.455 0.018 196); /* the floor for ALL text incl. placeholders */ --muted-2: oklch(0.545 0.016 196); /* non-text only: icons, rules, glyphs */ --line: oklch(0.862 0.010 196); --line-strong: oklch(0.768 0.014 196); /* ---- Brand ---- */ --primary: oklch(0.420 0.072 196); --primary-strong: oklch(0.330 0.062 196); --primary-soft: oklch(0.945 0.022 196); --primary-soft-2: oklch(0.885 0.040 196); --on-primary: oklch(0.988 0.003 196); /* Accent is a LIGHTNESS step of the same hue family, not a second colour: selection, active rail item, focus ring. Restrained strategy holds. */ --accent: oklch(0.660 0.105 200); --accent-strong: oklch(0.486 0.102 200); --accent-soft: oklch(0.945 0.030 200); --on-accent: oklch(0.210 0.030 200); /* Sarva red — IDENTITY REGISTER ONLY (mark, landing, print masthead). Never used for an action, a chart series, or emphasis inside the product. */ --brand-red: oklch(0.548 0.205 27); --brand-red-ink: oklch(0.425 0.170 27); /* One dark band per page, maximum. */ --drench: oklch(0.235 0.038 200); --drench-2: oklch(0.295 0.042 200); --on-drench: oklch(0.965 0.006 196); --on-drench-muted: oklch(0.760 0.020 196); --drench-line: oklch(0.365 0.035 200); /* ---- Semantic — STATES ONLY. Always paired with an icon and a word. ---- */ --success: oklch(0.580 0.125 152); --success-soft: oklch(0.945 0.038 152); --success-ink: oklch(0.395 0.095 152); --warning: oklch(0.735 0.145 72); --warning-soft: oklch(0.955 0.052 78); --warning-ink: oklch(0.440 0.105 68); --danger: oklch(0.530 0.190 25); --danger-soft: oklch(0.945 0.042 25); --danger-ink: oklch(0.425 0.165 25); --info: oklch(0.500 0.115 275); --info-soft: oklch(0.945 0.030 275); --info-ink: oklch(0.400 0.100 275); /* ---- Density grade ramp — D80..D150 kg/m3. SEQUENTIAL, because density is an ordered scale. Categorical colours on an ordered axis is a data-viz error. Used on every list screen. ---- */ --d-80: oklch(0.905 0.036 196); --d-100: oklch(0.822 0.056 197); --d-110: oklch(0.728 0.076 198); --d-120: oklch(0.622 0.090 200); --d-130: oklch(0.512 0.088 202); --d-150: oklch(0.392 0.075 204); /* Ink flips at D130: D80-D120 take --d-ink-lo, D130-D150 take --d-ink-hi. Verified, not eyeballed -- d-ink-hi on d-120 is only 3.24:1. */ --d-ink-lo: oklch(0.235 0.030 200); --d-ink-hi: oklch(0.975 0.006 200); /* ---- Charts: a brand-hue ramp, never the semantic colours ---- */ --c-1: oklch(0.845 0.052 196); --c-2: oklch(0.700 0.084 198); --c-3: oklch(0.560 0.098 200); --c-4: oklch(0.420 0.086 202); --c-5: oklch(0.315 0.066 204); --c-6: oklch(0.660 0.105 175); /* ---- Typography — two families, both local ---- */ --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif; /* No third family: batch codes use the body face with tabular figures. Atkinson already disambiguates I/l/1 and 0/O, which is the whole reason it was chosen; a mono file would buy nothing. */ --font-mono: var(--font-body); /* Brand register — fluid */ --fs-display: clamp(2.75rem, 1.7rem + 3.6vw, 5rem); --fs-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3.625rem); --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); --fs-h3: clamp(1.3125rem, 1.1rem + 0.75vw, 1.75rem); --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-xs: 0.8125rem; /* Product register — fixed rem, ratio 1.125 */ --t-28: 1.75rem; --t-22: 1.375rem; --t-18: 1.125rem; --t-16: 1rem; --t-15: 0.9375rem; --t-14: 0.875rem; --t-13: 0.8125rem; --t-12: 0.75rem; --t-11: 0.6875rem; --lh-tight: 1.06; --lh-snug: 1.22; --lh-body: 1.6; --lh-relaxed: 1.7; --tracking-display: -0.025em; --tracking-heading: -0.012em; --tracking-ui: 0; --tracking-label: 0.06em; /* the uppercase document-label tracking */ /* ---- Spacing: 4px base ---- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 5rem; --s-10: 6rem; --s-12: 8rem; --section: clamp(4rem, 2.75rem + 4.5vw, 7rem); --section-tight: clamp(2.5rem, 1.75rem + 2.75vw, 4.5rem); --gutter: clamp(1rem, 3.5vw, 2.25rem); --container: 1240px; --container-wide: 1560px; --container-narrow: 720px; --measure: 68ch; /* ========================================================================== FORM LAYER — LEDGER. See docs/DESIGN.md §6 for why each value. ========================================================================== */ /* 1. Shape — three radii, locked. Status chips are SQUARE TAGS, not pills: they replace rubber stamps on a paper batch record. */ --r-ctl: 2px; --r-card: 3px; --r-lg: 5px; --r-full: 999px; /* --r-full: avatars only */ /* 2. Border weight — 1px hairline. Anything heavier reads as crude and makes a dense screen unusable. 1.5px only under a panel header / table head. */ --bw: 1px; --bw-strong: 1.5px; --rule: var(--bw) solid var(--line); --rule-strong: var(--bw-strong) solid var(--line-strong); /* 3. Elevation — HAIRLINE ONLY. Panels are bounded records, never floating cards. Shadow is reserved for things that genuinely overlay. */ --elev-card: none; --elev-pop: 0 2px 6px oklch(0.235 0.022 196 / 0.14); --elev-modal: 0 6px 20px oklch(0.235 0.022 196 / 0.20); --e-1: 0 1px 1px oklch(0.235 0.022 196 / 0.05); --e-2: 0 2px 6px oklch(0.235 0.022 196 / 0.10); --e-3: 0 4px 12px oklch(0.235 0.022 196 / 0.14); /* 4. Density — dense but survivable across an 8-hour shift. Shop-floor surfaces opt into .t-lg (44px) for gloved hands. */ --h-ctl: 36px; --h-ctl-sm: 28px; --h-ctl-lg: 44px; --h-row: 34px; --pad-card: var(--s-4); --gap-grid: var(--s-4); /* 5. Divider strategy — ruled grid INSIDE tables; whitespace between panels. */ --cell-rule: var(--rule); --row-rule: var(--rule); /* 6. Heading treatment — uppercase is confined to panel headers, and field labels: the convention of the BMR / GRN / packing list this ERP replaces. Page h1/h2 and marketing headings stay sentence case. */ --wt-head: 600; --wt-body: 400; --case-head: uppercase; /* ---- Layout metrics — the rail + panel + drawer shell ---- */ --rail-w: 60px; --panel-w: 228px; --wshead-h: 44px; --drawer-w: 420px; /* ---- Motion ---- */ --dur-1: 120ms; --dur-2: 190ms; --dur-3: 300ms; --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---- Prototype chrome ---- */ --pocbar-h: 44px; --z-sticky: 20; --z-layer: 60; --z-toast: 80; --z-pocbar: 90; --z-tour: 100; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }