/* AI Engineer – grayscale theme + coloured links */
@layer theme {
	:root {
		/* ------------------------------------------------------------
		   1. Core neutral palette (brand grayscale)
		------------------------------------------------------------- */
		--neutral-pure-white:      #ffffff; /* Pure White */
		--neutral-light-gray:      #e5e5e5; /* Light Gray (light) */
		--neutral-soft-gray:       #dddddd; /* Soft Gray (light) */

		--neutral-pure-black:      #000000; /* Pure Black */
		--neutral-dark-gray:       #333333; /* Light Gray (dark) */
		--neutral-soft-dark-gray:  #4a4a4a; /* Soft Gray (dark) */

		/* ------------------------------------------------------------
		   2. Brand / UI accents – all grayscale
		   (used for buttons, tags, chips, etc.)
		------------------------------------------------------------- */
		--palette-brand:       var(--neutral-dark-gray);
		--palette-brand-hi:    var(--neutral-pure-black);

		--palette-theme:       var(--neutral-soft-gray);
		--palette-theme-hi:    var(--neutral-light-gray);

		--palette-accent:      var(--neutral-dark-gray);
		--palette-accent-2:    var(--neutral-soft-dark-gray);
		--palette-accent-3:    var(--neutral-pure-black);

		--palette-on-accent:   var(--neutral-pure-white);

		/* ------------------------------------------------------------
		   3. 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);

		/* ------------------------------------------------------------
		   4. Exported design tokens (used everywhere else)
		------------------------------------------------------------- */
		/* Surfaces */
		--color-bg:            var(--palette-bg);
		--color-panel:         var(--palette-panel);
		--color-panel-alt:     var(--palette-panel-alt);
		--color-rule:          var(--palette-rule);

		/* Text */
		--color-ink:           var(--palette-ink);
		--color-ink-weak:      var(--palette-ink-weak);
		--color-ink-muted:     var(--palette-ink-muted);

		/* Grayscale accents for general UI */
		--color-accent:        var(--palette-brand);
		--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);

		/* ------------------------------------------------------------
		   5. Links – *only place* we use colour
		------------------------------------------------------------- */
		--link:        #4f46e5; /* blue-purple link colour */
		--link-hover:  color-mix(in srgb, #4f46e5, black 15%);

		/* ------------------------------------------------------------
		   6. 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:    #f5f5f5;
		
		/* ------------------------------------------------------------
		   7. 
		------------------------------------------------------------- */
	}
}