/* =========================================================================
   Garden Lady Concepts — brand tokens
   -------------------------------------------------------------------------
   Every color, font, size, and spacing value the site uses lives here as a
   CSS custom property. styles.css only ever references these variables, so
   a rebrand (new colors, new fonts) is a change to this one file.

   Palette was sampled from the brand photo shoot (assets/photos/):
   the olive canvas apron, its copper leather straps, the cedar fence,
   the leaves, and the warm golden-hour light.
   ========================================================================= */

:root {
  /* ---- Color: core palette ------------------------------------------- */
  --color-forest: #36443a;      /* apron green — primary dark, headings, footer */
  --color-forest-deep: #26302a; /* darker forest for hover states and overlays */
  --color-moss: #6e9a62;        /* leaf green — light accent */
  --color-moss-light: #a9c79b;  /* pale leaf — accents on dark backgrounds */
  --color-copper: #9a5230;      /* apron straps — call-to-action buttons */
  --color-copper-deep: #7d4126; /* copper hover state */
  --color-cedar: #7a5a2a;       /* fence wood — small labels, eyebrow text */
  --color-cream: #f7f3ec;       /* golden-hour light — main page background */
  --color-sand: #ece4d6;        /* alternate section background */
  --color-ink: #2b2b27;         /* body text */
  --color-ink-muted: #5c5a52;   /* secondary text */
  --color-white: #ffffff;

  /* ---- Color: roles (use these in components) ------------------------ */
  --color-bg: var(--color-cream);
  --color-bg-alt: var(--color-sand);
  --color-bg-dark: var(--color-forest);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  --color-text-on-dark: var(--color-cream);
  --color-heading: var(--color-forest);
  --color-accent: var(--color-copper);
  --color-accent-hover: var(--color-copper-deep);
  --color-focus: var(--color-copper);
  --color-image-overlay: rgb(38 48 42 / 0.68); /* forest-deep, for text over photos */

  /* ---- Typography ---------------------------------------------------- */
  /* Fonts are loaded from Google Fonts in index.html <head>.
     Fraunces: a soft, slightly old-style serif — warm and hand-made.
     Source Sans 3: a clean, very readable sans for body copy. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Fluid type scale: each step grows smoothly from phone to desktop.
     clamp(min, preferred, max) */
  --text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);

  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --tracking-wide: 0.12em;

  /* ---- Spacing scale (based on 0.25rem = 4px steps) ------------------ */
  --space-1: 0.25rem;  /*   4px */
  --space-2: 0.5rem;   /*   8px */
  --space-3: 0.75rem;  /*  12px */
  --space-4: 1rem;     /*  16px */
  --space-5: 1.5rem;   /*  24px */
  --space-6: 2rem;     /*  32px */
  --space-7: 3rem;     /*  48px */
  --space-8: 4rem;     /*  64px */
  --space-9: 6rem;     /*  96px */

  /* Vertical padding for full-width page sections */
  --section-padding: clamp(var(--space-8), 8vw, var(--space-9));

  /* ---- Layout -------------------------------------------------------- */
  --container-max: 72rem;   /* widest content column (~1150px) */
  --container-narrow: 44rem; /* comfortable reading width */
  --gutter: var(--space-4);  /* side padding on small screens */

  /* ---- Shape & depth ------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --shadow-soft: 0 6px 24px rgb(38 48 42 / 0.12);

  /* ---- Motion -------------------------------------------------------- */
  --transition-fast: 150ms ease;
}