@import "css/design-tokens.css";
@import "css/layouts.css";
@import "css/utilities.css";
@import "css/fx.css";
@import "css/temp.css";

@import "components/main-header/main-header.css";
@import "components/page-header/page-header.css";
@import "components/activity-list/activity-list.css";
@import "components/tab-bar/tab-bar.css";
@import "components/placeholder/placeholder.css";
@import "components/data-grid/data-grid.css";
@import "components/filter-bar/filter-bar.css";
@import "components/chip/chip.css";
@import "components/meter/meter.css";
@import "components/button/button.css";
@import "components/card/card.css";
@import "components/progress/progress.css";
@import "components/pagination/pagination.css";
@import "components/segment-control/segment-control.css";
@import "components/select/select.css";
@import "components/badge/badge.css";
@import "components/scrim/scrim.css";
@import "components/dialog/dialog.css";
@import "components/page-control/page-control.css";
@import "components/a/a.css";
@import "components/chart/chart.css";
@import "components/forms/forms.css";
@import "components/switch/switch.css";
@import "components/sidebar-menu/sidebar-menu.css";
@import "components/code-viewer/code-viewer.css";

:root {
    --sidebar-width: 22rem;
    --max-width: 80rem;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color-scheme: light dark;
}

form,
.selectable,
code {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

body {
    --nav-height: 3.25rem;
    margin: 0;
    padding: var(--nav-height) var(--sp-l);
    background-color: var(--c-neutral-surface-bg);
}

@media (max-width: 768px) {
    :root {
        font-size: 12px;
    }
}

@media (min-width: 2000px) {
    :root {
        font-size: 20px;
    }
}

/* set default colors */

p,
ul,
li,
h1,
h2,
h3,
h4,
h5 {
    padding: 0 0 var(--sp-4) 0;
    margin: 0;
}

body {
    --c-content-highlight: var(--c-neutral-content-highlight);
    --c-content-highlight-hover: var(--c-neutral-content-highlight-hover);
    --c-content-highlight-pressed: var(--c-neutral-content-highlight-pressed);
    --c-content-highlight-focus: var(--c-neutral-content-highlight-focus);
    --c-content: var(--c-neutral-content);
    --c-content-hover: var(--c-neutral-content-hover);
    --c-content-pressed: var(--c-neutral-content-pressed);
    --c-content-focus: var(--c-neutral-content-focus);
    --c-content-secondary: var(--c-neutral-content-secondary);
    --c-content-secondary-hover: var(--c-neutral-content-secondary-hover);
    --c-content-secondary-pressed: var(--c-neutral-content-secondary-pressed);
    --c-content-secondary-focus: var(--c-neutral-content-secondary-focus);
    --c-trim: var(--c-neutral-trim);
    --c-trim-hover: var(--c-neutral-trim-hover);
    --c-trim-pressed: var(--c-neutral-trim-pressed);
    --c-trim-focus: var(--c-neutral-trim-focus);
    --c-surface: var(--c-neutral-surface);
    --c-surface-hover: var(--c-neutral-surface-hover);
    --c-surface-pressed: var(--c-neutral-surface-pressed);
    --c-surface-focus: var(--c-neutral-surface-focus);
    --c-surface-low: var(--c-neutral-surface-low);
    --c-surface-low-hover: var(--c-neutral-surface-low-hover);
    --c-surface-low-pressed: var(--c-neutral-surface-low-pressed);
    --c-surface-low-focus: var(--c-neutral-surface-low-focus);
    --c-surface-high: var(--c-neutral-surface-high);
    --c-surface-high-hover: var(--c-neutral-surface-high-hover);
    --c-surface-high-pressed: var(--c-neutral-surface-high-pressed);
    --c-surface-high-focus: var(--c-neutral-surface-high-focus);
    --c-surface-bg: var(--c-neutral-surface-bg);
    --c-surface-bg-hover: var(--c-neutral-surface-bg-hover);
    --c-surface-bg-pressed: var(--c-neutral-surface-bg-pressed);
    --c-surface-bg-focus: var(--c-neutral-surface-bg-focus);
}

/* Color Shortcuts */

.c-content-secondary {
    color: var(--c-content-secondary);
}

.c-content-highlight {
    color: var(--c-content-highlight);
}