/* ========================================================================== Eco Auditors design tokens. Direction: Growth Ring. Form archetype: Soft Instrument. Nav: icon rail. Colour strategy: restrained plus one highlighter. The only file that holds raw colour values. Brand hue 215 (petrol) sits clear of every status hue (155 / 75 / 28 / 250). ========================================================================== */ :root { color-scheme: light; /* ---- Neutrals, tinted toward the brand hue ---- */ --bg: oklch(0.975 0.006 210); --surface: oklch(1 0 0); --surface-2: oklch(0.955 0.010 210); --surface-3: oklch(0.925 0.014 210); --ink: oklch(0.22 0.030 220); --ink-2: oklch(0.31 0.030 220); --muted: oklch(0.45 0.030 220); --muted-2: oklch(0.52 0.025 220); --line: oklch(0.88 0.015 215); --line-strong: oklch(0.78 0.022 215); /* ---- Brand: petrol ---- */ --primary: oklch(0.41 0.075 215); --primary-strong: oklch(0.34 0.075 215); --primary-soft: oklch(0.95 0.020 215); --primary-soft-2: oklch(0.90 0.035 215); --on-primary: oklch(1 0 0); /* ---- The mark: a forester's marking crayon. Fill behind ink, and the ring that is growing now. Never text, never a status. ---- */ --accent: oklch(0.90 0.17 118); --accent-strong: oklch(0.82 0.17 118); --accent-soft: oklch(0.96 0.07 118); --on-accent: oklch(0.22 0.030 220); /* ---- Family tie to Hikari Solutions: the four dots of the parent mark. Used in the logo pith and the endorsement line only. ---- */ --hk-magenta: oklch(0.45 0.16 340); --hk-coral: oklch(0.67 0.19 23); --hk-sun: oklch(0.86 0.16 95); --hk-olive: oklch(0.72 0.14 115); /* ---- One dark band per page, maximum ---- */ --drench: oklch(0.24 0.045 218); --drench-2: oklch(0.30 0.050 218); --on-drench: oklch(0.97 0.006 210); --on-drench-muted: oklch(0.80 0.020 210); --drench-line: oklch(0.38 0.045 218); /* ---- Status: states only, always paired with a shape ---- */ --success: oklch(0.50 0.11 155); --success-soft: oklch(0.95 0.03 155); --success-ink: oklch(0.36 0.09 155); --warning: oklch(0.58 0.12 75); --warning-soft: oklch(0.955 0.04 75); --warning-ink: oklch(0.40 0.09 70); --danger: oklch(0.52 0.17 28); --danger-soft: oklch(0.95 0.03 28); --danger-ink: oklch(0.40 0.14 28); --info: oklch(0.55 0.10 250); --info-soft: oklch(0.95 0.025 250); --info-ink: oklch(0.38 0.10 250); /* the product's own words for them */ --low: var(--success); --notlow: var(--danger); --assess: var(--info); --await: var(--warning); /* ---- Charts and rings: a ramp of the brand hue ---- */ --c-1: oklch(0.90 0.030 215); --c-2: oklch(0.78 0.050 215); --c-3: oklch(0.60 0.070 215); --c-4: oklch(0.41 0.075 215); --c-5: oklch(0.28 0.060 218); --ring-band: oklch(0.86 0.022 215); /* a laid-down ring */ --ring-day: oklch(0.76 0.030 215); /* one grain line per day */ /* ---- Typography ---- */ --font-display: "Young Serif", Georgia, "Times New Roman", serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Public page: fluid */ --fs-display: clamp(2.75rem, 1.5rem + 4.4vw, 5.5rem); --fs-h1: clamp(2.25rem, 1.5rem + 2.8vw, 4rem); --fs-h2: clamp(1.875rem, 1.35rem + 1.8vw, 3rem); --fs-h3: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-xs: 0.8125rem; /* Portal: fixed */ --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.25; --lh-body: 1.55; --lh-relaxed: 1.7; --tracking-display: -0.012em; --tracking-ui: 0; /* ---- 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(4.5rem, 3rem + 5vw, 8rem); --section-tight: clamp(3rem, 2rem + 3vw, 5rem); --gutter: clamp(1rem, 4vw, 2.5rem); --container: 1240px; --container-wide: 1440px; --container-narrow: 760px; --measure: 66ch; /* ========================================================================== FORM LAYER ========================================================================== */ /* 1. Shape. Circles carry data; rectangles carry text and controls. */ --r-ctl: 8px; --r-card: 14px; --r-lg: 22px; --r-full: 999px; /* 2. Border weight. One hairline, tinted to the hue. */ --bw: 1px; --bw-strong: 1.5px; --rule: var(--bw) solid var(--line); --rule-strong: var(--bw-strong) solid var(--line-strong); /* 3. Elevation: depth by tone. White surfaces on a toned page. A shadow only on things that float. */ --elev-card: none; --elev-pop: 0 14px 34px -14px oklch(0.22 0.03 220 / 0.28); --elev-modal: 0 32px 72px -24px oklch(0.22 0.03 220 / 0.38); --e-1: none; --e-2: var(--elev-pop); --e-3: var(--elev-pop); /* names the prototype chrome expects */ /* 4. Density: roomy. Read from a metre away. */ --h-ctl: 44px; --h-ctl-sm: 36px; --h-row: 52px; --pad-card: var(--s-5); --gap-grid: var(--s-5); --rail-w: 72px; --page-max: 1480px; /* one content width for every app page; boards override it */ /* 5. Dividers: hairline between rows, nothing between columns. */ --cell-rule: none; --row-rule: var(--rule); /* 6. Headings: the serif, regular weight, sentence case. */ --wt-head: 400; --wt-ui-head: 650; --wt-body: 400; --tracking-heading: -0.012em; --case-head: none; /* ---- Motion ---- */ --dur-1: 140ms; --dur-2: 220ms; --dur-3: 360ms; --dur-ring: 620ms; /* one ring being laid down */ --stagger-ring: 60ms; --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ /* ---- Layers ---- */ --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; } }