/**
 * Design tokens pulled from the Figma "01 - Brand & Design System" file
 * (Color Palette Showcase + Typography Hierarchy Scale sections, and the
 * navigation-components frame). Every shared component should reference
 * these variables instead of hardcoding hex codes or font sizes, so a
 * future palette/type change only has to happen in one place.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Brand colors */
    --color-primary-green: #0C3B2A;
    --color-dark-green: #071F16;
    --color-champagne-gold: #D4A853;
    --color-light-gold: #E8D5A3;

    /* Neutrals */
    --color-ivory: #FAF7F2;
    --color-warm-white: #FDFCFA;
    --color-stone: #E2DBD0;
    /* Distinct from --color-stone - confirmed from file 02's live public
       pages (card borders, dividers, form field borders) as its own value,
       not a rounding of the design-system stone token. */
    --color-border-light: #EAE6DF;
    --color-light-neutral: #F2EDE6;
    --color-charcoal: #2D2D2D;
    --color-near-black: #1A1A1A;
    --color-white: #FFFFFF;

    /* Status colors (forms, admin) */
    --color-success: #1B7A4B;
    --color-warning: #D4870A;
    --color-error: #C23B22;
    --color-info: #2563A8;

    /* Fonts */
    --font-logo: 'Cormorant Garamond', serif;   /* brand wordmark only */
    --font-heading: 'Playfair Display', serif;  /* H1-H4, page headings */
    --font-body: 'Inter', sans-serif;           /* nav, body copy, UI */

    /* Layout */
    /* One height for the desktop header in both its top-of-page and
       scrolled states - only background/color differ between them now
       (header.css), so there's no longer a separate "sticky" height to
       track. .page-header-spacer and the homepage hero's padding-top both
       read this same variable to reserve exactly the header's real height. */
    --header-height-desktop: 64px;
    --header-height-mobile: 64px;
    --content-max-width: 1440px;
}

/* Baseline reset - without this, the browser's default <body> margin
   pushes full-bleed sections like the hero away from the viewport edges,
   and any element combining width:100% with padding (e.g. the hero search
   panel) renders wider than its container instead of absorbing the padding
   into that width. Individual components have been opting into
   box-sizing: border-box one at a time as this got noticed; this makes it
   the default everywhere instead of relying on every component to remember. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    /* No element identified with an explicit oversized pixel width - every
       hero element checked (search panel, dropdown fields/values, headline)
       is percentage/flex-based and correctly responsive. Without this,
       though, any single element anywhere on the page that overflows by
       even a few px (a box-shadow, a sub-pixel rounding error, anything not
       yet audited) silently grants the whole page horizontal scroll - body
       should never scroll horizontally regardless of what causes it. */
    overflow-x: hidden;
}