:root {
    /* COLOR SCHEME */
    color-scheme: light dark;

    /* NEUTRALS */
    --white:       light-dark(#FFFFFF, #202833);
    --light:       light-dark(#E5E5E5, #314052);
    --dark:        light-dark(#707071, #A7B4C2);
    --black:       light-dark(#383838, #F3F7FB);
    --background:  light-dark(#F6F8FA, #0F1722);
    
    /* COLORS */
    --primary:      light-dark(#123054, #8FB3D9);
    --secondary:    light-dark(#327EC0, #63B0EE);
    --info:         light-dark(#23A6F0, #6BCFFF);
    --success:      light-dark(#2DC071, #5FD89E);
    --warning:      light-dark(#E77C40, #F4A865);
    --error:        light-dark(#E0232E, #FF6E7B);

    /* SHADOW */
    --shadow-color: light-dark(#0000001A, #00000066);
    --shadow-sm: 0px 2px 4px 0px var(--shadow-color);
    --shadow-md: 0px 2px 8px 0px var(--shadow-color);
    --shadow-lg: 0px 4px 16px 0px var(--shadow-color);

    /* SIZE */
    --header-size-xl: 64px;
    --header-size-lg: 48px;
    --header-size-md: 36px;
    --header-size-sm: 24px;
    --header-size-xs: 20px;

    --font-size-xl: 20px;
    --font-size-lg: 18px;
    --font-size-md: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;

    /* SPACE */
    --space-xl: 30px;
    --space-lg: 25px;
    --space-md: 20px;
    --space-sm: 15px;
    --space-xs: 10px;

    /* RADIUS */
    --radius-xl:        80px;
    --radius-lg:        40px;
    --radius-md:        20px;
    --radius-sm:        10px;
    --radius-xs:        5px;
    --radius-circle:    50%;
    --radius-pill:      9999px;

    /* TRANSITION */
    --transition-xfast:     50ms;
    --transition-fast:      150ms;
    --transition-medium:    250ms;
    --transition-slow:      500ms;
    --transition-xslow:     1000ms;

    /* BREAKPOINTS */
    --break-xl: 1440px;
    --break-lg: 1025px;
    --break-md: 769px;
    --break-sm: 577px;
    --break-xm: 320px;

    /* Z-INDEX */
    --z-index-avatar: 4;
    --z-index-dropdown: 5;
    --z-index-toast:    6;
    --z-index-tooltip:  7;
    --z-index-drawer:   8;
    --z-index-modal:    9;
    --z-index-alert:    10;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    interpolate-size: allow-keywords;
}

h1 { font-size: var(--header-size-xl); font-weight: 700; font-family: 'Barlow', sans-serif; text-wrap: pretty; }
h2 { font-size: var(--header-size-lg); font-weight: 700; font-family: 'Barlow', sans-serif; text-wrap: pretty; }
h3 { font-size: var(--header-size-md); font-weight: 700; font-family: 'Barlow', sans-serif; text-wrap: pretty; }
h4 { font-size: var(--header-size-sm); font-weight: 700; font-family: 'Poppins', sans-serif; text-wrap: pretty; }
h5 { font-size: var(--header-size-xs); font-weight: 700; font-family: 'Poppins', sans-serif; text-wrap: pretty; }

p { padding: calc(var(--space-xs) / 2) 0; text-wrap: pretty; }

md-block {
    display: block;
    white-space: normal;

    > :first-child { margin-top: 0; }
    > :last-child { margin-bottom: 0; }

    h1 { font-size: calc(var(--header-size-sm) * 1.2); }
    h2 { font-size: calc(var(--header-size-sm) * 1.1); }
    h3 { font-size: calc(var(--header-size-sm) * 1.0); }
    h4 { font-size: calc(var(--header-size-sm) * 0.9); }
    h5 { font-size: calc(var(--header-size-sm) * 0.8); }

    p, ul, ol, pre, 
    blockquote, table, hr {
        margin: 0 0 var(--space-sm);
    }

    ul, ol {
        padding-left: calc(var(--space-md) + var(--space-xs));
    }

    li + li {
        margin-top: calc(var(--space-xs) / 2);
    }

    a {
        color: var(--primary);
        text-decoration: underline;
    }

    pre, code {
        font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    }

    code {
        padding: 0 0.35em;
        background-color: color-mix(in srgb, var(--black) 8%, transparent);
        border-radius: var(--radius-xs);
    }

    pre {
        overflow-x: auto;
        padding: var(--space-sm);
        background-color: color-mix(in srgb, var(--black) 6%, var(--white));
        border-radius: var(--radius-sm);

        code {
            padding: 0;
            background-color: transparent;
        }
    }

    blockquote {
        padding-left: var(--space-sm);
        border-left: 2px solid color-mix(in srgb, var(--primary) 35%, var(--light));
        color: color-mix(in srgb, var(--dark) 85%, var(--black));
    }

    table {
        width: 100%;
        font-size: var(--font-size-sm);
        border: 2px solid var(--black);
        border-radius: var(--radius-xs);
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;

        th:first-child,
        td:first-child { border-left: none; }
        th:last-child,
        td:last-child { border-right: none; }
        tr:first-child th { border-top: none; }
        tr:last-child td { border-bottom: none; }
    }

    th { white-space: nowrap; }
    th, td {
        padding: calc(var(--space-xs) * 0.75) var(--space-xs);
        text-align: left;
        border: 1px solid var(--black);
    }
}

html {
    height: 100%;

    /* font-size: 24px; */
    color: var(--black);
    scrollbar-width: 6px;
    scrollbar-color: var(--dark) transparent;

    > body {
        container-type: inline-size;
        font-size: var(--font-size-md);
        font-weight: 400;
        font-family: 'Poppins', sans-serif;
        color: var(--black);
    }
}

img { width: 100%; display: block; }

hr { 
    width: 100%;
    appearance: none;
    outline: none;
    border: none;
    border-top: 2px solid var(--light); 
    &.white     { border-top: 2px solid var(--white); }
    &.black     { border-top: 2px solid var(--black); }
    &.dark      { border-top: 2px solid var(--dark); }
}

[hidden] { display: none !important; }

.divide-elements {
    > * {
        border-top: 1px solid var(--light); 
        border-bottom: 1px solid var(--light);
    } 
    >:first-child { border-top: none; }
    >:last-child { border-bottom: none; }
    &.first { >:first-child { border-top: 2px solid var(--light); } }
    &.last { >:last-child { border-bottom: 2px solid var(--light); } }
}

.space-nowrap { white-space: nowrap; }
.space-ellipsis {
    width: 100%;
    min-width: 0;
    min-inline-size: 0;
}

.space-xl { 
    padding: var(--space-xl);
    &.sides { padding: 0 var(--space-xl); }
    &.tops { padding: var(--space-xl) 0; }
}
.space-lg { 
    padding: var(--space-lg);
    &.sides { padding: 0 var(--space-lg); }
    &.tops { padding: var(--space-lg) 0; }
}
.space-md { 
    padding: var(--space-md);
    &.sides { padding: 0 var(--space-md); }
    &.tops { padding: var(--space-md) 0; }
}
.space-sm { 
    padding: var(--space-sm);
    &.sides { padding: 0 var(--space-sm); }
    &.tops { padding: var(--space-sm) 0; }
}
.space-xs { 
    padding: var(--space-xs);
    &.sides { padding: 0 var(--space-xs); }
    &.tops { padding: var(--space-xs) 0; }
}

.font-size-xl { font-size: var(--font-size-xl); }
.font-size-lg { font-size: var(--font-size-lg); }
.font-size-md { font-size: var(--font-size-md); }
.font-size-sm { font-size: var(--font-size-sm); }
.font-size-xs { font-size: var(--font-size-xs); }

.font-weight-bold       { font-weight: 700; }
.font-weight-semibold   { font-weight: 600; }
.font-weight-heavy      { font-weight: 500; }
.font-weight-normal     { font-weight: 400; }
.font-weight-light      { font-weight: 300; }

.font-barlow    { font-family: 'Barlow'; }
.font-poppins   { font-family: 'Poppins'; }

.line-height-dense  { line-height: 1.4; }
.line-height-normal { line-height: 1.8; }
.line-height-loose  { line-height: 2.2; }

.status-info {
    color: var(--info);
    background-color: var(--info);
    background-color: color-mix(in srgb, var(--info) 10%, var(--white));
    border: 2px solid var(--info); 
}
.status-success {
    color: var(--success);
    background-color: var(--success);
    background-color: color-mix(in srgb, var(--success) 10%, var(--white));
    border: 2px solid var(--success); 
}
.status-warning {
    color: var(--warning);
    background-color: var(--warning);
    background-color: color-mix(in srgb, var(--warning) 10%, var(--white));
    border: 2px solid var(--warning); 
}
.status-error {
    color: var(--error);
    background-color: var(--error);
    background-color: color-mix(in srgb, var(--error) 10%, var(--white));
    border: 2px solid var(--error); 
}
.status-system {
    color: var(--black);
    background-color: var(--black);
    background-color: color-mix(in srgb, var(--black) 10%, var(--white));
    border: 2px solid var(--black); 
}

.color-primary      { color: var(--primary);    fill: var(--primary); }
.color-secondary    { color: var(--secondary);  fill: var(--secondary); }
.color-light        { color: var(--light);      fill: var(--light); }
.color-dark         { color: var(--dark);       fill: var(--dark); }
.color-white        { color: var(--white);      fill: var(--white); }
.color-black        { color: var(--black);      fill: var(--black); }
.color-info         { color: var(--info);       fill: var(--info); }
.color-success      { color: var(--success);    fill: var(--success); }
.color-warning      { color: var(--warning);    fill: var(--warning); }
.color-error        { color: var(--error);      fill: var(--error); }

.background-primary     { background-color: var(--primary); }
.background-secondary   { background-color: var(--secondary); }
.background-info        { background-color: var(--info); }
.background-success     { background-color: var(--success); }
.background-warning     { background-color: var(--warning); }
.background-error      { background-color: var(--error); }

.background-white { background-color: var(--white); }
.background-light { background-color: var(--light); }
.background-dark  { background-color: var(--dark); }
.background-black { background-color: var(--black); }
.background-glass {
    background: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.background-card {
    background-color: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.overflow-x {
    overflow-x: auto;
    &.hidden { overflow-x: hidden; }
    &.scroll { overflow-x: scroll; }
}
.overflow-y {
    overflow-y: auto;
    &.hidden { overflow-y: hidden; }
    &.scroll { overflow-x: scroll; }
}
.scrollable { min-height: 0; overflow: hidden; }

.clickable { 
    cursor: pointer; 
    &:hover { color: var(--primary); }
}

.preserve { white-space: pre-wrap; }
.text-wrap {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}
.text-nowrap { white-space: nowrap; }
.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.border { 
    border: 2px solid var(--light); 

    &.primary       { border-color: var(--primary); }
    &.secondary     { border-color: var(--secondary); }
    &.info          { border-color: var(--info); }
    &.success       { border-color: var(--success); }
    &.warning       { border-color: var(--warning); }
    &.error         { border-color: var(--error); }
}

.flex-1         { flex: 1; }
.flex-2         { flex: 2; }
.flex-3         { flex: 3; }
.flex-4         { flex: 4; }
.self-start     { align-self: flex-start; }
.self-end       { align-self: flex-end; }
.self-center    { align-self: center; }

.flex-group {
    display: flex;
    &.inline { display: inline-flex; }

    &.wrap              { flex-wrap: wrap; }
    &.wrap-reverse      { flex-wrap: wrap-reverse; }
    &.row               { flex-direction: row; }
    &.row-reverse       { flex-direction: row-reverse; }
    &.column            { flex-direction: column; }
    &.column-reverse    { flex-direction: column-reverse; }

    &.justify-start         { justify-content: flex-start; }
    &.justify-end           { justify-content: flex-end; }
    &.justify-center        { justify-content: center; }
    &.justify-space-between { justify-content: space-between; }
    &.justify-space-around  { justify-content: space-around; }
    &.justify-space-evenly  { justify-content: space-evenly; }

    &.content-start         { align-content: flex-start; }
    &.content-end           { align-content: flex-end; }
    &.content-center        { align-content: center; }
    &.content-space-between { align-content: space-between; }
    &.content-space-around  { align-content: space-around; }
    &.content-space-evenly  { align-content: space-evenly; }

    &.items-start       { align-items: flex-start; }
    &.items-end         { align-items: flex-end; }
    &.items-center      { align-items: center; }
    &.items-baseline    { align-items: baseline; }
    &.items-stretch     { align-items: stretch; }

    &.gap-xl { gap: var(--space-xl); }
    &.gap-lg { gap: var(--space-lg); }
    &.gap-md { gap: var(--space-md); }
    &.gap-sm { gap: var(--space-sm); }
    &.gap-xs { gap: var(--space-xs); }
}

.placeholder {
    width: 300px; height: 100%;
    background-color: var(--dark);
}

.wrapper { display: contents; }
.wrapper-modal {
    width: min(520px, calc(100vw - (2 * var(--space-lg)))); 
    min-height: auto; 
    max-height: none;
}

.card {
    >header  { grid-area: header; white-space: nowrap; }
    >main    { grid-area: main; }
    >footer  { grid-area: footer; }

    display: grid;
    grid-template-areas:    "header"
                            "main"
                            "footer";
    grid-template-rows:     auto 1fr auto;
    grid-template-columns:  auto;

    &:not(:has(>footer)) {
        grid-template-areas:    "header"
                                "main";
        grid-template-rows:     auto 1fr;
    }

    &:not(:has(>header)) {
        grid-template-areas:    "main"
                                "footer";
        grid-template-rows:     1fr auto;
    }

    &:not(:has(>header)):not(:has(>footer)) {
        grid-template-areas:    "main";
        grid-template-rows:     1fr;
    }

    &.gap-xl { gap: var(--space-xl); }
    &.gap-lg { gap: var(--space-lg); }
    &.gap-md { gap: var(--space-md); }
    &.gap-sm { gap: var(--space-sm); }
    &.gap-xs { gap: var(--space-xs); }
}

.container {
    >header  { grid-area: header; white-space: nowrap; }
    >nav     { grid-area: nav; min-width: 250px; }
    >main    { grid-area: main; }
    >aside   { grid-area: aside; }
    >footer  { grid-area: footer; }

    display: grid;
    grid-template-areas:    "nav    header  aside"
                            "nav    main    aside"
                            "nav    footer  aside";
    grid-template-rows:     auto    1fr    auto;
    grid-template-columns:  min-content auto min-content;

    &:not(:has(>header)) {
        grid-template-areas:    "nav    main    aside"
                                "nav    footer  aside";
        grid-template-rows:     1fr    auto;
        grid-template-columns:  min-content auto min-content;
    }
    &:not(:has(>footer)) {
        grid-template-areas:    "nav    header  aside"
                                "nav    main    aside";
        grid-template-rows:     auto    1fr;
        grid-template-columns:  min-content auto min-content;
    }
    &:not(:has(>header)):not(:has(>footer)) {
        grid-template-areas:    "nav    main    aside";
        grid-template-rows:     1fr;
        grid-template-columns:  min-content auto min-content;
    }

    &:not(:has(>nav)) {
        &:not(:has(>header)) {
            grid-template-areas:    "main    aside"
                                    "footer  aside";
            grid-template-rows:     1fr    auto;
            grid-template-columns:  auto min-content;
        }
        &:not(:has(>footer)) {
            grid-template-areas:    "header  aside"
                                    "main    aside";
            grid-template-rows:     auto    1fr;
            grid-template-columns:  auto min-content;
        }
        &:not(:has(>header)):not(:has(>footer)) {
            grid-template-areas:    "main    aside";
            grid-template-rows:     1fr;
            grid-template-columns:  auto min-content;
        }
    }

    &:not(:has(>aside)) {
        &:not(:has(>header)) {
            grid-template-areas:    "nav    main"
                                    "nav    footer";
            grid-template-rows:     1fr    auto;
            grid-template-columns:  min-content auto;
        }
        &:not(:has(>footer)) {
            grid-template-areas:    "nav    header"
                                    "nav    main";
            grid-template-rows:     auto    1fr;
            grid-template-columns:  min-content auto;
        }
        &:not(:has(>header)):not(:has(>footer)) {
            grid-template-areas:    "nav    main";
            grid-template-rows:     1fr;
            grid-template-columns:  min-content auto;
        }
    }

    &.gap-xl { gap: var(--space-xl); }
    &.gap-lg { gap: var(--space-lg); }
    &.gap-md { gap: var(--space-md); }
    &.gap-sm { gap: var(--space-sm); }
    &.gap-xs { gap: var(--space-xs); }

    @container (max-width: 600px) {
        grid-template-areas:    "nav"
                                "header"
                                "main" 
                                "footer"
                                "aside";
        grid-template-rows: min-content auto 1fr auto min-content;
        grid-template-columns: auto;

        &:not(:has(>header)) {
            grid-template-areas:    "nav"
                                    "main" 
                                    "footer"
                                    "aside";
            grid-template-rows:     min-content 1fr auto min-content;
            grid-template-columns:  auto;
        }
        &:not(:has(>footer)) {
            grid-template-areas:    "nav"
                                    "header"
                                    "main" 
                                    "aside";
            grid-template-rows:     min-content auto 1fr min-content;
            grid-template-columns:  auto;
        }
        &:not(:has(>header)):not(:has(>footer)) {
            grid-template-areas:    "nav"
                                    "main" 
                                    "aside";
            grid-template-rows:     min-content 1fr min-content;
            grid-template-columns:  auto;
        }

        &:not(:has(>nav)) {
            &:not(:has(>header)) {
                grid-template-areas:    "main" 
                                        "footer"
                                        "aside";
                grid-template-rows:     1fr auto min-content;
                grid-template-columns:  auto;
            }
            &:not(:has(>footer)) {
                grid-template-areas:    "header"
                                        "main"
                                        "aside";
                grid-template-rows:     auto 1fr min-content;
                grid-template-columns:  auto;
            }
            &:not(:has(>header)):not(:has(>footer)) {
                grid-template-areas:    "main"
                                        "aside";
                grid-template-rows:     1fr min-content;
                grid-template-columns:  auto;
            }
        }

        &:not(:has(>aside)) {
            &:not(:has(>header)) {
                grid-template-areas:    "nav"
                                        "main" 
                                        "footer";
                grid-template-rows:     min-content 1fr auto;
                grid-template-columns:  auto;
            }
            &:not(:has(>footer)) {
                grid-template-areas:    "nav"
                                        "header"
                                        "main";
                grid-template-rows:     min-content auto 1fr;
                grid-template-columns:  auto;
            }
            &:not(:has(>header)):not(:has(>footer)) {
                grid-template-areas:    "nav"
                                        "main";
                grid-template-rows:     min-content 1fr;
                grid-template-columns:  auto;
            }
        }
    }
}