/* Design tokens — Heritage Western. Source of truth: tests/design-system.md.
   Loaded before styles.css and footer.css. */
:root {
  /* Color Palette - Neutrals & Surfaces */
  --color-canvas-base: #f9f6f0;       /* Warm unbleached linen / main backdrop */
  --color-canvas-surface: #ffffff;    /* Card & container elevation surface */
  --color-canvas-subtle: #efebe4;     /* Tinted wells, table headers, alternating rows */

  /* Color Palette - Typography & Structure */
  --color-iron-dark: #242220;         /* Primary text / deep cast iron */
  --color-iron-muted: #5c5752;        /* Secondary text / weathered timber */
  --color-border: #ded8ce;            /* Hair-line structural borders */
  --color-border-dark: #b8b0a2;       /* Enhanced border for inputs and hover states */

  /* Color Palette - Heritage Accents */
  --color-saddle-tan: #9e643c;        /* Primary accent / warm oiled saddle leather */
  --color-saddle-dark: #7a4a28;       /* Hover state / dark burnished leather */
  --color-saddle-subtle: #f4ede6;     /* Subtle leather tint for badges/toggles */
  --color-sage-subtle: #4a5d4e;       /* Secondary accent / muted high-desert pine */

  /* Typography Stacks */
  --font-heading: "Young Serif", "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  /* Fluid Type Scale (Viewport-aware via clamp) */
  --text-xs: 0.75rem;                                   /* 12px */
  --text-sm: 0.875rem;                                  /* 14px */
  --text-base: 1rem;                                    /* 16px */
  --text-lg: 1.125rem;                                  /* 18px */
  --text-xl: clamp(1.2rem, 1.5vw + 0.9rem, 1.4rem);     /* 19px - 22px */
  --text-2xl: clamp(1.4rem, 2.5vw + 1rem, 1.85rem);     /* 22px - 30px */
  --text-3xl: clamp(1.85rem, 4vw + 1rem, 2.5rem);       /* 30px - 40px */

  /* Spacing Scale (8pt System Base) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* Geometry & Elevation */
  --border-width: 1px;
  --radius-sm: 3px;    /* Crisp, architectural corners */
  --radius-md: 5px;
  --shadow-subtle: 0 1px 3px rgba(36, 34, 32, 0.06);
  --shadow-elevated: 0 4px 12px rgba(36, 34, 32, 0.08);

  /* Touch Target Constraint */
  --min-touch-size: 44px;

  /* Layout helpers (additions, not in the spec) */
  --container-max: 72rem;
  --header-height: 4rem;
  --drawer-width: min(20rem, 85vw);
  --focus-ring: 2px solid var(--color-saddle-dark);
}