@import "./web-component-tables.css";

:root {
    --base-color-h: 210deg;
    --base-color-s: 81%;
    --base-color-l: 53%;

    --base-color: hsl(var(--base-color-h) var(--base-color-s) var(--base-color-l));

    --header-button-color: hsl(calc(var(--base-color-h) - 2deg) calc(var(--base-color-s) - 2%) calc(var(--base-color-l) - 2%));
    --header-button-border-color: hsl(calc(var(--base-color-h) - 11deg) calc(var(--base-color-s) + 11%) calc(var(--base-color-l) + 21%));

    --nav-btn-deg-0-color: var(--base-color);
    --nav-btn-deg-1-color: var(--base-color);
    --nav-btn-deg-2-color: hsl(var(--base-color-h) calc(var(--base-color-s) - 10%) calc(var(--base-color-l) - 10%));
    --nav-btn-deg-3-color: hsl(var(--base-color-h) calc(var(--base-color-s) - 20%) calc(var(--base-color-l) - 20%));

    --base-background-color: #cfd8dc;
    --base-font-color: white;

    --header-height: 3rem;
    --nav-width: 240px;
    --tab-bar-height: 3.5rem;
}

body {
    margin: 0;
}

/* ── Mobile layout ── */
@media (max-width: 767px) {
    main-frame-navigator {
        display: none !important;
    }
}

@media (min-width: 768px) {
    :root {
        --nav-width: 280px;
    }
}