/* ========================================================================== Eldyne — design tokens Hybrid system: "Night Line" for story pages, "Signal White" for product and company pages. Themes switch on [data-theme] at or section level. ========================================================================== */ :root { /* Brand palette — exactly as supplied in the Krishi-EL deck. --brand (6F1512) is the primary and the one used most. Do not theme these. */ --brand: #6F1512; /* primary */ --brand-blush: #FFC8C6; --brand-pink: #D46186; --brand-rose: #B13855; --brand-mauve: #975966; --brand-grey-1:#C2C2C2; --brand-grey-2:#999999; --brand-slate: #445369; --brand-grey-3:#4D4D4D; /* Compatibility aliases so existing rules keep working. */ --rose: var(--brand-rose); --mauve: var(--brand-mauve); --maroon: var(--brand); --grey-body: #4A4A4A; --grey-bg: #ECECEC; --grey-close: #3D3D3D; /* Type */ /* Platform system font first (SF Pro on Apple, Segoe on Windows, Roboto on Android): it ships optical sizing and tracking tables. Inter Tight is the self-hostable fallback. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Inter Tight", "Helvetica Neue", Arial, sans-serif; /* Fluid scale. Every step clamps, so nothing is frozen at a desktop size on a 360px phone. Minimums are the readable floor, maximums the former fixed values. */ --t--1: 0.8125rem; /* 13 — captions, legal */ --t-0: 1rem; /* 16 — body */ --t-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18 → 20 */ --t-2: clamp(1.25rem, 1.10rem + 0.70vw, 1.5625rem);/* 20 → 25 */ --t-3: clamp(1.4rem, 1.15rem + 1.10vw, 1.953rem); /* 22 → 31 */ --t-4: clamp(1.65rem, 1.25rem + 1.75vw, 2.441rem); /* 26 → 39 */ --t-5: clamp(2rem, 1.45rem + 2.40vw, 3.052rem); /* 32 → 49 */ --t-6: clamp(2.25rem, 1.55rem + 3.10vw, 3.815rem); /* 36 → 61 */ --t-7: clamp(2.6rem, 1.65rem + 4.20vw, 4.768rem); /* 42 → 76 */ --display: clamp(2.35rem, 1rem + 6vw, 6.5rem); --display-sm: clamp(1.9rem, 1rem + 4vw, 4.2rem); --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.55; /* Tracking varies with size — letters look too loose at display sizes and too tight at caption sizes. Never one fixed value across the scale. */ --track-display: -0.028em; --track-head: -0.018em; --track-body: 0em; --track-caps: 0.08em; --measure: 34rem; /* ~70 chars at body size */ /* Space (8-based) */ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4.5rem; --s-7: 7rem; /* Layout */ --max: 1320px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --nav-h: 64px; --rail-w: 56px; /* Radii */ --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 22px; --r-pill: 999px; /* Elevation. Context-aware: the heavier steps are for surfaces that float over busy content, the lighter ones for cards on a plain background. */ --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); --shadow-2: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06); --shadow-3: 0 12px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08); --shadow-lamp: 0 0 12px rgba(196,100,122,.55); /* Motion */ /* Critically damped feel: no overshoot, quick response (Apple skill §4) */ --ease: cubic-bezier(.2,.7,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: linear( 0, .2178 2.1%, .8836 6.6%, 1.0323 8.6%, 1.0762 10.6%, 1.0708 12.9%, 1.0125 17.6%, .9964 19.9%, .9925 22.6%, 1.0007 31.2%, 1 ); /* gentle settle, no visible bounce */ --dur: 480ms; --dur-slow: 900ms; --response: 340ms; --press: 110ms; /* pointer-down feedback — must feel immediate */ /* Default surface. Duplicated into the themes below, but declared here so a partial rendered on its own (no [data-theme] on an ancestor) is still legible. */ --bg: #F5F5F5; --bg-2: #FFFFFF; --ink: #3D3D3D; --ink-2: #4A4A4A; --ink-3: #6B6B6B; --line: rgba(61,61,61,.14); --accent: var(--rose); --nav-bg: rgba(245,245,245,.80); --scrim: 18, 18, 20; /* r,g,b for image scrims — see --bg pairing below */ --hatch: rgba(61,61,61,.055); --empty-tint: rgba(61,61,61,.04); } /* Night Line ----------------------------------------------------------- */ [data-theme="dark"] { --bg: #2A2A2A; /* one step below the deck's #3D3D3D closing grey */ --bg-2: var(--grey-close); --ink: #F4F2F2; --ink-2: rgba(244,242,242,.74); /* --ink-3 was rgba(...,.40) ≈ 3.2:1 on --bg. It carries real content (captions, .small, form hints, footer legal), so it has to clear 4.5:1. */ --ink-3: rgba(244,242,242,.68); --line: rgba(244,242,242,.14); --accent: var(--rose); --nav-bg: rgba(42,42,42,.74); --scrim: 20, 20, 20; /* matches --bg, so scrims fade to the page */ --hatch: rgba(244,242,242,.05); /* empty-media-slot texture */ --empty-tint: rgba(244,242,242,.04); color-scheme: dark; } /* Signal White --------------------------------------------------------- */ [data-theme="light"] { --bg: #F5F5F5; /* lifted from the deck's #ECECEC for screen */ --bg-2: #FFFFFF; --ink: var(--grey-close); --ink-2: var(--grey-body); /* #8A8A8A was ≈3.0:1 on the card backgrounds. #6B6B6B clears 4.5:1 on both #FFFFFF and #ECECEC. */ --ink-3: #6B6B6B; --line: rgba(61,61,61,.14); --accent: var(--rose); --nav-bg: rgba(245,245,245,.80); --scrim: 30, 28, 28; --hatch: rgba(61,61,61,.055); --empty-tint: rgba(61,61,61,.04); color-scheme: light; }