/* Design tokens. No raw hex codes or magic numbers outside this file. */

:root {
  /* Colour — forest/lake palette drawn from the condo photography. */
  --color-pine: #1c3b32;
  --color-pine-dark: #142b25;
  --color-pine-light: #2f5e51;
  --color-lake: #2a6072;
  --color-sand: #e9e0d2;
  --color-sand-light: #f4eee5;
  --color-cream: #faf8f4;
  --color-white: #ffffff;
  --color-ink: #1f2320;
  --color-muted: #4f544b;
  --color-border: #d9d2c6;
  --color-star: #b4562a;
  --color-error: #a32020;
  --color-success: #1c5c3c;

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", roboto, helvetica,
    arial, sans-serif;
  --font-display: georgia, "Times New Roman", times, serif;
  --size-step--1: 0.875rem;
  --size-step-0: 1rem;
  --size-step-1: 1.125rem;
  --size-step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --size-step-3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --size-step-4: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  --size-step-5: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --measure: 68ch;
  --container-max: 1200px;
  --container-pad: 1rem;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgb(20 43 37 / 8%), 0 2px 8px rgb(20 43 37 / 6%);
  --shadow-md: 0 4px 12px rgb(20 43 37 / 10%), 0 12px 32px rgb(20 43 37 / 10%);

  /* Minimum touch target (WCAG 2.2 SC 2.5.8 / Material). */
  --target-min: 48px;

  /* Breakpoints, documented here for reference — media queries need literals. */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-pad: 3rem;
  }
}