@import './primitives/radius.css';
@import './primitives/space.css';
@import './primitives/palette.css';

@layer base {
    :root {
        /*  Colors Foundation */
        --foundation-black: var(--color-black);
        --foundation-white: var(--color-white);

        /*  Colors Neutral */
        --neutral-25: var(--color-zinc-25);
        --neutral-50: var(--color-zinc-50);
        --neutral-100: var(--color-zinc-100);
        --neutral-200: var(--color-zinc-200);
        --neutral-300: var(--color-zinc-300);
        --neutral-400: var(--color-zinc-400);
        --neutral-500: var(--color-zinc-500);
        --neutral-600: var(--color-zinc-600);
        --neutral-700: var(--color-zinc-700);
        --neutral-800: var(--color-zinc-800);
        --neutral-900: var(--color-zinc-900);
        --neutral-950: var(--color-zinc-950);

        /* Primary Color (Indigo) */
        --brand-25: var(--color-indigo-25);
        --brand-50: var(--color-indigo-50);
        --brand-100: var(--color-indigo-100);
        --brand-200: var(--color-indigo-200);
        --brand-300: var(--color-indigo-300);
        --brand-400: var(--color-indigo-400);
        --brand-500: var(--color-indigo-500);
        --brand-600: var(--color-indigo-600);
        --brand-700: var(--color-indigo-700);
        --brand-800: var(--color-indigo-800);
        --brand-900: var(--color-indigo-900);
        --brand-950: var(--color-indigo-950);

        /* Success Colors (Emerald/Green) */
        --success-50: var(--color-esmerald-50);
        --success-100: var(--color-esmerald-100);
        --success-200: var(--color-esmerald-200);
        --success-300: var(--color-esmerald-300);
        --success-400: var(--color-esmerald-400);
        --success-500: var(--color-esmerald-500);
        --success-600: var(--color-esmerald-600);
        --success-700: var(--color-esmerald-700);
        --success-800: var(--color-esmerald-800);
        --success-900: var(--color-esmerald-900);
        --success-950: var(--color-esmerald-950);

        /* Error Colors (Red) */
        --error-50: var(--color-red-50);
        --error-100: var(--color-red-100);
        --error-200: var(--color-red-200);
        --error-300: var(--color-red-300);
        --error-400: var(--color-red-400);
        --error-500: var(--color-red-500);
        --error-600: var(--color-red-600);
        --error-700: var(--color-red-700);
        --error-800: var(--color-red-800);
        --error-900: var(--color-red-900);
        --error-950: var(--color-red-950);

        /* Warning Colors (Amber/Orange) */
        --warning-50: var(--color-yellow-50);
        --warning-100: var(--color-yellow-100);
        --warning-200: var(--color-yellow-200);
        --warning-300: var(--color-yellow-300);
        --warning-400: var(--color-yellow-400);
        --warning-500: var(--color-yellow-500);
        --warning-600: var(--color-yellow-600);
        --warning-700: var(--color-yellow-700);
        --warning-800: var(--color-yellow-800);
        --warning-900: var(--color-yellow-900);
        --warning-950: var(--color-yellow-950);

        /* Pending's Colors */
        --pending-50: var(--color-orange-50);
        --pending-100: var(--color-orange-100);
        --pending-200: var(--color-orange-200);
        --pending-300: var(--color-orange-300);
        --pending-400: var(--color-orange-400);
        --pending-500: var(--color-orange-500);
        --pending-600: var(--color-orange-600);
        --pending-700: var(--color-orange-700);
        --pending-800: var(--color-orange-800);

        /* In Progress Colors */
        --inprogress-50: var(--color-blue-50);
        --inprogress-100: var(--color-blue-100);
        --inprogress-200: var(--color-blue-200);
        --inprogress-300: var(--color-blue-300);
        --inprogress-400: var(--color-blue-400);
        --inprogress-500: var(--color-blue-500);
        --inprogress-600: var(--color-blue-600);
        --inprogress-700: var(--color-blue-700);
        --inprogress-800: var(--color-blue-800);
        --inprogress-900: var(--color-blue-900);
        --inprogress-950: var(--color-blue-950);

        /* Pyrion Colors  */
        --pyrion-orange-500: var(--color-pyrion-orange-500);

        /* Extended Colors */

        --dataviz-series-1: var(--color-indigo-400);
        --dataviz-series-2: var(--color-esmerald-200);
        --dataviz-series-3: var(--color-red-300);
        --dataviz-series-4: var(--color-yellow-200);
        --dataviz-series-5: var(--color-pyrion-orange-200);
        --dataviz-series-6: var(--color-orange-200);
        --dataviz-series-7: var(--color-orange-300);
        --dataviz-series-8: var(--color-indigo-200);
        --dataviz-series-9: var(--color-orange-200);

        --dataviz-sequential-indigo-1: var(--color-indigo-100);
        --dataviz-sequential-indigo-2: var(--color-indigo-300);
        --dataviz-sequential-indigo-3: var(--color-indigo-400);
        --dataviz-sequential-indigo-4: var(--color-indigo-500);
        --dataviz-sequential-indigo-5: var(--color-indigo-600);
        --dataviz-sequential-indigo-6: var(--color-indigo-800);

        --dataviz-sequential-orange-1: var(--color-orange-100);
        --dataviz-sequential-orange-2: var(--color-orange-200);
        --dataviz-sequential-orange-3: var(--color-orange-400);
        --dataviz-sequential-orange-4: var(--color-orange-500);
        --dataviz-sequential-orange-5: var(--color-orange-600);
        --dataviz-sequential-orange-6: var(--color-orange-700);

        --dataviz-diverging-1: var(--color-esmerald-500);
        --dataviz-diverging-2: var(--color-esmerald-400);
        --dataviz-diverging-3: var(--color-esmerald-200);
        --dataviz-diverging-4: var(--color-esmerald-100);
        --dataviz-diverging-5: var(--color-zinc-200);
        --dataviz-diverging-6: var(--color-red-100);
        --dataviz-diverging-7: var(--color-red-200);
        --dataviz-diverging-8: var(--color-red-400);
        --dataviz-diverging-9: var(--color-red-500);

        --category-priority-high-border: var(--color-red-700);
        --category-priority-high-background-primary: var(--color-red-100);
        --category-priority-high-background-secondary: var(--color-red-400);

        --category-priority-medium-border: var(--color-yellow-600);
        --category-priority-medium-background-primary: var(--color-yellow-100);
        --category-priority-medium-background-secondary: var(--color-yellow-400);

        --category-priority-low-border: var(--color-esmerald-700);
        --category-priority-low-background-primary: var(--color-esmerald-100);
        --category-priority-low-background-secondary: var(--color-esmerald-500);

        --category-status-pending-border: var(--color-orange-800);
        --category-status-pending-background-primary: var(--color-orange-100);
        --category-status-pending-background-secondary: var(--color-orange-300);

        --category-status-onhold-border: var(--color-yellow-800);
        --category-status-onhold-background-primary: var(--color-yellow-100);
        --category-status-onhold-background-secondary: var(--color-yellow-200);

        --category-status-inprogress-border: var(--color-blue-800);
        --category-status-inprogress-background-primary: var(--color-blue-200);
        --category-status-inprogress-background-secondary: var(--color-blue-300);

        --category-status-discard-border: var(--color-red-800);
        --category-status-discard-background-primary: var(--color-red-100);
        --category-status-discard-background-secondary: var(--color-red-300);

        --category-status-done-border: var(--color-esmerald-800);
        --category-status-done-background-primary: var(--color-esmerald-100);
        --category-status-done-background-secondary: var(--color-esmerald-300);

        --category-label-violet-background: color-mix(in srgb, #615FFF 20%, transparent);
        --category-label-violet-text: var(--color-indigo-400);
        --category-label-violet-border: var(--color-indigo-400);
        
        --category-label-lilac-background: color-mix(in srgb, #c6d2ff 20%, transparent);
        --category-label-lilac-text: var(--color-indigo-200);
        --category-label-lilac-border: var(--color-indigo-300);

        --category-label-tangerine-background: color-mix(in srgb, #ffb86a 20%, transparent);
        --category-label-tangerine-text: var(--color-orange-200);
        --category-label-tangerine-border: var(--color-orange-200);

        --category-label-orange-background: color-mix(in srgb, #FC5509 20%, transparent);
        --category-label-orange-text: var(--color-pyrion-orange-400);
        --category-label-orange-border: var(--color-pyrion-orange-400);

        --category-label-red-background: color-mix(in srgb, #FB2C36 20%, transparent);
        --category-label-red-text: var(--color-red-400);
        --category-label-red-border: var(--color-red-400);

        --category-label-yellow-background: color-mix(in srgb, #F0B100 20%, transparent);
        --category-label-yellow-text: var(--color-yellow-300);
        --category-label-yellow-border: var(--color-yellow-400);

        --category-label-green-background: color-mix(in srgb, #00BC7D 20%, transparent);
        --category-label-green-text: var(--color-esmerald-500);
        --category-label-green-border: var(--color-esmerald-600);

        --category-label-blue-background: color-mix(in srgb, #2B7FFF 20%, transparent);
        --category-label-blue-text: var(--color-blue-400);
        --category-label-blue-border: var(--color-blue-500);

        --category-label-lightblue-background: color-mix(in srgb, #8EC5FF 20%, transparent);
        --category-label-lightblue-text: var(--color-blue-300);
        --category-label-lightblue-border: var(--color-blue-300);

        --category-label-grey-background: color-mix(in srgb, #70707A 20%, transparent);
        --category-label-grey-text: var(--color-zinc-200);
        --category-label-grey-border: var(--color-zinc-300);

        --richtext-highlighting-violet: color-mix(in srgb, #615FFF 20%, transparent);
        --richtext-highlighting-blue: color-mix(in srgb, #2B7FFF 20%, transparent);
        --richtext-highlighting-green: color-mix(in srgb, #00BC7D 20%, transparent);
        --richtext-highlighting-yellow: color-mix(in srgb, #F0B100 20%, transparent);   
        --richtext-highlighting-orange: color-mix(in srgb, #FC5509 20%, transparent);
        --richtext-highlighting-red: color-mix(in srgb, #FB2C36 20%, transparent);

        --richtext-text-white: var(--color-zinc-25);
        --richtext-text-grey: var(--color-zinc-200);
        --richtext-text-violet: var(--color-indigo-300);
        --richtext-text-blue: var(--color-blue-400);
        --richtext-text-green: var(--color-esmerald-300);
        --richtext-text-yellow: var(--color-yellow-300);
        --richtext-text-orange: var(--color-pyrion-orange-300);
        --richtext-text-red: var(--color-red-400);


        /* Radius */
        --radius-none: var(--radius-0);
        --radius-xsmall: var(--radius-50);
        --radius-small: var(--radius-100);
        --radius-medium: var(--radius-200);
        --radius-large: var(--radius-300);
        --radius-xlarge: var(--radius-400);
        --radius-2xlarge: var(--radius-500);
        --radius-full: var(--radius-pill);


        /* Spacing */
        --pyrion-spacing-0: var(--space-0);
        --pyrion-spacing-1: var(--space-50);
        --pyrion-spacing-2: var(--space-100);
        --pyrion-spacing-4: var(--space-200);
        --pyrion-spacing-6: var(--space-300);
        --pyrion-spacing-8: var(--space-400);
        --pyrion-spacing-10: var(--space-500);
        --pyrion-spacing-12: var(--space-600);
        --pyrion-spacing-14: var(--space-700);
        --pyrion-spacing-16: var(--space-800);
        --pyrion-spacing-18: var(--space-900);
        --pyrion-spacing-20: var(--space-1000);
        --pyrion-spacing-24: var(--space-1100);
        --pyrion-spacing-28: var(--space-1300);
        --pyrion-spacing-32: var(--space-1500);

    }
}