/* ==========================================================================
   SiteKit — design tokens + base styles
   Ported from the original concept design system. Loaded on every page.
   ========================================================================== */

:root {
    /* Surfaces & neutrals */
    --surface: #fcf9f5;
    --surface-dim: #dcdad6;
    --surface-bright: #fcf9f5;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f6f3ef;
    --surface-container: #f0ede9;
    --surface-container-high: #ebe8e4;
    --surface-container-highest: #e5e2de;
    --background: #fcf9f5;

    /* Text */
    --on-surface: #1c1c19;
    --on-surface-variant: #434842;
    --on-background: #1c1c19;
    --outline: #747871;
    --outline-variant: #c3c8bf;

    /* Primary — deep forest */
    --primary: #243624;
    --on-primary: #ffffff;
    --primary-container: #3a4d39;
    --on-primary-container: #a7bda4;
    --primary-fixed: #d2e9ce;
    --primary-fixed-dim: #b7cdb2;
    --on-primary-fixed: #0e1f0f;
    --on-primary-fixed-variant: #394b38;

    /* Secondary — clay / terracotta */
    --secondary: #80543d;
    --on-secondary: #ffffff;
    --secondary-container: #ffc5a8;
    --on-secondary-container: #7a5038;
    --secondary-fixed: #ffdbca;
    --secondary-fixed-dim: #f3ba9d;
    --on-secondary-fixed: #311303;
    --on-secondary-fixed-variant: #653d27;

    /* Tertiary — wild sage */
    --tertiary: #2a360c;
    --on-tertiary: #ffffff;
    --tertiary-container: #404d21;
    --on-tertiary-container: #aebe86;
    --tertiary-fixed: #d9e9af;
    --tertiary-fixed-dim: #bdcd95;

    /* Brand accents */
    --deep-forest: #1E2A1E;
    --soft-clay: #D9BBA9;
    --natural-stone: #969696;
    --moss-shadow: #4F6348;

    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;
    --success: #3a6b35;

    /* Theme-adaptive tokens (light defaults; overridden in the dark theme below).
       --primary-bright is the brand primary when used as TEXT — same as --primary
       in light, a lighter tint in dark. The rest replace what used to be hardcoded
       literals so a single token flips them for dark mode. */
    --primary-bright: var(--primary);
    --row-highlight: #f3f6ee;
    --focus-ring: rgba(36, 54, 36, 0.12);
    --alert-success-bg: #e9f1e6;
    --alert-success-fg: #234d1f;
    --alert-success-bd: #bcd6b3;
    --alert-error-bd: #f3b5b1;
    --alert-info-bg: #eef1f5;
    --alert-info-fg: #33414f;
    --alert-info-bd: #cdd6e0;
    --hero-panel-bg: rgba(252, 249, 245, 0.86);
    --hero-panel-bd: rgba(150, 150, 150, 0.2);
    --select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23747871' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");

    /* Typography */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Spacing scale (8px base) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;
    --space-12: 96px;
    --container-max: 1280px;
    --gutter: 24px;
    --margin-page: 48px;
    --margin-page-mobile: 16px;

    /* Radii */
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
    --radius-full: 9999px;

    /* Elevation (kept soft / tonal per the brand) */
    --shadow-sm: 0 1px 2px rgba(28, 28, 25, 0.04);
    --shadow-md: 0 4px 24px rgba(28, 28, 25, 0.06);
    --shadow-lg: 0 18px 48px rgba(30, 42, 30, 0.18);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--on-background);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--primary-bright);
    margin: 0;
    font-weight: 600;
}

p {
    margin: 0;
}

a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--on-secondary-container);
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
    border-radius: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Shared layout primitives */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--margin-page-mobile);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--margin-page);
    }
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--secondary);
    display: block;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    background: var(--primary);
    color: var(--on-primary);
    padding: 10px 16px;
    border-radius: var(--radius);
    z-index: 200;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 8px;
    color: var(--on-primary);
}

