/* CFTS base: variables, typography, common buttons and shared defaults. */
:root {
    color-scheme: dark;
    --site-bg: #111312;
    --site-panel: #181a18;
    --site-panel-raised: #20231f;
    --site-text: #f2f1eb;
    --site-muted: #a6aaa4;
    --site-line: #30342f;
    --site-accent: #0093d1;
    --site-accent-strong: #8bd7f4;
    --site-accent-soft: #082536;
    --site-accent-warm: #f78f1e;
    --site-shadow: rgba(0, 0, 0, 0.28);
    --site-page: var(--cfts-chrome-page, min(100% - 36px, 1280px));
    --site-section-y: clamp(34px, 4.5vw, 44px);
    --site-grid-gap: 14px;
    --site-card-padding: 18px;
    --site-heading-gap: 22px;
    --site-heading-font: "Segoe UI Light", "Segoe UI", Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
:root {
        color-scheme: light;
        --site-bg: #f5f6f4;
        --site-panel: #ffffff;
        --site-panel-raised: #eef2ee;
        --site-text: #20231f;
        --site-muted: #676d66;
        --site-line: #d9ded6;
        --site-accent: #0077a8;
        --site-accent-strong: #005f85;
        --site-accent-soft: #e4f5fb;
        --site-accent-warm: #c96500;
        --site-shadow: rgba(42, 49, 43, 0.12);
    }
}

:root[data-site-theme="dark"] {
    color-scheme: dark;
    --site-bg: #111312;
    --site-panel: #181a18;
    --site-panel-raised: #20231f;
    --site-text: #f2f1eb;
    --site-muted: #a6aaa4;
    --site-line: #30342f;
    --site-accent: #0093d1;
    --site-accent-strong: #8bd7f4;
    --site-accent-soft: #082536;
    --site-accent-warm: #f78f1e;
    --site-shadow: rgba(0, 0, 0, 0.28);
}

:root[data-site-theme="light"] {
    color-scheme: light;
    --site-bg: #f5f6f4;
    --site-panel: #ffffff;
    --site-panel-raised: #eef2ee;
    --site-text: #20231f;
    --site-muted: #676d66;
    --site-line: #d9ded6;
    --site-accent: #0077a8;
    --site-accent-strong: #005f85;
    --site-accent-soft: #e4f5fb;
    --site-accent-warm: #c96500;
    --site-shadow: rgba(42, 49, 43, 0.12);
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--site-bg);
    color: var(--site-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
}


html[data-document-width="wide"] {
    --site-page: var(--cfts-chrome-page, min(100% - 36px, 1792px));
}

a {
    color: inherit;
}

:root[data-site-theme="dark"] .hero {
    background:
        linear-gradient(90deg, rgba(17, 19, 18, 0.96) 0%, rgba(17, 19, 18, 0.82) 54%, rgba(17, 19, 18, 0.58) 100%),
        linear-gradient(0deg, var(--site-bg) 0%, transparent 34%),
        url("../media/background/network.png") 82% center / cover no-repeat;
}

:root[data-site-theme="light"] .hero {
    background:
        linear-gradient(90deg, rgba(245, 246, 244, 0.98) 0%, rgba(245, 246, 244, 0.88) 57%, rgba(245, 246, 244, 0.72) 100%),
        linear-gradient(0deg, var(--site-bg) 0%, transparent 34%),
        url("../media/background/network.png") 82% center / cover no-repeat;
}

.site-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid var(--site-line);
    border-radius: 6px;
    background: color-mix(in srgb, var(--site-panel) 74%, transparent);
    color: var(--site-accent-strong);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
}

.site-button-primary {
    background: var(--site-accent-soft);
}

.site-button:hover,
.site-button:focus-visible {
    border-color: var(--site-accent-warm);
    color: var(--site-accent-warm);
    outline: 0;
}

@media (max-width: 640px) {
:root {
        --site-page: min(100% - 32px, 1280px);
    }
.site-button,
    .doorway-grid a,
    .service-action {
        width: 100%;
    }
.site-actions,
    .service-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@supports not (background: color-mix(in srgb, black 50%, white)) {
.site-button,
    .signal-list div,
    .service-action,
    .doorway-grid article,
    .error-console {
        background: var(--site-panel);
    }
}