/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {

    /* ----------------------------------------------------------
       COLOR SCALES
       All raw palette values. Use semantic aliases below in
       component code rather than these scale values directly.
       ---------------------------------------------------------- */

    /* Primary — Deep Forest Green (#2F6B47)
       HSL base: 148° 39% 30% */
    --color-primary-50:  #EBF3EE;  /* near-white green tint  */
    --color-primary-100: #CFDFC4;  /* very light moss         */
    --color-primary-200: #A8C9B0;  /* light sage              */
    --color-primary-300: #7AAE8D;  /* medium sage             */
    --color-primary-400: #529470;  /* medium forest           */
    --color-primary-500: #2F6B47;  /* brand base              */
    --color-primary-600: #245438;  /* dark forest (hover)     */
    --color-primary-700: #1A3F2A;  /* very dark forest        */
    --color-primary-800: #112A1C;  /* near-black green        */
    --color-primary-900: #09150D;  /* deepest forest          */

    /* White — Warm Off-White (#F9F8F6)
       HSL base: 40° 20% 97% */
    --color-white-50:  #FFFFFF;    /* pure white              */
    --color-white-100: #F9F8F6;    /* brand warm off-white    */
    --color-white-200: #F2F0EC;    /* warm near-white         */
    --color-white-300: #E8E5DF;    /* warm white              */
    --color-white-400: #DDD9D1;    /* warm white mid          */

    /* Black — Warm Near-Black (#1A1916)
       HSL base: 40° 8% 9% */
    --color-black-900: #1A1916;    /* brand near-black        */
    --color-black-800: #2C2B27;    /* very dark warm gray     */
    --color-black-700: #3E3D39;    /* dark warm charcoal      */
    --color-black-600: #504F4A;    /* medium-dark charcoal    */
    --color-black-500: #625F59;    /* medium charcoal         */

    /* Secondary — Warm Taupe/Brown (#9F7E69)
       HSL base: 24° 24% 52% */
    --color-secondary-50:  #F7F1ED;  /* palest blush taupe    */
    --color-secondary-100: #EDE0D7;  /* very light taupe      */
    --color-secondary-200: #D8C2B2;  /* light taupe           */
    --color-secondary-300: #C0A28E;  /* medium-light taupe    */
    --color-secondary-400: #B08E78;  /* medium taupe          */
    --color-secondary-500: #9F7E69;  /* brand taupe base      */
    --color-secondary-600: #856657;  /* dark taupe            */
    --color-secondary-700: #654E43;  /* very dark taupe       */
    --color-secondary-800: #463630;  /* near-black taupe      */
    --color-secondary-900: #261E1A;  /* deepest taupe         */

    /* Highlight — Golden Amber (#E6AF2E)
       HSL base: 42° 78% 54% */
    --color-highlight-50:  #FDF6E3;  /* palest amber tint     */
    --color-highlight-100: #FAE9B3;  /* very light amber      */
    --color-highlight-200: #F5D97F;  /* light amber           */
    --color-highlight-300: #EFC454;  /* medium-light amber    */
    --color-highlight-400: #E6AF2E;  /* brand gold base       */
    --color-highlight-500: #C99520;  /* medium amber          */
    --color-highlight-600: #A87A16;  /* dark amber            */
    --color-highlight-700: #81600F;  /* very dark amber       */
    --color-highlight-800: #5A430A;  /* near-black amber      */
    --color-highlight-900: #342605;  /* deepest amber         */

    /* Warm Gray
       HSL base: 35° 8% — bridges green/taupe/gold harmoniously */
    --color-gray-50:  #F4F3F1;    /* near-white warm gray    */
    --color-gray-100: #E8E6E1;    /* very light warm gray    */
    --color-gray-200: #D4D0C8;    /* light warm gray         */
    --color-gray-300: #BFBAB1;    /* medium-light warm gray  */
    --color-gray-400: #A8A39A;    /* medium warm gray        */
    --color-gray-500: #908B82;    /* true mid warm gray      */
    --color-gray-600: #706B63;    /* medium-dark warm gray   */
    --color-gray-700: #524E47;    /* dark warm gray          */
    --color-gray-800: #35322D;    /* very dark warm gray     */
    --color-gray-900: #1F1D1A;    /* near-black warm gray    */

    /* ----------------------------------------------------------
       SEMANTIC COLOR ALIASES
       Components and utilities reference these, not raw scales.
       ---------------------------------------------------------- */

    /* Surfaces & backgrounds */
    --color-bg:            var(--color-white-100);   /* page background      */
    --color-surface:       var(--color-white-50);    /* card/panel surface   */
    --color-surface-raised: var(--color-white-200);  /* elevated surface     */

    /* Borders */
    --color-border:        var(--color-gray-100);    /* default border       */
    --color-border-strong: var(--color-gray-200);    /* stronger border      */

    /* Text */
    --color-text-primary:   var(--color-black-900);  /* headings, body       */
    --color-text-secondary: var(--color-black-600);  /* supporting text      */
    --color-text-tertiary:  var(--color-gray-500);   /* placeholders, hints  */
    --color-text-inverse:   var(--color-white-50);   /* text on dark bg      */

    /* Brand accent — Primary (Green) */
    --color-accent:         var(--color-primary-500);
    --color-accent-light:   var(--color-primary-50);
    --color-accent-mid:     var(--color-primary-200);
    --color-accent-hover:   var(--color-primary-600);
    --color-accent-dark:    var(--color-primary-700);

    /* Brand accent — Highlight (Gold) */
    --color-highlight:      var(--color-highlight-400);
    --color-highlight-light: var(--color-highlight-50);
    --color-highlight-hover: var(--color-highlight-500);
    --color-highlight-dark:  var(--color-highlight-600);

    /* Brand — Secondary (Taupe) */
    --color-secondary:      var(--color-secondary-500);
    --color-secondary-light: var(--color-secondary-50);
    --color-secondary-hover: var(--color-secondary-600);

    /* Typography */
    --font-heading: 'Sora', system-ui, -apple-system, sans-serif;
    --font-body:    'Poppins', system-ui, -apple-system, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  1.875rem;
    --text-3xl:  2.25rem;
    --text-4xl:  3rem;
    --text-5xl:  3.75rem;

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.6;
    --leading-loose:  1.75;

    --tracking-tight:  -0.02em;
    --tracking-normal:  0em;
    --tracking-wide:    0.06em;

    /* Spacing (4px base) */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;
    --space-40: 10rem;

    /* Border radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:  12px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(26, 25, 22, 0.06), 0 1px 2px rgba(26, 25, 22, 0.04);
    --shadow-md: 0 4px 12px rgba(26, 25, 22, 0.08), 0 2px 4px rgba(26, 25, 22, 0.05);

    /* Layout */
    --max-width: 1100px;
    --gutter: clamp(var(--space-6), 5vw, var(--space-16));
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* F9F8F6 = --color-white-100, held at 0.92 opacity for backdrop blur */
    background-color: rgba(249, 248, 246, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.wordmark {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
}

.wordmark span {
    color: var(--color-accent);
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-8);
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.site-footer__copy {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

.site-footer__tagline {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

@media (max-width: 480px) {
    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .site-footer__tagline {
        display: none;
    }
}