/** * Indranil.in - canonical design tokens. * * SINGLE SOURCE OF TRUTH for colour, elevation, radius, and easing. * * Before this file existed the same palette was maintained twice: once inside * homepage-design-concept-v2.html (bare names: --ink, --canvas) and once at the * top of indranil-work.css (prefixed names: --ind-ink, --ind-canvas). The two * sets had already drifted apart. Every consumer now reads from here. * * Canonical names are --ind-*. The bare names used by the approved homepage are * kept as aliases at the bottom of this file so that no existing rule had to be * rewritten. Custom properties resolve at computed-value time on , so the * aliases follow the light/dark switch automatically - they are declared once. * * To change a colour anywhere on the site, change it HERE and nowhere else. * * Values follow brand.md section 5. Warm light is the default; dark mode is * warm charcoal, never pure black. */ :root { /* Canvas and surfaces */ --ind-canvas: #f9f6f3; --ind-surface: #fffdfb; --ind-surface-raised: #ffffff; --ind-surface-quiet: #f1ede8; /* Ink and rules */ --ind-ink: #323232; --ind-ink-soft: #6f6a65; --ind-line: #e2ddd7; /* Signal and accent */ --ind-yellow: #ffe001; --ind-yellow-soft: #fff5a6; --ind-copper: #974e2d; /* Dark plates (used on cream pages for proof frames and the Lab portal) */ --ind-charcoal: #323232; --ind-on-dark: #f9f6f3; /* State */ --ind-success: #27613d; --ind-error: #a6362b; /* Elevation, shape, motion */ --ind-shadow: 0 12px 32px rgba(50, 50, 50, 0.07); --ind-shadow-small: 0 6px 18px rgba(50, 50, 50, 0.06); --ind-radius: 8px; --ind-ease: cubic-bezier(.2, .8, .2, 1); /* * --------------------------------------------------------------- * UNRESOLVED DIVERGENCES - carried forward deliberately. * * These pairs describe the same design role but hold different * values in the two original files. They are preserved exactly as * they render today so that consolidating the token layer changed * nothing visually. Converging them is a design decision for Neel, * not a refactor, so it is left open and made visible here. * * Once a decision is made, delete the losing line and repoint its * alias. That is a one-line change now; before this file it was a * hunt across two files ~50KB apart. * --------------------------------------------------------------- */ /* Deepest charcoal. Homepage and Work chose different values. */ --ind-charcoal-deep: #232321; /* Work family (indranil-work.css) */ --ind-charcoal-2: #262626; /* Approved homepage */ /* Secondary text on dark plates. Differs by ~3/255 - not visible, but real. */ --ind-on-dark-soft: #cbc5be; /* Work family */ --ind-on-dark-soft-home: #c7c1bb; /* Approved homepage */ } html[data-theme="dark"] { --ind-canvas: #212121; --ind-surface: #292929; --ind-surface-raised: #343434; --ind-surface-quiet: #2e2e2e; --ind-ink: #f9f6f3; --ind-ink-soft: #b8b1aa; --ind-line: #414141; --ind-yellow-soft: #554d0f; --ind-copper: #d77b53; --ind-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); --ind-shadow-small: 0 6px 18px rgba(0, 0, 0, 0.18); } /** * Compatibility aliases for the approved homepage dialect. * * Declared once on :root. Because --ind-* is redefined on the same element * () under [data-theme="dark"], these aliases resolve to the correct * value in both themes without being restated. * * Do not add new rules that use these bare names. New work uses --ind-*. */ :root { --canvas: var(--ind-canvas); --surface: var(--ind-surface); --surface-raised: var(--ind-surface-raised); --surface-quiet: var(--ind-surface-quiet); --ink: var(--ind-ink); --ink-soft: var(--ind-ink-soft); --line: var(--ind-line); --yellow: var(--ind-yellow); --yellow-soft: var(--ind-yellow-soft); --copper: var(--ind-copper); --charcoal: var(--ind-charcoal); --charcoal-2: var(--ind-charcoal-2); --on-dark: var(--ind-on-dark); --on-dark-soft: var(--ind-on-dark-soft-home); --success: var(--ind-success); --error: var(--ind-error); --shadow: var(--ind-shadow); --shadow-small: var(--ind-shadow-small); --radius: var(--ind-radius); --ease: var(--ind-ease); }