/* =====================================================================
Clay — variant palette of Inkwell.
Override-only: load this AFTER inkwell.css to switch the brand layer.
Default canonical palette is Indigo & Cloud (see inkwell-tokens.css).
This file redefines surface + accent + neutral tokens only; all
structural rules (1.5px borders, type scale, spacing, motion,
components) come from inkwell-components.css unchanged.
3.0: single light-dark() declarations. Derived tints (focus ring,
strong border) are inherited from the canonical color-mix() rules —
they track this file's --accent automatically. --accent-tint is
redeclared because clay's dark alpha (18%) differs from canonical's
hand-tuned 10%.
===================================================================== */
:root {
/* ---------- Surfaces ---------- */
--ivory: light-dark(#FAF9F5, #14130E);
--paper: light-dark(#FFFFFF, #1F1D17);
--slate: light-dark(#141413, #F4F2EA);
--oat: light-dark(#E3DACC, #3F3A2D);
/* ---------- Accent (Anthropic clay coral, lifted in dark) ---------- */
--accent: light-dark(#D97757, #E08B6E);
--accent-d: light-dark(#E08B6E, #C97557); /* light hover LIGHTENS (7.1:1 with slate label); darkening hover failed 4.07:1 */
--accent-tint: light-dark(
color-mix(in srgb, var(--accent) 14%, transparent),
color-mix(in srgb, var(--accent) 18%, transparent));
--accent-ink: light-dark(#A04E2C, #E08B6E); /* coral as text — 5.5:1 on ivory (raw #D97757 reads 2.96:1); dark = lifted accent */
--on-accent: light-dark(var(--slate), var(--paper)); /* dark label on coral in light — white only hits 3.12:1 */
/* ---------- Neutral scale (warm grays) ---------- */
--gray-100: light-dark(#F0EEE6, #26241D);
--gray-200: light-dark(#E6E3DA, #2E2C24);
--gray-300: light-dark(#D1CFC5, #3A3730);
--gray-400: light-dark(#8F8D82, #716D60);
--gray-500: light-dark(#6E6D62, #9C988D);
--gray-700: light-dark(#3D3D3A, #C4BFB2);
}
/* Select chevron dark-mode override: see canonical inkwell-tokens.css for rationale.
Stroke uses clay's dark --gray-500 (#9C988D) so the chevron matches the neutral scale. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .select {
background-image: url("data:image/svg+xml;utf8,");
}
}
@media screen {
:root[data-theme="dark"] .select {
background-image: url("data:image/svg+xml;utf8,");
}
}