/*
Theme Name: SettlersGrove
Theme URI: https://settlersgrove.co.nz
Author: The Hustle
Author URI: https://thehustle.nz
Description: Custom theme for SettlersGrove — Long Beach, Dunedin, NZ
Version: 2.9.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: settlersgrove
Tags: custom-theme, acf, property
*/

:root {
    /* Surfaces (Mastercard-adapted warm canvas system) */
    --color-canvas:   #F0EBE3;
    --color-surface:  #F7F3EC;
    --color-white:    #FFFFFF;

    /* Ink & Text */
    --color-ink:      #131210;
    --color-ink-mid:  #2D2720;
    --color-muted:    #6B6660;

    /* Brand Accents — no green */
    --color-copper:   #B87240;
    --color-teal:     #2D5475;
    --color-teal-d:   #1E3A52;

    /* System */
    --color-border:   #D6CEC6;
    --color-footer:   #131210;
    --color-error:    #991B1B;

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing (8px grid) */
    --space-1:   8px;
    --space-2:   16px;
    --space-3:   24px;
    --space-4:   32px;
    --space-6:   48px;
    --space-8:   64px;
    --space-10:  80px;
    --space-12:  96px;
    --space-16:  128px;

    /* Radius (Mastercard scale) */
    --radius-xs:   4px;
    --radius-btn:  20px;
    --radius-card: 16px;
    --radius-hero: 40px;
    --radius-pill: 9999px;

    /* Shadows (Mastercard atmospheric) */
    --shadow-nav:  0 4px 24px rgba(0,0,0,0.04);
    --shadow-card: 0 24px 48px rgba(0,0,0,0.08);
    --shadow-lift: 0 8px 32px rgba(0,0,0,0.12);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

ul {
    list-style: none;
}

.container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--space-6);
}

@media (max-width: 768px) {
    .container {
        padding-inline: var(--space-3);
    }
}