/* Chaio Research is Dawn. Token changes for chaio-design, against @chaio/design 1.8.0.
   Each block says which file it goes into. Loaded after styles.css, this file also works as-is,
   which is how docs/design/redesign/*.html preview it before the release. */

/* ── tokens/primitives.css: new family, plus one warm step ────────────────── */
:root{
--fuchsia-300:#f0abfc;
--fuchsia-400:#e879f9;
--fuchsia-500:#d946ef;
--fuchsia-600:#c026d3;
--fuchsia-700:#a21caf;
--fuchsia-800:#86198f;
--amber-100:#fef3c7;
}

/* ── tokens/colors.css: product identity colour, with the others ──────────── */
:root{
--product-research:var(--fuchsia-400);
}

/* ── tokens/products.css: the ramp, beside the other products ─────────────────
   Research is Dawn: light arriving. The C is fuchsia; the rising bar warms through pink and peach to
   first light. Links, buttons and focus stay fuchsia (alt 300/400/500 dark, 700 light).
   Audited: text-accent 5.8:1 light (fuchsia-700 on slate-100), 8.8:1 dark (fuchsia-300 on navy-800);
   action-primary-fg on action-primary 6.3:1 light, 7.8:1 dark; border-accent 3:1 or better everywhere. */
[data-product="research"]{
--brand-400:var(--fuchsia-400);--brand-500:var(--fuchsia-500);--brand-600:var(--fuchsia-600);
--brand-alt-400:var(--fuchsia-300);--brand-alt-500:var(--fuchsia-400);--brand-alt-600:var(--fuchsia-500);--brand-alt-700:var(--fuchsia-700);
}

/* ── tokens/products.css: AFTER the shared accent roles, beside Paddock's Ink overrides ──
   Dawn's warm stops live only here and in the mark: progress fills, the empty-state tile.
   Never in text, buttons, focus or state. The avatar keeps the default fuchsia pair so its letter
   stays readable. */
[data-product="research"]{
--gradient-primary:linear-gradient(135deg,var(--fuchsia-600) 0%,var(--pink-400) 45%,var(--orange-300) 80%,var(--amber-100) 100%); /* @kind other */
--gradient-primary-soft:linear-gradient(135deg,color-mix(in srgb,var(--fuchsia-600) 15%,transparent) 0%,color-mix(in srgb,var(--pink-400) 15%,transparent) 45%,color-mix(in srgb,var(--orange-300) 12%,transparent) 100%); /* @kind other */
}
