/* Self-hosted variable fonts (SIL OFL, licences next to the files in /fonts). */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/*
 * Design tokens: the only place colours, type, spacing and scene images are defined.
 * Every colour is written once as light-dark(<day>, <night>). The active scheme comes from
 * <html data-theme>, set from the theme cookie, or from the OS setting when there is no cookie.
 */

:root {
    color-scheme: light dark;

    /* Palette */
    --sea-50: #eef6fa;
    --sea-100: #d6eaf3;
    --sea-300: #7fb6d0;
    --sea-500: #1f6f99;
    --sea-700: #134a69;
    --sea-900: #0a2233;
    --sea-950: #06141f;
    --kelp-400: #5fb38a;
    --kelp-600: #2e7d5b;
    --wood-300: #d9b48a;
    --wood-600: #8a5a33;
    --lantern-300: #ffd27a;
    --lantern-500: #f2a93b;
    --granite-100: #eef0f2;
    --granite-400: #8a949c;
    --granite-700: #3b444b;

    /* Semantic colours: use these in components, never the palette directly */
    --color-bg: light-dark(var(--sea-50), var(--sea-950));
    --color-surface: light-dark(#ffffff, var(--sea-900));
    --color-surface-raised: light-dark(#ffffff, #0f2e44);
    --color-text: light-dark(var(--sea-950), var(--sea-50));
    --color-text-muted: light-dark(var(--granite-700), var(--sea-300));
    --color-border: light-dark(var(--sea-100), #1c3d55);
    --color-accent: light-dark(var(--kelp-600), var(--lantern-300));
    --color-accent-contrast: light-dark(#ffffff, var(--sea-950));
    --color-link: light-dark(var(--sea-500), var(--lantern-300));
    --color-focus: light-dark(var(--sea-500), var(--lantern-500));
    --color-header-bg: light-dark(rgb(255 255 255 / 0.85), rgb(6 20 31 / 0.85));
    --color-scene-text: light-dark(var(--sea-950), #fff8e8);
    --color-scene-veil: light-dark(rgb(238 246 250 / 0.85), rgb(6 20 31 / 0.8));
    --color-danger: light-dark(#b32121, #ff8a80);
    --color-input-bg: light-dark(#ffffff, #0b2232);
    --color-input-border: light-dark(var(--granite-400), #2d5571);
    --color-selected-bg: light-dark(#eaf5ef, #13324a);

    /* Product paint swatches (configurator ids, see Catalog/ConfigOptions.cs); same in both themes */
    --swatch-white: #f4f6f5;
    --swatch-sea: var(--sea-500);
    --swatch-granite: var(--granite-400);
    --swatch-kelp: var(--kelp-600);
    --swatch-varnished: linear-gradient(135deg, var(--wood-300), var(--wood-600));

    /* Scenes: default day/night photo pair behind page banners (PageShell overrides per page) */
    --scene-day: url("../img/scenes/home-day.webp");
    --scene-night: url("../img/scenes/home-night.webp");

    /* Typography */
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --text-hero: clamp(2.25rem, 1.5rem + 3vw, 4rem);
    --leading: 1.6;

    /* Spacing, shape, motion */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(10 34 51 / 0.08);
    --container-width: 72rem;
    --header-height: 4rem;
    --nav-breakpoint: 56rem; /* documentation only: media queries can't read custom properties */
    --transition: 160ms ease;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}