/* Design tokens, reset, fonts, and base element styling.
 *
 * Ported from the Isoastra UI vanilla-extract theme/base so the static brochure
 * site matches the production look exactly. Colors and spacing live here as CSS
 * custom properties; component styling lives in site.css. */

:root {
    --color-bg: #0e0e11;
    --color-bg-muted: #141418;
    --color-fg: #e8e6e3;
    --color-fg-muted: #8a8a8a;
    --color-accent: #c9a96e;
    --color-accent-hover: #d4b87a;
    --color-border: #1a1a1f;
    --color-danger: #d97a6c;

    --font-heading: "Inter Tight", system-ui, sans-serif;
    --font-body: "Literata", Georgia, serif;
}

/* Light theme keeps the same palette with a softened background. Toggled by the
 * footer mode switch, which sets data-theme="light" on the root element. */
:root[data-theme="light"] {
    --color-bg: #f5f4f1;
    --color-bg-muted: #ebe9e3;
    --color-fg: #141418;
    --color-fg-muted: #5c5c5c;
    --color-border: #d9d6cf;
    --color-danger: #b84a3b;
}

@font-face {
    font-family: "Inter Tight";
    src: local("Inter Tight");
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable both-edges;
}

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

a[href^="mailto:"] {
    color: var(--color-accent);
}

a[href^="mailto:"]:hover {
    color: var(--color-accent-hover);
}

::selection {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

.site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}