/* ==== MISCELLANEOUS ==== */
:root {
    --border-radius-tabs: 8px 8px 0 0;
    --font-family-sans-serif: Inter, sans-serif;
}

/* ==== ELEMENT SPECIFIC ==== */
:root {
    --btn: var(--accent-500);
    --btn-foreground: var(--accent-500-foreground);

    --header: var(--primary-400);
    --header-foreground: var(--primary-400-foreground);

    --header-tab: var(--primary-600);
    --header-tab-foreground: var(--primary-600-foreground);

    --footer: from oklch(var(--menu)) var(--darken-1);
    --footer-foreground: var(--menu-foreground);
}

/* ==== SEMANTIC COLORS ==== */
:root {
    /* --> DYNAMIC */
    --accent-hue: var(--primary-hue);

    /* --> FIXED */
    --default-hue: 0;
    --success-hue: 130.850;
    --warning-hue: 64.050;
    --danger-hue: 28.810;
    --info-hue: 248.810;
}

/* ==== COLOR UTILITY ==== */
:root {
    --lighten-1: calc(l * 100% + (8.5% * 1)) c h;
    --lighten-2: calc(l * 100% + (8.5% * 2)) c h;
    --lighten-3: calc(l * 100% + (8.5% * 3)) c h;
    --lighten-4: calc(l * 100% + (8.5% * 4)) c h;
    --lighten-5: calc(l * 100% + (8.5% * 5)) c h;
    --lighten-6: calc(l * 100% + (8.5% * 6)) c h;
    --lighten-7: calc(l * 100% + (8.5% * 7)) c h;
    --lighten-8: calc(l * 100% + (8.5% * 8)) c h;
    --lighten-9: calc(l * 100% + (8.5% * 9)) c h;
    --lighten-10: calc(l * 100% + (8.5% * 10)) c h;

    --darken-1: calc(l * 100% - (8.5% * 1)) c h;
    --darken-2: calc(l * 100% - (8.5% * 2)) c h;
    --darken-3: calc(l * 100% - (8.5% * 3)) c h;
    --darken-4: calc(l * 100% - (8.5% * 4)) c h;
    --darken-5: calc(l * 100% - (8.5% * 5)) c h;
    --darken-6: calc(l * 100% - (8.5% * 6)) c h;
    --darken-7: calc(l * 100% - (8.5% * 7)) c h;
    --darken-8: calc(l * 100% - (8.5% * 8)) c h;
    --darken-9: calc(l * 100% - (8.5% * 9)) c h;
    --darken-10: calc(l * 100% - (8.5% * 10)) c h;

    --fade-1000: l c h / 0%;
    --fade-950: l c h / 5%;
    --fade-900: l c h / 10%;
    --fade-850: l c h / 15%;
    --fade-800: l c h / 20%;
    --fade-750: l c h / 25%;
    --fade-700: l c h / 30%;
    --fade-650: l c h / 35%;
    --fade-600: l c h / 40%;
    --fade-550: l c h / 45%;
    --fade-500: l c h / 50%;
    --fade-450: l c h / 55%;
    --fade-400: l c h / 60%;
    --fade-350: l c h / 65%;
    --fade-300: l c h / 70%;
    --fade-250: l c h / 75%;
    --fade-200: l c h / 80%;
    --fade-150: l c h / 85%;
    --fade-100: l c h / 90%;
    --fade-50: l c h / 95%;
    --fade-0: l c h / 100%;

    --base-50: 0.978 0.011;
    --base-100: 0.936 0.033;
    --base-200: 0.851 0.077;
    --base-300: 0.767 0.128;
    --base-400: 0.682 0.155;
    --base-500: 0.598 0.135;
    --base-600: 0.513 0.116;
    --base-700: 0.429 0.097;
    --base-800: 0.344 0.078;
    --base-900: 0.260 0.059;
    --base-950: 0.218 0.049;

    --base-50-foreground: 0.25 0.18;
    --base-100-foreground: 0.2 0.18;
    --base-200-foreground: 0.15 0.18;
    --base-300-foreground: 0.1 0.02;
    --base-400-foreground: 1 0.03;
    --base-500-foreground: 1 0.04;
    --base-600-foreground: 1 0.05;
    --base-700-foreground: 1 0.06;
    --base-800-foreground: 1 0.07;
    --base-900-foreground: 1 0.08;
    --base-950-foreground: 1 0.09;
}

