/**
 * iO AI CSS Semantic Tokens
 *
 * Intent-based roles mapped from primitives.css.
 * Loaded unconditionally on both admin and frontend when core is active.
 * Declare 'io-ai-variables' as a style dependency to use these vars.
 *
 * @package IO_AI_Core
 */

:root {
    /* Brand */
    --s-io-ai-primary:              var(--io-ai-p-color-blue-base);
    --s-io-ai-primary:              var(--io-ai-p-color-blue-base);

    /* Neutrals */
    --s-io-ai-black:                var(--io-ai-p-color-black);
    --s-io-ai-pure-white:           var(--io-ai-p-color-white);
    --s-io-ai-neutral-off-white:    var(--io-ai-p-color-off-white);

    --s-io-ai-neutral-50:           var(--io-ai-p-color-neutral-50);
    --s-io-ai-neutral-100:          var(--io-ai-p-color-neutral-100);
    --s-io-ai-neutral-200:          var(--io-ai-p-color-neutral-200);
    --s-io-ai-neutral-300:          var(--io-ai-p-color-neutral-300);
    --s-io-ai-neutral-400:          var(--io-ai-p-color-neutral-400);
    --s-io-ai-neutral-500:          var(--io-ai-p-color-neutral-500);
    --s-io-ai-neutral-600:          var(--io-ai-p-color-neutral-600);
    --s-io-ai-neutral-700:          var(--io-ai-p-color-neutral-700);
    --s-io-ai-neutral-800:          var(--io-ai-p-color-neutral-800);
    --s-io-ai-neutral-900:          var(--io-ai-p-color-neutral-900);

    /* Feedback — error */
    --s-io-ai-error-bg:             var(--io-ai-p-red-100);
    --s-io-ai-error:                var(--io-ai-p-red-500);
    --s-io-ai-error-dark:           var(--io-ai-p-red-900);

    /* Feedback — warning */
    --s-io-ai-warning-bg:           var(--io-ai-p-amber-100);
    --s-io-ai-warning:              var(--io-ai-p-amber-500);
    --s-io-ai-warning-dark:         var(--io-ai-p-amber-900);

    /* Feedback — success */
    --s-io-ai-success:              var(--io-ai-p-green-500);
    --s-io-ai-success-bg:           var(--io-ai-p-green-100);
    --s-io-ai-success-dark:         var(--io-ai-p-green-900);

    /* Feedback — info */
    --s-io-ai-info-bg:              var(--io-ai-p-teal-100);
    --s-io-ai-info:                 var(--io-ai-p-teal-500);
    --s-io-ai-info-dark:            var(--io-ai-p-teal-900);

    /* Animation */
    --s-io-ai-transition:           all var(--io-ai-p-duration-normal) var(--io-ai-p-easing-default);

    /* Button */
    --s-io-ai-button-spacing-x-sm: var(--io-ai-p-spacing-4);
    --s-io-ai-button-spacing-y-sm: var(--io-ai-p-spacing-3);

    --s-io-ai-button-spacing-x: var(--io-ai-p-spacing-6);
    --s-io-ai-button-spacing-y: var(--io-ai-p-spacing-4);

    /* Button — primary */
    --s-io-ai-button-primary-color-border:            var(--io-ai-p-color-blue-base);
    --s-io-ai-button-primary-color-border-hover:      var(--io-ai-p-color-blue-800);
    --s-io-ai-button-primary-color-border-active:     var(--io-ai-p-color-blue-900);
    --s-io-ai-button-primary-color-border-disabled:   var(--io-ai-p-color-neutral-300);

    --s-io-ai-button-primary-color-background:          var(--io-ai-p-color-blue-base);
    --s-io-ai-button-primary-color-background-hover:    var(--io-ai-p-color-blue-800);
    --s-io-ai-button-primary-color-background-active:   var(--io-ai-p-color-blue-900);
    --s-io-ai-button-primary-color-background-disabled: var(--io-ai-p-color-neutral-100);

    --s-io-ai-button-primary-color-foreground:          var(--s-io-ai-pure-white);
    --s-io-ai-button-primary-color-foreground-hover:    var(--s-io-ai-pure-white);
    --s-io-ai-button-primary-color-foreground-active:   var(--s-io-ai-pure-white);
    --s-io-ai-button-primary-color-foreground-disabled: var(--io-ai-p-color-neutral-500);

    /* Button — secondary */
    --s-io-ai-button-secondary-color-border:            var(--io-ai-p-color-black);
    --s-io-ai-button-secondary-color-border-hover:      var(--io-ai-p-color-black-900);
    --s-io-ai-button-secondary-color-border-active:     var(--io-ai-p-color-black);
    --s-io-ai-button-secondary-color-border-disabled:   var(--io-ai-p-color-neutral-300);

    --s-io-ai-button-secondary-color-background:          var(--io-ai-p-color-black);
    --s-io-ai-button-secondary-color-background-hover:    var(--io-ai-p-color-black-900);
    --s-io-ai-button-secondary-color-background-active:   var(--io-ai-p-color-black);
    --s-io-ai-button-secondary-color-background-disabled: var(--io-ai-p-color-neutral-100);

    --s-io-ai-button-secondary-color-foreground:          var(--s-io-ai-pure-white);
    --s-io-ai-button-secondary-color-foreground-hover:    var(--s-io-ai-pure-white);
    --s-io-ai-button-secondary-color-foreground-active:   var(--io-ai-p-color-neutral-200);
    --s-io-ai-button-secondary-color-foreground-disabled: var(--io-ai-p-color-neutral-500);

    /* Button — outline */
    --s-io-ai-button-outline-color-border:            var(--io-ai-p-color-neutral-900);
    --s-io-ai-button-outline-color-border-hover:      var(--io-ai-p-color-black-200);
    --s-io-ai-button-outline-color-border-active:     var(--io-ai-p-color-black-300);
    --s-io-ai-button-outline-color-border-disabled:   var(--io-ai-p-color-neutral-300);

    --s-io-ai-button-outline-color-background:          var(--io-ai-p-color-white-100);
    --s-io-ai-button-outline-color-background-hover:    var(--io-ai-p-color-white-100);
    --s-io-ai-button-outline-color-background-active:   var(--io-ai-p-color-white-50);
    --s-io-ai-button-outline-color-background-disabled: var(--io-ai-p-color-neutral-100);

    --s-io-ai-button-outline-color-foreground:          var(--io-ai-p-color-black);
    --s-io-ai-button-outline-color-foreground-hover:    var(--io-ai-p-color-neutral-700);
    --s-io-ai-button-outline-color-foreground-active:   var(--io-ai-p-color-neutral-800);
    --s-io-ai-button-outline-color-foreground-disabled: var(--io-ai-p-color-neutral-500);

    /* Typography */
    --s-io-ai-font-family-body: Manrope, sans-serif;
}