/* ==========================================================================
   Dark theme
   --------------------------------------------------------------------------
   Applied when the visitor has explicitly chosen dark (html[data-theme="dark"],
   set server-side from the `theme` cookie) OR when their device prefers dark and
   they have NOT explicitly chosen light. Both blocks hold identical values — the
   only place dark differs is these token overrides, so components stay theme-
   agnostic (they reference the tokens, which flip here).

   Brand HUE tokens (--primary / --on-primary / containers) are deliberately NOT
   flipped — they stay on-brand so filled panels/buttons (sidebar, footer,
   buttons) read correctly on a dark page. --primary-bright is the light tint used
   wherever the brand primary appears as TEXT. --primary-bright / --secondary /
   --on-secondary-container defaults are overridden per-deployment by
   BrandingService for custom brand colours.
   ========================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;

    --surface: #16150f;
    --surface-dim: #100f0a;
    --surface-bright: #312f29;
    --surface-container-lowest: #100f0a;
    --surface-container-low: #1b1a14;
    --surface-container: #1f1e18;
    --surface-container-high: #2a2822;
    --surface-container-highest: #34322c;
    --background: #16150f;

    --on-surface: #e8e4db;
    --on-surface-variant: #c4c0b6;
    --on-background: #e8e4db;
    --outline: #918d83;
    --outline-variant: #45433c;

    --primary-bright: #a6c2a1;
    --secondary: #d8b29a;
    --on-secondary-container: #eccdbb;

    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;
    --success: #8fd58a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.65);

    --row-highlight: rgba(166, 194, 161, 0.10);
    --focus-ring: rgba(166, 194, 161, 0.28);
    --alert-success-bg: rgba(143, 213, 138, 0.13);
    --alert-success-fg: #b9e6b3;
    --alert-success-bd: rgba(143, 213, 138, 0.32);
    --alert-error-bd: rgba(255, 180, 171, 0.32);
    --alert-info-bg: rgba(125, 160, 205, 0.14);
    --alert-info-fg: #cdd9ee;
    --alert-info-bd: rgba(125, 160, 205, 0.32);
    --hero-panel-bg: rgba(20, 19, 14, 0.82);
    --hero-panel-bd: rgba(255, 255, 255, 0.10);
    --select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a9a59b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;

        --surface: #16150f;
        --surface-dim: #100f0a;
        --surface-bright: #312f29;
        --surface-container-lowest: #100f0a;
        --surface-container-low: #1b1a14;
        --surface-container: #1f1e18;
        --surface-container-high: #2a2822;
        --surface-container-highest: #34322c;
        --background: #16150f;

        --on-surface: #e8e4db;
        --on-surface-variant: #c4c0b6;
        --on-background: #e8e4db;
        --outline: #918d83;
        --outline-variant: #45433c;

        --primary-bright: #a6c2a1;
        --secondary: #d8b29a;
        --on-secondary-container: #eccdbb;

        --error: #ffb4ab;
        --on-error: #690005;
        --error-container: #93000a;
        --on-error-container: #ffdad6;
        --success: #8fd58a;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.65);

        --row-highlight: rgba(166, 194, 161, 0.10);
        --focus-ring: rgba(166, 194, 161, 0.28);
        --alert-success-bg: rgba(143, 213, 138, 0.13);
        --alert-success-fg: #b9e6b3;
        --alert-success-bd: rgba(143, 213, 138, 0.32);
        --alert-error-bd: rgba(255, 180, 171, 0.32);
        --alert-info-bg: rgba(125, 160, 205, 0.14);
        --alert-info-fg: #cdd9ee;
        --alert-info-bd: rgba(125, 160, 205, 0.32);
        --hero-panel-bg: rgba(20, 19, 14, 0.82);
        --hero-panel-bd: rgba(255, 255, 255, 0.10);
        --select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a9a59b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    }
}

/* Theme toggle button (used in every layout header). */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    border: 1px solid var(--outline-variant); border-radius: var(--radius-full);
    background: transparent; color: var(--primary-bright); cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { background-color: var(--surface-container); }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle__sun { display: none; }
html[data-theme="dark"] .theme-toggle__moon { display: none; }
html[data-theme="dark"] .theme-toggle__sun { display: inline-flex; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-toggle__moon { display: none; }
    html:not([data-theme="light"]) .theme-toggle__sun { display: inline-flex; }
}