/* --> COLOR ABBREVIATION */
:root {
    --primary-50: var(--base-50) var(--primary-hue);
    --primary-100: var(--base-100) var(--primary-hue);
    --primary-200: var(--base-200) var(--primary-hue);
    --primary-300: var(--base-300) var(--primary-hue);
    --primary-400: var(--base-400) var(--primary-hue);
    --primary-500: var(--base-500) var(--primary-hue);
    --primary-600: var(--base-600) var(--primary-hue);
    --primary-700: var(--base-700) var(--primary-hue);
    --primary-800: var(--base-800) var(--primary-hue);
    --primary-900: var(--base-900) var(--primary-hue);
    --primary-950: var(--base-950) var(--primary-hue);
    --primary-50-foreground: var(--base-50-foreground) var(--primary-hue);
    --primary-100-foreground: var(--base-100-foreground) var(--primary-hue);
    --primary-200-foreground: var(--base-200-foreground) var(--primary-hue);
    --primary-300-foreground: var(--base-300-foreground) var(--primary-hue);
    --primary-400-foreground: var(--base-400-foreground) var(--primary-hue);
    --primary-500-foreground: var(--base-500-foreground) var(--primary-hue);
    --primary-600-foreground: var(--base-600-foreground) var(--primary-hue);
    --primary-700-foreground: var(--base-700-foreground) var(--primary-hue);
    --primary-800-foreground: var(--base-800-foreground) var(--primary-hue);
    --primary-900-foreground: var(--base-900-foreground) var(--primary-hue);
    --primary-950-foreground: var(--base-950-foreground) var(--primary-hue);

    --accent-50: var(--base-50) var(--accent-hue);
    --accent-100: var(--base-100) var(--accent-hue);
    --accent-200: var(--base-200) var(--accent-hue);
    --accent-300: var(--base-300) var(--accent-hue);
    --accent-400: var(--base-400) var(--accent-hue);
    --accent-500: var(--base-500) var(--accent-hue);
    --accent-600: var(--base-600) var(--accent-hue);
    --accent-700: var(--base-700) var(--accent-hue);
    --accent-800: var(--base-800) var(--accent-hue);
    --accent-900: var(--base-900) var(--accent-hue);
    --accent-950: var(--base-950) var(--accent-hue);
    --accent-50-foreground: var(--base-50-foreground) var(--accent-hue);
    --accent-100-foreground: var(--base-100-foreground) var(--accent-hue);
    --accent-200-foreground: var(--base-200-foreground) var(--accent-hue);
    --accent-300-foreground: var(--base-300-foreground) var(--accent-hue);
    --accent-400-foreground: var(--base-400-foreground) var(--accent-hue);
    --accent-500-foreground: var(--base-500-foreground) var(--accent-hue);
    --accent-600-foreground: var(--base-600-foreground) var(--accent-hue);
    --accent-700-foreground: var(--base-700-foreground) var(--accent-hue);
    --accent-800-foreground: var(--base-800-foreground) var(--accent-hue);
    --accent-900-foreground: var(--base-900-foreground) var(--accent-hue);
    --accent-950-foreground: var(--base-950-foreground) var(--accent-hue);

    --default-0: 1 0 var(--default-hue);
    --default-50: 0.978 0 var(--default-hue);
    --default-100: 0.936 0 var(--default-hue);
    --default-200: 0.851 0 var(--default-hue);
    --default-300: 0.767 0 var(--default-hue);
    --default-400: 0.682 0 var(--default-hue);
    --default-500: 0.598 0 var(--default-hue);
    --default-600: 0.513 0 var(--default-hue);
    --default-700: 0.429 0 var(--default-hue);
    --default-800: 0.344 0 var(--default-hue);
    --default-900: 0.260 0 var(--default-hue);
    --default-950: 0.218 0 var(--default-hue);
    --default-1000: 0 0 var(--default-hue);
    --default-0-foreground: 0 0 var(--default-hue);
    --default-50-foreground: 0.25 0 var(--default-hue);
    --default-100-foreground: 0.2 0 var(--default-hue);
    --default-200-foreground: 0.15 0 var(--default-hue);
    --default-300-foreground: 0.1 0 var(--default-hue);
    --default-400-foreground: 1 0 var(--default-hue);
    --default-500-foreground: 1 0 var(--default-hue);
    --default-600-foreground: 1 0 var(--default-hue);
    --default-700-foreground: 1 0 var(--default-hue);
    --default-800-foreground: 1 0 var(--default-hue);
    --default-900-foreground: 1 0 var(--default-hue);
    --default-950-foreground: 1 0 var(--default-hue);
    --default-1000-foreground: 1 0 var(--default-hue);

    --success-50: var(--base-50) var(--success-hue);
    --success-100: var(--base-100) var(--success-hue);
    --success-200: var(--base-200) var(--success-hue);
    --success-300: var(--base-300) var(--success-hue);
    --success-400: var(--base-400) var(--success-hue);
    --success-500: var(--base-500) var(--success-hue);
    --success-600: var(--base-600) var(--success-hue);
    --success-700: var(--base-700) var(--success-hue);
    --success-800: var(--base-800) var(--success-hue);
    --success-900: var(--base-900) var(--success-hue);
    --success-950: var(--base-950) var(--success-hue);
    --success-50-foreground: var(--base-50-foreground) var(--success-hue);
    --success-100-foreground: var(--base-100-foreground) var(--success-hue);
    --success-200-foreground: var(--base-200-foreground) var(--success-hue);
    --success-300-foreground: var(--base-300-foreground) var(--success-hue);
    --success-400-foreground: var(--base-400-foreground) var(--success-hue);
    --success-500-foreground: var(--base-500-foreground) var(--success-hue);
    --success-600-foreground: var(--base-600-foreground) var(--success-hue);
    --success-700-foreground: var(--base-700-foreground) var(--success-hue);
    --success-800-foreground: var(--base-800-foreground) var(--success-hue);
    --success-900-foreground: var(--base-900-foreground) var(--success-hue);
    --success-950-foreground: var(--base-950-foreground) var(--success-hue);

    --warning-50: var(--base-50) var(--warning-hue);
    --warning-100: var(--base-100) var(--warning-hue);
    --warning-200: var(--base-200) var(--warning-hue);
    --warning-300: var(--base-300) var(--warning-hue);
    --warning-400: var(--base-400) var(--warning-hue);
    --warning-500: var(--base-500) var(--warning-hue);
    --warning-600: var(--base-600) var(--warning-hue);
    --warning-700: var(--base-700) var(--warning-hue);
    --warning-800: var(--base-800) var(--warning-hue);
    --warning-900: var(--base-900) var(--warning-hue);
    --warning-950: var(--base-950) var(--warning-hue);
    --warning-50-foreground: var(--base-50-foreground) var(--warning-hue);
    --warning-100-foreground: var(--base-100-foreground) var(--warning-hue);
    --warning-200-foreground: var(--base-200-foreground) var(--warning-hue);
    --warning-300-foreground: var(--base-300-foreground) var(--warning-hue);
    --warning-400-foreground: var(--base-400-foreground) var(--warning-hue);
    --warning-500-foreground: var(--base-500-foreground) var(--warning-hue);
    --warning-600-foreground: var(--base-600-foreground) var(--warning-hue);
    --warning-700-foreground: var(--base-700-foreground) var(--warning-hue);
    --warning-800-foreground: var(--base-800-foreground) var(--warning-hue);
    --warning-900-foreground: var(--base-900-foreground) var(--warning-hue);
    --warning-950-foreground: var(--base-950-foreground) var(--warning-hue);

    --danger-50: var(--base-50) var(--danger-hue);
    --danger-100: var(--base-100) var(--danger-hue);
    --danger-200: var(--base-200) var(--danger-hue);
    --danger-300: var(--base-300) var(--danger-hue);
    --danger-400: var(--base-400) var(--danger-hue);
    --danger-500: var(--base-500) var(--danger-hue);
    --danger-600: var(--base-600) var(--danger-hue);
    --danger-700: var(--base-700) var(--danger-hue);
    --danger-800: var(--base-800) var(--danger-hue);
    --danger-900: var(--base-900) var(--danger-hue);
    --danger-950: var(--base-950) var(--danger-hue);
    --danger-50-foreground: var(--base-50-foreground) var(--danger-hue);
    --danger-100-foreground: var(--base-100-foreground) var(--danger-hue);
    --danger-200-foreground: var(--base-200-foreground) var(--danger-hue);
    --danger-300-foreground: var(--base-300-foreground) var(--danger-hue);
    --danger-400-foreground: var(--base-400-foreground) var(--danger-hue);
    --danger-500-foreground: var(--base-500-foreground) var(--danger-hue);
    --danger-600-foreground: var(--base-600-foreground) var(--danger-hue);
    --danger-700-foreground: var(--base-700-foreground) var(--danger-hue);
    --danger-800-foreground: var(--base-800-foreground) var(--danger-hue);
    --danger-900-foreground: var(--base-900-foreground) var(--danger-hue);
    --danger-950-foreground: var(--base-950-foreground) var(--danger-hue);

    --info-50: var(--base-50) var(--info-hue);
    --info-100: var(--base-100) var(--info-hue);
    --info-200: var(--base-200) var(--info-hue);
    --info-300: var(--base-300) var(--info-hue);
    --info-400: var(--base-400) var(--info-hue);
    --info-500: var(--base-500) var(--info-hue);
    --info-600: var(--base-600) var(--info-hue);
    --info-700: var(--base-700) var(--info-hue);
    --info-800: var(--base-800) var(--info-hue);
    --info-900: var(--base-900) var(--info-hue);
    --info-950: var(--base-950) var(--info-hue);
    --info-50-foreground: var(--base-50-foreground) var(--info-hue);
    --info-100-foreground: var(--base-100-foreground) var(--info-hue);
    --info-200-foreground: var(--base-200-foreground) var(--info-hue);
    --info-300-foreground: var(--base-300-foreground) var(--info-hue);
    --info-400-foreground: var(--base-400-foreground) var(--info-hue);
    --info-500-foreground: var(--base-500-foreground) var(--info-hue);
    --info-600-foreground: var(--base-600-foreground) var(--info-hue);
    --info-700-foreground: var(--base-700-foreground) var(--info-hue);
    --info-800-foreground: var(--base-800-foreground) var(--info-hue);
    --info-900-foreground: var(--base-900-foreground) var(--info-hue);
    --info-950-foreground: var(--base-950-foreground) var(--info-hue);
}