/* ==========================================================================
   Design tokens — Valley Grown Garden
   Tier 1: primitives (raw values, sampled from design-inspo + logo).
   Tier 2: semantic aliases — the only tier components may consume.
   Fluid values interpolate between 320px (20rem) and 1200px (75rem).
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Tier 1 — primitives
     ------------------------------------------------------------------ */

  /* Color */
  --color-green-700: #0b8054; /* brand green: nav, links, footer band */
  --color-green-800: #08603f; /* derived: hover/active darkening */
  --color-green-100: #e7f2ee; /* derived: light brand tint surface */
  --color-blue-200: #a6d3f4;  /* logo circle — decorative only */
  --color-red-500: #fa4f44;   /* logo berries — accent only, fails AA on white */
  --color-red-700: #c1281e;   /* derived: error text, 5.8:1 on white */
  --color-gray-600: #737373;  /* body text — 4.7:1 on white */
  --color-gray-200: #e5e5e5;  /* derived: hairline borders */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Typography — families */
  --font-family-urbanist: "Urbanist", "Urbanist Fallback", "Segoe UI", Arial, sans-serif;
  --font-family-open-sans: "Open Sans", "Open Sans Fallback", "Segoe UI", Arial, sans-serif;

  /* Typography — weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography — fluid scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --font-size-base: clamp(0.9375rem, 0.9148rem + 0.1136vw, 1rem);
  --font-size-md: clamp(1.0625rem, 1.017rem + 0.2273vw, 1.1875rem);
  --font-size-lg: clamp(1.1875rem, 1.1193rem + 0.3409vw, 1.375rem);
  --font-size-xl: clamp(1.375rem, 1.2841rem + 0.4545vw, 1.625rem);
  --font-size-2xl: clamp(1.625rem, 1.4432rem + 0.9091vw, 2.125rem);
  --font-size-3xl: clamp(1.875rem, 1.6477rem + 1.1364vw, 2.5rem);

  /* Typography — line heights */
  --line-height-tight: 1.15;
  --line-height-snug: 1.35;
  --line-height-base: 1.65;

  /* Spacing — fixed steps */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;

  /* Spacing — fluid steps (section rhythm) */
  --space-lg: clamp(2rem, 1.6364rem + 1.8182vw, 3rem);
  --space-xl: clamp(3rem, 2.4545rem + 2.7273vw, 4.5rem);
  --space-2xl: clamp(4rem, 3.0909rem + 4.5455vw, 6.5rem);

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.1);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out: cubic-bezier(0.25, 0.6, 0.35, 1);

  /* Z-index scale */
  --z-header: 50;
  --z-skip-link: 100;

  /* Layout */
  --container-max: 80rem;       /* main content column */
  --container-wide: 120rem;     /* hero band — near full-bleed, capped ultrawide */
  --container-gutter: clamp(1rem, 0.6364rem + 1.8182vw, 2rem);
  --target-min: 2.75rem;        /* 44px touch target */

  /* ------------------------------------------------------------------
     Tier 2 — semantic aliases (components consume ONLY these)
     ------------------------------------------------------------------ */

  /* Surfaces */
  --color-surface-page: var(--color-white);
  --color-surface-brand: var(--color-green-700);
  --color-surface-tint: var(--color-green-100);

  /* Text */
  --color-text-heading: var(--color-black);
  --color-text-body: var(--color-gray-600);
  --color-text-on-brand: var(--color-white);
  --color-text-on-brand-muted: var(--color-green-100);

  /* Actions */
  --color-action-primary: var(--color-green-700);
  --color-action-primary-hover: var(--color-green-800);
  --color-action-on-primary: var(--color-white);

  /* Feedback */
  --color-feedback-error: var(--color-red-700);

  /* Decoration */
  --color-decor-sky: var(--color-blue-200);
  --color-decor-berry: var(--color-red-500);
  --color-border-subtle: var(--color-gray-200);

  /* Focus */
  --focus-ring-color: var(--color-green-800);
  --focus-ring-color-on-brand: var(--color-white);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Type roles */
  --font-display: var(--font-family-urbanist);
  --font-body: var(--font-family-open-sans);
}