/* ==========================================================================
   variables.css — single source of truth for the Bones Disc Golf brand.
   DARK theme to match the original site: pure-black backgrounds, white text,
   red accents. Colors + fonts pulled from the original horr-theme site.
   ========================================================================== */
:root {
  /* ---- Brand palette ---- */
  --color-brand:        #C41721;   /* Bones red — primary accent */
  --color-brand-dark:   #9B1219;   /* darker red */
  --color-brand-glow:   rgba(196, 23, 33, 0.35);

  /* ---- Dark surfaces ---- */
  --color-bg:      #000000;         /* page background — pure black */
  --color-bg-alt:  #0c0c0c;         /* alternating sections */
  --color-bg-dark: #000000;         /* footer / darkest sections */
  --color-bg-elev: #161616;         /* cards, inputs (lifted) */

  /* ---- Text ---- */
  --color-ink:         #ffffff;                    /* headings */
  --color-white:       #ffffff;
  --color-text:        rgba(255, 255, 255, 0.82);  /* body */
  --color-text-muted:  rgba(255, 255, 255, 0.58);  /* secondary */
  --color-border:      rgba(255, 255, 255, 0.10);  /* hairlines on dark */

  /* ---- Typography ---- */
  --font-display: "Red Rose", system-ui, -apple-system, sans-serif; /* headings */
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif; /* body */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Fluid type scale (mirrors the horr theme's clamp()s) */
  --fs-hero:  clamp(2.85rem, 8vw, 5.5rem);
  --fs-h1:    clamp(2rem, 4.5vw, 3rem);
  --fs-h2:    clamp(1.85rem, 3.6vw, 2.6rem);
  --fs-h3:    clamp(1.4375rem, 2.4vw, 1.75rem);
  --fs-lead:  clamp(1.125rem, 2vw, 1.25rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;

  /* ---- Spacing & layout ---- */
  --container:        1180px;
  --container-narrow: 820px;
  --gutter:           clamp(1rem, 4vw, 2rem);
  --section-pad:      clamp(3.5rem, 8vw, 7rem);

  /* ---- Shape ---- */
  --radius:      16px;
  --radius-sm:   10px;
  --radius-pill: 999px;
  --shadow:      0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-sm:   0 6px 18px rgba(0, 0, 0, 0.45);

  /* ---- Motion ---- */
  --transition: 200ms ease;

  /* ---- Chrome heights ---- */
  --header-h: 84px;
}