/* ==========================================================================
   GLOBAL.CSS — Cultura Golf
   Design tokens, reset, base typography, layout containers.
   Loaded on every page. No component or page-specific rules here.
   ========================================================================== */

:root {
  /* ============================================================
     PALETTE — only 5 brand colors. Every token below resolves to
     one of these five (or a transparent alpha of one). No other
     solid colors anywhere on the site.
       Forest Green #1b2e1d · Black #161616 · White #f0ede3
       Sand #ceb692 · Sky Blue #94adbd
     ============================================================ */

  /* Forest Green */
  --cg-forest: #1b2e1d; /* primary brand */
  --cg-forest-dark: #1b2e1d; /* (shells/deep sections — same Forest) */
  --cg-forest-light: #1b2e1d; /* (gradient stop — same Forest) */
  --cg-midnight: #161616; /* Black — deepest surface */

  /* Sand (accent) */
  --cg-gold: #ceb692; /* Sand — CTAs, rules, icon fills */
  --cg-gold-light: #ceb692; /* (hover/on-dark accent — same Sand) */
  --cg-gold-deep: #1b2e1d; /* label/link/icon-glyph text → Forest (readable) */
  --cg-gold-dim: rgba(206, 182, 146, 0.2); /* Sand @ alpha */

  /* Sky Blue (secondary accent) */
  --cg-blue: #94adbd; /* Sky Blue — rules, badges, links, focus */
  --cg-blue-light: #94adbd; /* (same Sky Blue) */
  --cg-blue-deep: #94adbd; /* (same Sky Blue) */
  --cg-blue-dim: rgba(148, 173, 189, 0.18); /* Sky Blue @ alpha */

  /* Surfaces */
  --cg-parchment: #f0ede3; /* White — primary body background */
  --cg-ivory: rgba(206, 182, 146, 0.16); /* alt surface — Sand @ alpha */
  --cg-surface: #f0ede3; /* White — cards */
  --cg-edge: rgba(22, 22, 22, 0.12); /* borders — Black @ alpha */

  /* Type colors */
  --cg-ink: #161616; /* Black — headlines on light */
  --cg-stone: #161616; /* Black — body on light */
  --cg-muted: rgba(22, 22, 22, 0.55); /* Black @ alpha — captions */
  --cg-on-dark: #f0ede3; /* White — text on forest */
  --cg-on-dark-soft: rgba(240, 237, 227, 0.82); /* White @ alpha */

  /* Type families */
  --cg-font-display: "Cormorant Garamond", Georgia, serif;
  --cg-font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cg-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --cg-container: 1440px;
  --cg-container-pad: clamp(20px, 5vw, 40px);
  --cg-section-y: clamp(56px, 9vw, 120px);
  --cg-radius: 6px;
}

/* ------------------------------- Reset --------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--cg-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cg-stone);
  background: var(--cg-parchment);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--cg-blue-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--cg-blue);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Keyboard focus — Sky Blue accessibility ring (brand secondary) */
:focus-visible {
  outline: 2px solid var(--cg-blue);
  outline-offset: 2px;
}

/* --------------------------- Base typography --------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--cg-font-display);
  font-weight: 600;
  color: var(--cg-ink);
  line-height: 1.15;
  letter-spacing: 0.3px;
}

h1 {
  font-size: clamp(40px, 6vw, 64px);
}
h2 {
  font-size: clamp(30px, 4.4vw, 42px);
}
h3 {
  font-size: clamp(22px, 3vw, 28px);
}

p {
  line-height: 1.8;
}

/* ----------------------------- Containers ------------------------------ */
.cg-container {
  width: 100%;
  max-width: var(--cg-container);
  margin-inline: auto;
  padding-inline: var(--cg-container-pad);
}

.cg-section {
  padding-block: var(--cg-section-y);
}

.site-content {
  display: block;
}

/* --------------------------- Accessibility ----------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cg-skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  clip: auto;
  z-index: 1000;
  background: var(--cg-forest-dark);
  color: var(--cg-gold-light);
  padding: 12px 20px;
  border-radius: var(--cg-radius);
}

/* Shared eyebrow label (mono, gold, tracked) — used across all pages. */
.cg-eyebrow {
  font-family: var(--cg-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cg-gold-deep);
  margin-bottom: 14px;
}