/**
 * iO AI CSS Primitives
 *
 * Raw scale values — never use these directly in component CSS.
 * Map them to intent-based roles via semantics.css instead.
 * The --io-ai-p-* prefix avoids collisions with the theme's --p-* tokens.
 *
 * @package IO_AI_Core
 */

:root {
    /* Spacing - Base scale (4px increments) */
    --io-ai-p-spacing-0: 0px;
    --io-ai-p-spacing-1: 4px;
    --io-ai-p-spacing-2: 8px;
    --io-ai-p-spacing-3: 12px;
    --io-ai-p-spacing-4: 16px;
    --io-ai-p-spacing-5: 20px;
    --io-ai-p-spacing-6: 24px;
    --io-ai-p-spacing-7: 28px;
    --io-ai-p-spacing-8: 32px;
    --io-ai-p-spacing-9: 36px;
    --io-ai-p-spacing-10: 40px;
    --io-ai-p-spacing-11: 44px;
    --io-ai-p-spacing-12: 48px;
    --io-ai-p-spacing-13: 52px;
    --io-ai-p-spacing-14: 56px;
    --io-ai-p-spacing-15: 60px;
    --io-ai-p-spacing-16: 64px;
    --io-ai-p-spacing-17: 68px;
    --io-ai-p-spacing-18: 72px;
    --io-ai-p-spacing-19: 76px;
    --io-ai-p-spacing-20: 80px;
    --io-ai-p-spacing-24: 96px;
    --io-ai-p-spacing-28: 112px;
    --io-ai-p-spacing-32: 128px;
    --io-ai-p-spacing-36: 144px;
    --io-ai-p-spacing-40: 160px;
    --io-ai-p-spacing-44: 176px;
    --io-ai-p-spacing-48: 192px;
    --io-ai-p-spacing-52: 208px;
    --io-ai-p-spacing-56: 224px;
    --io-ai-p-spacing-60: 240px;
    --io-ai-p-spacing-64: 256px;
    --io-ai-p-spacing-68: 272px;

    /* Blue (primary brand) */
    --io-ai-p-color-blue-50:   rgba(255, 214, 255, 1);
    --io-ai-p-color-blue-100:  rgba(246, 187, 255, 1);
    --io-ai-p-color-blue-200:  rgba(221, 162, 255, 1);
    --io-ai-p-color-blue-300:  rgba(196, 138, 255, 1);
    --io-ai-p-color-blue-400:  rgba(170, 115, 255, 1);
    --io-ai-p-color-blue-500:  rgba(144, 93, 255, 1);
    --io-ai-p-color-blue-600:  rgba(118, 72, 255, 1);
    --io-ai-p-color-blue-700:  rgba(91, 53, 243, 1);
    --io-ai-p-color-blue-800:  rgba(66, 35, 212, 1);
    --io-ai-p-color-blue-900:  rgba(42, 19, 176, 1);
    --io-ai-p-color-blue-base: rgba(0, 0, 210, 1);

    /* Colors -> black */
    --io-ai-p-color-black-50: rgba(35, 35, 35, 0.05);
    --io-ai-p-color-black-100: rgba(35, 35, 35, 0.1);
    --io-ai-p-color-black-200: rgba(35, 35, 35, 0.2);
    --io-ai-p-color-black-300: rgba(35, 35, 35, 0.3);
    --io-ai-p-color-black-400: rgba(35, 35, 35, 0.4);
    --io-ai-p-color-black-500: rgba(35, 35, 35, 0.5);
    --io-ai-p-color-black-600: rgba(35, 35, 35, 0.6);
    --io-ai-p-color-black-700: rgba(35, 35, 35, 0.7);
    --io-ai-p-color-black-800: rgba(35, 35, 35, 0.8);
    --io-ai-p-color-black-900: rgba(35, 35, 35, 0.9);

    /* Colors -> white */
    --io-ai-p-color-white-50: rgba(255, 255, 255, 0.05);
    --io-ai-p-color-white-100: rgba(255, 255, 255, 0.1);
    --io-ai-p-color-white-200: rgba(255, 255, 255, 0.2);
    --io-ai-p-color-white-300: rgba(255, 255, 255, 0.3);
    --io-ai-p-color-white-400: rgba(255, 255, 255, 0.4);
    --io-ai-p-color-white-500: rgba(255, 255, 255, 0.5);
    --io-ai-p-color-white-600: rgba(255, 255, 255, 0.6);
    --io-ai-p-color-white-700: rgba(255, 255, 255, 0.7);
    --io-ai-p-color-white-800: rgba(255, 255, 255, 0.8);
    --io-ai-p-color-white-900: rgba(255, 255, 255, 0.9);

    /* System */
    --io-ai-p-color-white: rgba(255, 255, 255, 1);
    --io-ai-p-color-off-white: #ebe8e3;
    --io-ai-p-color-black: rgba(35, 35, 35, 1);
    --io-ai-p-color-focus: #0019ff;
    --io-ai-p-color-neutral-50:  #f3f3f3;
    --io-ai-p-color-neutral-100: #dddddd;
    --io-ai-p-color-neutral-200: #c6c6c6;
    --io-ai-p-color-neutral-300: #b0b0b0;
    --io-ai-p-color-neutral-400: #9b9b9b;
    --io-ai-p-color-neutral-500: #949494;
    --io-ai-p-color-neutral-600: #727272;
    --io-ai-p-color-neutral-700: #5e5e5e;
    --io-ai-p-color-neutral-800: #4b4b4b;
    --io-ai-p-color-neutral-900: #393939;

    /* Red (error) */
    --io-ai-p-red-100: #fef0f0;
    --io-ai-p-red-500: #d63638;
    --io-ai-p-red-900: #7d0034;

    /* Amber (warning) */
    --io-ai-p-amber-100: #fef9ec;
    --io-ai-p-amber-500: #dba617;
    --io-ai-p-amber-900: #996800;

    /* Green (success) */
    --io-ai-p-green-100: #f0faf2;
    --io-ai-p-green-500: #00a32a;
    --io-ai-p-green-900: #224400;

    /* Teal (info) */
    --io-ai-p-teal-100: #f0f6fc;
    --io-ai-p-teal-500: #2271b1;
    --io-ai-p-teal-900: #0c5460;

    /* Animation */
    --io-ai-p-duration-normal: 0.2s;
    --io-ai-p-easing-default:  ease-in-out;
}