/* ------------------------------------------------------------------------------------------ 
 ------------------------ Here are stored global or common styles  ------------------------
 ------------------------------------------------------------------------------------------ 
 ---------------- GLOBAL VARIABLES ---------------- */
:root {
    /* From pure blue */
    --primary-color-50: #F0F0FF;
    --primary-color-100: #E0E0FF;
    --primary-color-200: #C2C2FF;
    --primary-color-300: #9494FF;
    --primary-color-400: #5C5CFF;
    --primary-color-400-alpha: #5c5cff2b;
    --primary-color-500: #0000FF;
    --primary-color-500-alpha: #0000ff58;
    --primary-color-600: #0000E6;
    --primary-color-700: #0000BF;
    --primary-color-700-alpha: #0000bfb4;
    --primary-color-800: #000099;
    --primary-color-900: #000066;
    --primary-color-950: #000033;
    /* "Sepia" */
    --accent-color-50: #FCFBFA;
    --accent-color-100: #F8F6F4;
    --accent-color-200: #F1EEEB;
    --accent-color-300: #E9E3DF;
    --accent-color-400: #D7CDC7;
    --accent-color-500: #C4B7AE;
    --accent-color-600: #A99B92;
    --accent-color-700: #8A7D76;
    --accent-color-800: #6B605A;
    --accent-color-900: #4C4440;
    --accent-color-950: #2A2522;
    /* Taken form Tailwind zinc */
    --neutral-color-50: oklch(98.5% 0 0);
    --neutral-color-100: oklch(96.7% 0.001 286.375);
    --neutral-color-200: #e4e4e7;
    --neutral-color-200-alpha: #e4e4e7bc;
    --neutral-color-200-alpha-disabled: #e4e4e735;
    --neutral-color-300: oklch(87.1% 0.006 286.286);
    --neutral-color-400: oklch(70.5% 0.015 286.067);
    --neutral-color-500: oklch(55.2% 0.016 285.938);
    --neutral-color-600: oklch(44.2% 0.017 285.786);
    --neutral-color-700: oklch(37% 0.013 285.805);
    --neutral-color-800: oklch(27.4% 0.006 286.033);
    --neutral-color-900: #18181b;
    --neutral-color-900-alpha: #18181bdb;
    --neutral-color-950: #09090b;
    /* Taken form Tailwind sky */
    --accent-color-50-sky: #f0f9ff;
    --accent-color-100-sky: #e0f2fe;
    --accent-color-200-sky: #bae6fd;
    --accent-color-500-sky: #0ea5e9;
    --accent-color-600-sky: #0284c7;
    --accent-color-700-sky: #0369a1;
    --accent-color-800-sky: #075985;
    --accent-color-900-sky: #0c4a6e;
    --accent-color-950-sky: #082f49;
    /* Taken form Tailwind yellow */
    --warning-color-50: #fefce8;
    --warning-color-100: #fef9c3;
    --warning-color-500: #eab308;
    --warning-color-700: #a16207;
    --warning-color-950: #422006;
    /* Taken form Tailwind red */
    --danger-color-50: #fef2f2;
    --danger-color-100: #fee2e2;
    --danger-color-500: #ef4444;
    --danger-color-600: #dc2626;
    --danger-color-700: #b91c1c;
    --danger-color-800: #991b1b;
    --danger-color-900: #7f1d1d;
    --danger-color-950: #450a0a;
    /* Taken form Tailwind emerald */
    --success-color-50: #ecfdf5;
    --success-color-100: #d1fae5;
    --success-color-500: #10b981;
    --success-color-700: #047857;
    --success-color-950: #022c22;
    --surface-primary: white;
    --surface-secondary: var(--neutral-color-100);
    --surface-tertiary: var(--neutral-color-200);
    --surface-info: var(--accent-color-50-sky);
    --surface-warning: var(--warning-color-50);
    --surface-success: var(--success-color-50);
    --surface-danger: var(--danger-color-50);
    --surface-hover: var(--primary-color-50);
    --surface-dark: var(--neutral-color-900);
    --text-primary: var(--primary-color-500);
    --text-nav-link: var(--neutral-color-700);
    --text-heading: var(--neutral-color-900);
    --text-paragraph: var(--neutral-color-500);
    --text-muted: var(--neutral-color-400);
    --text-disabled: var(--neutral-color-300);
    --text-field-placeholder: var(--primary-color-500-alpha);
    --text-danger: var(--danger-color-500);
    --border: 1px solid var(--neutral-color-200);
    --border-light: 1px solid var(--neutral-color-700);
    --border-radius: 20px;
}

[data-bs-theme="dark"] {
    --border: 1px solid var(--neutral-color-700);
    --surface-primary: var(--neutral-color-800);
    --surface-secondary: var(--neutral-color-900);
    --surface-tertiary: var(--neutral-color-800);
    --surface-hover: var(--neutral-color-900);
    --surface-info: var(--accent-color-950-sky);
    --surface-danger: var(--danger-color-950);
    --surface-warning: var(--warning-color-950);
    --surface-success: var(--success-color-950);
    --text-primary: var(--neutral-color-100);
    --text-nav-link: var(--neutral-color-300);
    --text-heading: var(--neutral-color-100);
    --text-paragraph: var(--neutral-color-300);
    --text-muted: var(--neutral-color-400);
    --text-disabled: var(--neutral-color-500);
    --text-field-placeholder: var(--neutral-color-500);
    --text-danger: var(--danger-color-600);
}

/* ---------------- end GLOBAL VARIABLES ---------------- */