/* =====================================================================
THEME — Single Source of Truth
---------------------------------------------------------------------
This file defines brand colors, spacing scale, type scale, radii,
shadows, layout constants, and motion. All utilities & components
consume these variables. Keep names semantic and stable.
===================================================================== */

:root {
    /* ----------------------------- COLORS ----------------------------- */
    /* Backgrounds */
    --color-bg-primary: #F2EFE9;
    /* Soft White */
    --color-bg-secondary: #E9DCC9;
    /* Light Wood */

    /* Surfaces & Borders */
    --color-surface: #FDFBF8;
    /* Warm White (cards) */
    --color-border-subtle: rgba(45, 71, 57, 0.4);
    /* Borders */

    /* Text */
    --color-text-primary: #323232;
    /* Charcoal Black */
    --color-text-secondary: #2D4739;
    /* Primary Green (used for accents/subtext) */
    --color-text-inverse: #F2EFE9;
    /* Soft White */

    /* Brand / Accents */
    --color-accent: #2D4739;
    /* Primary Green */
    --color-accent-hover: #C27650;
    /* Warm Orange */
    --color-accent-weak: #D4A356;
    /* Sunflower Yellow */

    /* ----------------------------- MOTION ----------------------------- */
    --anim-duration-default: 0.6s;
    --anim-easing-default: ease-out;
    --anim-translate-distance: 30px;

    /* --------------------------- TYPOGRAPHY --------------------------- */
    --font-family-body: "Quicksand", sans-serif;
    --font-family-header: "Quicksand", sans-serif;

    /* Font sizes (semantic) - Increased Scale */
    --font-size-xs: 0.875rem;
    /* 14px */
    --font-size-sm: 1rem;
    /* 16px */
    --font-size-base: 1.125rem;
    /* 18px */
    --font-size-lg: 1.25rem;
    /* 20px */
    --font-size-xl: 1.75rem;
    /* 28px */
    --font-size-2xl: 2.5rem;
    /* 40px */

    /* Line-heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;

    /* Weights */
    --weight-light: 200;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---------------------------- SPACING ----------------------------- */
    /* Raw scale (4-based) */
    --spacing-0: 0rem;
    /* 0 */
    --spacing-2: 0.125rem;
    /* 2px */
    --spacing-4: 0.25rem;
    /* 4px */
    --spacing-8: 0.5rem;
    /* 8px */
    --spacing-12: 0.75rem;
    /* 12px */
    --spacing-16: 1rem;
    /* 16px */
    --spacing-24: 1.5rem;
    /* 24px */
    --spacing-32: 2rem;
    /* 32px */
    --spacing-48: 3rem;
    /* 48px */
    --spacing-64: 4rem;
    /* 64px */

    /* Semantic aliases */
    --spacing-xs: var(--spacing-8);
    --spacing-sm: var(--spacing-12);
    --spacing-md: var(--spacing-16);
    --spacing-lg: var(--spacing-32);
    --spacing-xl: var(--spacing-48);
    --spacing-xxl: var(--spacing-64);

    /* --------------------------- RADII & FX --------------------------- */
    --border-radius-base: 12px;
    --border-radius-img: 16px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* ---------------------------- LAYOUT ------------------------------ */
    --container-max: 1200px;
    /* Max readable width */
    --container-pad: var(--spacing-md);
    /* Inline padding */

    /* Layout Constant */
    --header-height: 100px;

    /* Breakpoints (used by utilities) */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;

}