@import url("/lib/slate/slate.css");
@import url("/css/components/header.css");
@import url("/css/components/hero.css");
@import url("/css/components/company-story.css");
@import url("/css/components/principles.css");
@import url("/css/components/product-showcase.css");
@import url("/css/components/product-index.css");
@import url("/css/components/contact.css");
@import url("/css/components/footer.css");

:root {
    color-scheme: dark;
    --bg: #121713;
    --surface: #1b231d;
    --surface-raised: #202a22;
    --line: #303a32;
    --text: #ecf0e8;
    --muted: #a5afa5;
    --accent: #b6e07c;
}

[data-sl-theme="dark"] {
    --sl-color-background-canvas: var(--bg);
    --sl-color-background-surface: var(--surface);
    --sl-color-background-raised: var(--surface-raised);
    --sl-color-border-default: var(--line);
    --sl-color-text-primary: var(--text);
    --sl-color-text-secondary: var(--muted);
    --sl-color-accent-default: var(--accent);
    --sl-color-accent-hover: #c8eca0;
    --sl-color-accent-text: var(--accent);
    --sl-color-focus-ring: var(--accent);
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body.sl-root {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
}

.page-shell {
    width: min(1120px, calc(100% - 64px));
    margin-inline: auto;
}

a {
    color: inherit;
}

a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@media (max-width: 700px) {
    .page-shell {
        width: min(100% - 40px, 560px);
    }
}