/* Design Research — brand lifted from the current site: a coral-red → purple
   logo gradient (#EA494C → #5C408F) with yellow / orange accents. This file
   fully replaces sites/ai-engineer/css/colors.css for this edition, so it
   mirrors that variable contract exactly — every shared component re-skins from
   the values here, with no structural change. */
@layer theme {
	:root {
		/* Brand palette (sampled from webdirections.org/design-research) */
		--dr-red:    #ea494c;
		--dr-purple: #5c408f;
		--dr-yellow: #fec50b;
		--dr-orange: #f26a21;
		/* Exact hero gradient from the live Design Research site. */
		--brand-gradient: linear-gradient(119deg, #ea494b 0%, #5b408f 100%);

		/* Neutrals (text / surfaces) — tinted very slightly toward the brand */
		--neutral-pure-white:     #ffffff;
		--neutral-light-gray:     #efedf5;
		--neutral-soft-gray:      #e3dff0;
		--neutral-pure-black:     #1f1d2b;
		--neutral-dark-gray:      #4a4660;
		--neutral-soft-dark-gray: #6a6680;

		/* Brand / UI accents */
		--palette-brand:     var(--dr-red);
		--palette-brand-hi:  var(--dr-purple);
		--palette-theme:     var(--dr-purple);
		--palette-theme-hi:  var(--dr-red);
		--palette-accent:    var(--dr-red);
		--palette-accent-2:  var(--dr-purple);
		--palette-accent-3:  var(--dr-orange);
		--palette-on-accent: var(--neutral-pure-white);

		/* Neutral role bindings */
		--palette-bg:        var(--neutral-pure-white);
		--palette-panel:     var(--neutral-light-gray);
		--palette-panel-alt: var(--neutral-soft-gray);
		--palette-rule:      var(--neutral-soft-gray);
		--palette-ink:       var(--neutral-pure-black);
		--palette-ink-weak:  var(--neutral-dark-gray);
		--palette-ink-muted: var(--neutral-soft-dark-gray);

		/* Exported tokens consumed by the shared components */
		--color-bg:        var(--palette-bg);
		--color-panel:     var(--palette-panel);
		--color-panel-alt: var(--palette-panel-alt);
		--color-rule:      var(--palette-rule);
		--color-ink:       var(--palette-ink);
		--color-ink-weak:  var(--palette-ink-weak);
		--color-ink-muted: var(--palette-ink-muted);
		--color-accent:    var(--palette-accent);
		--color-accent-hi: var(--palette-brand-hi);
		--color-accent-2:  var(--palette-accent-2);
		--color-accent-3:  var(--palette-accent-3);
		--color-on-accent: var(--palette-on-accent);

		/* Links — purple */
		--link:       var(--dr-purple);
		--link-hover: color-mix(in srgb, var(--dr-purple), black 15%);

		/* Hero: brand gradient with white logo + text */
		--page-header-bg:     var(--brand-gradient);
		--page-header-fg:     var(--neutral-pure-white);
		--page-header-accent: var(--dr-yellow);

		/* Nav / misc */
		--hairline:       1px solid var(--color-rule);
		--site-nav-h:     64px;
		--site-nav-bg:    var(--color-bg);
		--site-nav-ink:   var(--color-ink);
		--site-nav-rule:  var(--hairline);
		--site-nav-hover: #f3f1fb;
	}
}