/* =========================================================================
   Girls On The Green — Design Tokens
   Colors, type, spacing, radii, shadows.
   ========================================================================= */

/* Fonts ---------------------------------------------------------------- */
/* Self-hosted brand fonts. Files live in assets/fonts/. */
@font-face {
  font-family: "Abril Fatface";
  src: url("assets/fonts/AbrilFatface-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nickainley";
  src: url("assets/fonts/Nickainley.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Times New Roman MT Condensed";
  src: url("assets/fonts/TimesNewRomanMTCondensed-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Times New Roman MT Condensed";
  src: url("assets/fonts/TimesNewRomanMTCondensed-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  /* ---------------------------------------------------------------------
     Brand color palette — exact hex codes provided by client.
     --------------------------------------------------------------------- */
  --gg-green:        #2C5C41;  /* primary dark green   */
  --gg-sage:         #7C9F79;  /* secondary sage       */
  --gg-burgundy:     #812C2C;  /* accent burgundy / wine */
  --gg-pink:         #FCD4D0;  /* primary blush pink   */

  /* Working neutrals (derived) */
  --gg-cream:        #FBEEEC;  /* a touch lighter pink for big surfaces */
  --gg-ink:          #1F1F1F;  /* body ink on light surfaces */
  --gg-paper:        #FFFFFF;
  --gg-line:         rgba(44, 92, 65, 0.18); /* hairline derived from green */

  /* Semantic mapping ---------------------------------------------------- */
  --bg:              var(--gg-pink);
  --bg-alt:          var(--gg-paper);
  --bg-inverse:      var(--gg-green);

  --fg:              var(--gg-green);        /* primary text on pink/white */
  --fg-muted:        rgba(44, 92, 65, 0.65);
  --fg-on-dark:      var(--gg-pink);         /* text on green */
  --fg-accent:       var(--gg-burgundy);

  --border:          var(--gg-burgundy);

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-display:    "Abril Fatface", "Playfair Display", Georgia, serif;
  --font-script:     "Nickainley", "Allura", "Yellowtail", cursive;
  --font-body:       "Times New Roman MT Condensed", "Tinos", "Times New Roman", Times, serif;

  /* Type scale — tuned for posters & invites; bold display, small caps body */
  --fs-display-xl:   clamp(80px, 12vw, 180px);
  --fs-display-lg:   clamp(56px, 8vw, 112px);
  --fs-display-md:   40px;
  --fs-display-sm:   28px;
  --fs-script-lg:    72px;
  --fs-script-md:    44px;
  --fs-body-lg:      20px;
  --fs-body:         16px;
  --fs-body-sm:      13px;
  --fs-eyebrow:      14px;  /* uppercase tracked label */

  /* Body is set in condensed-serif uppercase by default for poster copy.
     For long-form reading switch to .gg-body-long (sentence case, looser). */

  /* ---------------------------------------------------------------------
     Spacing, radii, shadows
     --------------------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 0 rgba(129, 44, 44, 0.15);  /* hairline burgundy */
  --shadow-card: 0 12px 32px -16px rgba(44, 92, 65, 0.35);

  /* Decorative offset shadow used on Abril Fatface display text in the logo
     (pink fill with burgundy offset, OR green fill with sage offset).
     Use --logo-offset for the px offset. */
  --logo-offset: 3px;
}

/* =========================================================================
   Base resets
   ========================================================================= */
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   Display headings (Abril Fatface)
   ========================================================================= */
.gg-display,
h1.gg-display, h2.gg-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0;
}
.gg-display--xl { font-size: var(--fs-display-xl); }
.gg-display--lg { font-size: var(--fs-display-lg); }
.gg-display--md { font-size: var(--fs-display-md); }
.gg-display--sm { font-size: var(--fs-display-sm); }

/* Two-tone offset display (pink fill, burgundy back) — the brand's hero look */
.gg-display--offset-pink {
  color: var(--gg-pink);
  text-shadow: var(--logo-offset) var(--logo-offset) 0 var(--gg-burgundy);
}
.gg-display--offset-green {
  color: var(--gg-green);
  text-shadow: var(--logo-offset) var(--logo-offset) 0 var(--gg-sage);
}
.gg-display--offset-burgundy {
  color: var(--gg-green);
  text-shadow: var(--logo-offset) var(--logo-offset) 0 var(--gg-burgundy);
}

/* =========================================================================
   Script (Yellowtail substituting for Nickainley)
   ========================================================================= */
.gg-script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
  color: var(--fg);
}
.gg-script--lg { font-size: var(--fs-script-lg); }
.gg-script--md { font-size: var(--fs-script-md); }

/* =========================================================================
   Body / labels (Times New Roman MT Condensed look)
   ========================================================================= */
.gg-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-stretch: 75%;     /* approximate condensed */
  line-height: 1.35;
  color: var(--fg);
}
.gg-body--lg { font-size: var(--fs-body-lg); }
.gg-body--sm { font-size: var(--fs-body-sm); }

/* Sentence-case long-form body (rare, for paragraphs) */
.gg-body-long {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--fg);
}

/* Eyebrow / overline */
.gg-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* =========================================================================
   Components — primitive
   ========================================================================= */

/* Capsule pill (split two-tone, as in flyer date/time) */
.gg-pill {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 2px solid var(--gg-burgundy);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.gg-pill__slot {
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
}
.gg-pill__slot--light { background: var(--gg-pink); color: var(--gg-burgundy); }
.gg-pill__slot--dark  { background: var(--gg-burgundy); color: var(--gg-pink); }

/* Solid button */
.gg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--gg-burgundy);
  background: var(--gg-burgundy);
  color: var(--gg-pink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.gg-btn:hover  { background: var(--gg-green); border-color: var(--gg-green); }
.gg-btn:active { transform: translateY(1px); }
.gg-btn--ghost { background: transparent; color: var(--gg-burgundy); }
.gg-btn--ghost:hover { background: var(--gg-burgundy); color: var(--gg-pink); }

/* Checkerboard accent (2x2 burgundy/transparent) — used as flair */
.gg-check {
  display: inline-block;
  width: 56px;
  height: 56px;
  background:
    linear-gradient(var(--gg-burgundy) 0 0) 0 0   / 50% 50% no-repeat,
    linear-gradient(var(--gg-burgundy) 0 0) 100% 100% / 50% 50% no-repeat;
}

/* Price tag (rounded rectangle with hole + string) */
.gg-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gg-burgundy);
  color: var(--gg-pink);
  font-family: var(--font-display);
  font-size: 24px;
  padding: 10px 22px 10px 32px;
  border-radius: 6px;
  position: relative;
}
.gg-tag::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gg-pink);
  transform: translateY(-50%);
}

/* Card */
.gg-card {
  background: var(--gg-paper);
  border: 1.5px solid var(--gg-burgundy);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}

/* Heart bullet (replaces emoji — used inline) */
.gg-heart {
  display: inline-block;
  width: 0.9em; height: 0.9em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7-4.35-9.5-9.04C.86 8.6 2.5 5 6 5c2 0 3.5 1 6 3 2.5-2 4-3 6-3 3.5 0 5.14 3.6 3.5 6.96C19 16.65 12 21 12 21z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7-4.35-9.5-9.04C.86 8.6 2.5 5 6 5c2 0 3.5 1 6 3 2.5-2 4-3 6-3 3.5 0 5.14 3.6 3.5 6.96C19 16.65 12 21 12 21z'/></svg>") center/contain no-repeat;
  vertical-align: -0.05em;
}