/*
 * Design tokens — the ONLY file in this codebase allowed to contain raw
 * color values. Everything else references these custom properties via
 * var(--token-name). Swapping the brand palette means editing only here.
 *
 * Palette: "Texas Warm" — warm sand neutrals, warm ink, burnt-orange-red
 * accent. White theme only (no dark mode — the client explicitly wants a
 * single light theme).
 */
:root {
  /* Color — neutrals (warm sand/paper scale) */
  --color-bg: #f6f1e9;
  --color-surface: #fffdfa;
  --color-border: #ece3d5;
  --color-border-strong: #ddd1bf;
  --color-text: #22190f;
  --color-text-muted: #6f6252;
  --color-text-faint: #a99a85;
  --color-text-inverse: #ffffff;

  /* Color — brand / actions: burnt-orange-red accent */
  --color-primary: #c1502a;
  --color-primary-hover: #a03d1e;
  --color-primary-soft: #f8e6dc;
  --color-primary-contrast: #ffffff;
  --color-star: #cf5a34;

  /* Color — status (soft tint badges: Verified=green, Preferred=blue,
     Premium=gold; matches app/views/partials/badges.php) */
  --color-success: #2f7a52;
  --color-success-bg: #e6f1e9;
  --color-warning: #9c7215;
  --color-warning-bg: #f5ead0;
  --color-danger: #a8331f;
  --color-danger-bg: #f8e6e2;
  --color-info: #3167a0;
  --color-info-bg: #e8eff7;

  /* Overlay (modal backdrop scrim) — warm-dark, not pure black */
  --color-overlay: rgba(34, 25, 15, 0.5);

  /* On-dark text — for content sitting on the --color-text (ink) background:
     the site footer and the homepage community band. Named by role, not by
     opacity, so call sites read intent rather than a magic number. Solid
     white re-uses --color-text-inverse above (already the "white on brand
     ink" token) rather than duplicating it. */
  --color-on-dark-link: rgba(255, 255, 255, 0.75);
  --color-on-dark-copy: rgba(255, 255, 255, 0.62);
  --color-on-dark-band: rgba(255, 255, 255, 0.68);
  --color-on-dark-faint: rgba(255, 255, 255, 0.5);
  --color-on-dark-border: rgba(255, 255, 255, 0.14);

  /* Accent glow — the burnt-orange drop-shadow under the homepage hero's
     lone-star mark, and the same accent used as a faint on-dark icon tint
     behind the community-band heading. */
  --shadow-accent: 0 14px 26px rgba(193, 80, 42, 0.26);
  --color-accent-tint-on-dark: rgba(207, 90, 52, 0.18);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --line-height-tight: 1.25;
  --line-height-normal: 1.62;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(34, 25, 15, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(34, 25, 15, 0.2);
  --shadow-lg: 0 28px 64px -24px rgba(34, 25, 15, 0.34);

  /* Wide, breathing page container (a defining trait of this design
     system) — capped but not boxed, with generous responsive gutters. */
  --maxw: 1340px;
  --gut: 48px;
}

@media (max-width: 1000px) {
  :root { --gut: 32px; }
}

@media (max-width: 640px) {
  :root { --gut: 20px; }
}