@import "./styles/container.css";

@property --base-unit {
    syntax: "<length>";
    inherits: false;
    initial-value: 8px;
}
@property --color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #000;
}
@property --color-background {
    syntax: "<color>";
    inherits: true;
    initial-value: #fff;
}

:root {
    --spacing-1: calc(var(--base-unit) * 1);
    --spacing-2: calc(var(--base-unit) * 2);
    --container-offset: var(--base-unit);
    --color-light: #eee;
    --color-dark: #27252a;
    --color-text: var(--color-dark);
}

@media (prefers-color-scheme: light) {
    :root,
    html,
    body {
        --color-text: var(--color-dark);
        --color-background: #fff;
        --border: #d5d5d5;

        --text-primary: rgba(38, 38, 51, 1);
        --text-secondary: rgba(133, 136, 158, 1);
        --text-tertiary: rgba(179, 184, 204, 1);
        --text-positive: rgba(85, 193, 81, 1);
        --text-pro-blue: rgba(136, 157, 188, 1);
        --text-pro-blue-hovered: rgba(112, 137, 173, 1);
        --link-default: rgba(0, 119, 255, 1);
        --link-default-hovered: rgba(255, 77, 77, 1);
        --surface-elevated-0: rgba(255, 255, 255, 1);
        --surface-elevated-0-transparent: rgba(255, 255, 255, 0);
        --surface-elevated-100: rgba(255, 255, 255, 1);
        --surface-elevated-200: rgba(255, 255, 255, 1);
        --surface-submerged: rgba(247, 248, 250, 1);
    }
}
@media (prefers-color-scheme: dark) {
    :root,
    html,
    body {
        --color-text: var(--color-light);
        --color-background: var(--color-dark);
        --border: #3a383d;

        --text-primary: rgba(255, 255, 255, 0.9);
        --text-secondary: rgba(255, 255, 255, 0.56);
        --text-tertiary: rgba(255, 255, 255, 0.42);
        --text-positive: rgba(85, 193, 81, 1);
        --text-pro-blue: rgba(135, 153, 186, 1);
        --text-pro-blue-hovered: rgba(167, 183, 215, 1);
        --link-default: rgba(86, 168, 252, 1);
        --link-default-hovered: rgba(251, 92, 86, 1);
        --surface-elevated-0: rgba(22, 22, 23, 1);
        --surface-elevated-100: rgba(28, 28, 30, 1);
        --surface-elevated-200: rgba(47, 47, 50, 1);
        --surface-submerged: rgba(14, 14, 14, 1);
    }
}

html,
body {
    overflow-x: hidden;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
}

@media (min-width: 768px) {
    :root {
        --container-offset: var(--spacing-2);
    }
}
a {
    color: var(--link-default);
}
a:hover {
    color: var(--link-default-hovered);
}

ts-map {
    height: 100dvh;
    position: relative;
}

ts-loader {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0.5em;
    left: 0.5em;
}

ts-search {
    position: fixed;
    top: 0.5em;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    max-width: 80vw;
}