/**
 * PatioGarden Design System
 * Tokens + Base + Reset
 */

/* =================================================
 * CSS CUSTOM PROPERTIES
 * ================================================= */
:root {
    /* --- Primary (green) --- */
    --tpg-green-900: #1a3a0a;
    --tpg-green-800: #2d5016;
    --tpg-green-700: #3d6b1e;
    --tpg-green-600: #4d8524;
    --tpg-green-500: #5dac24;
    --tpg-green-400: #7bc24a;
    --tpg-green-300: #9cd873;
    --tpg-green-200: #c4eaa6;
    --tpg-green-100: #e6f5d6;
    --tpg-green-50:  #f4fbee;

    /* --- Secondary (sage) --- */
    --tpg-sage-700: #4a5638;
    --tpg-sage-600: #607244;
    --tpg-sage-500: #7a8c5d;
    --tpg-sage-400: #96a67a;
    --tpg-sage-300: #b3c09d;
    --tpg-sage-200: #d0dbc1;
    --tpg-sage-100: #e8ede0;
    --tpg-sage-50:  #f5f7f1;

    /* --- Earth --- */
    --tpg-earth-600: #7a6344;
    --tpg-earth-500: #9a7f5a;
    --tpg-earth-200: #e8dece;
    --tpg-earth-100: #f5f0e8;

    /* --- Neutrals --- */
    --tpg-n-900: #1a1a1a;
    --tpg-n-800: #2d2d2d;
    --tpg-n-700: #404040;
    --tpg-n-600: #595959;
    --tpg-n-500: #737373;
    --tpg-n-400: #a0a0a0;
    --tpg-n-300: #c4c4c4;
    --tpg-n-200: #e0e0e0;
    --tpg-n-100: #f0f0f0;
    --tpg-n-50:  #fafafa;

    --tpg-white: #ffffff;
    --tpg-cream: #fafff5;
    --tpg-warm-bg: #f8f8f4;

    /* --- Semantic --- */
    --tpg-success: #2e7d32;
    --tpg-warning: #e65100;
    --tpg-error: #c62828;
    --tpg-info: #1565c0;
    --tpg-sale: #c62828;

    /* --- Typography --- */
    --tpg-ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tpg-ff-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;

    --tpg-fs-xs: 0.75rem;
    --tpg-fs-sm: 0.8125rem;
    --tpg-fs-base: 0.9375rem;
    --tpg-fs-md: 1rem;
    --tpg-fs-lg: 1.125rem;
    --tpg-fs-xl: 1.25rem;
    --tpg-fs-2xl: 1.5rem;
    --tpg-fs-3xl: 1.875rem;
    --tpg-fs-4xl: 2.25rem;
    --tpg-fs-5xl: 3rem;

    --tpg-lh-tight: 1.25;
    --tpg-lh-normal: 1.5;
    --tpg-lh-relaxed: 1.65;

    /* --- Spacing --- */
    --tpg-sp-1: 0.25rem;
    --tpg-sp-2: 0.5rem;
    --tpg-sp-3: 0.75rem;
    --tpg-sp-4: 1rem;
    --tpg-sp-5: 1.25rem;
    --tpg-sp-6: 1.5rem;
    --tpg-sp-8: 2rem;
    --tpg-sp-10: 2.5rem;
    --tpg-sp-12: 3rem;
    --tpg-sp-16: 4rem;
    --tpg-sp-20: 5rem;

    /* --- Radius --- */
    --tpg-r-sm: 4px;
    --tpg-r-md: 8px;
    --tpg-r-lg: 12px;
    --tpg-r-xl: 16px;
    --tpg-r-full: 9999px;

    /* --- Shadows --- */
    --tpg-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --tpg-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --tpg-shadow-lg: 0 4px 16px rgba(0,0,0,0.10);
    --tpg-shadow-xl: 0 8px 24px rgba(0,0,0,0.12);
    --tpg-shadow-hover: 0 6px 20px rgba(0,0,0,0.12);

    /* --- Transitions --- */
    --tpg-tr-fast: 150ms ease;
    --tpg-tr-base: 250ms ease;
    --tpg-tr-slow: 350ms ease;

    /* --- Layout --- */
    --tpg-container: 1280px;
    --tpg-container-narrow: 960px;
    --tpg-gutter: 1.5rem;
}

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

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

body {
    font-family: var(--tpg-ff-body);
    font-size: var(--tpg-fs-base);
    line-height: var(--tpg-lh-normal);
    color: var(--tpg-n-800);
    background: var(--tpg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tpg-ff-heading);
    font-weight: 700;
    line-height: var(--tpg-lh-tight);
    color: var(--tpg-n-900);
}

h1 { font-size: var(--tpg-fs-4xl); }
h2 { font-size: var(--tpg-fs-3xl); }
h3 { font-size: var(--tpg-fs-2xl); }
h4 { font-size: var(--tpg-fs-xl); }

a {
    color: var(--tpg-green-600);
    text-decoration: none;
    transition: color var(--tpg-tr-fast);
}
a:hover { color: var(--tpg-green-700); }

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

ul, ol { list-style: none; }

.screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* =================================================
 * CONTAINER
 * ================================================= */
.tpg-container {
    max-width: var(--tpg-container);
    margin: 0 auto;
    padding: 0 var(--tpg-gutter);
}

/* =================================================
 * MOBILE-FIRST OVERRIDES
 * ================================================= */
@media (max-width: 480px) {
    :root {
        --tpg-gutter: 1rem;
        --tpg-fs-3xl: 1.5rem;
        --tpg-fs-4xl: 1.75rem;
        --tpg-fs-5xl: 2rem;
    }
    h1 { font-size: var(--tpg-fs-3xl); }
    h2 { font-size: var(--tpg-fs-2xl); }
    h3 { font-size: var(--tpg-fs-xl); }
}
@media (max-width: 768px) {
    :root {
        --tpg-gutter: 1.125rem;
    }
}