/* =====================================================================
   Maritz Wessels Golf — Colors & Type Foundations
   Black & white with a dark fairway-green accent.
   Typography: Gotham (Bold for headings, Light/Medium for body).
   ===================================================================== */

/* ---------- Fonts -------------------------------------------------- */

@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-ThinItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-XLight.otf") format("opentype");
  font-weight: 250;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-XLightItalic.otf") format("opentype");
  font-weight: 250;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/GothamLightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/GothamBook.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-BookItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-UltraItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------- */

:root {
  /* -- Brand palette -------------------------------------------------
     Strictly black/white with a single dark-green accent used sparingly
     for strokes, hairlines, hover states and small marks.            */
  --mwg-black:        #0A0A0A;     /* near-black, primary ink         */
  --mwg-ink:          #141414;     /* surfaces (cards on dark)        */
  --mwg-charcoal:     #1F1F1F;     /* elevated dark surface           */
  --mwg-graphite:     #3A3A3A;     /* muted text on white             */
  --mwg-stone:        #6B6B6B;     /* meta / labels                   */
  --mwg-mist:         #A8A8A8;     /* disabled / scale ticks          */
  --mwg-fog:          #D9D9D9;     /* hairlines on white              */
  --mwg-bone:         #F2F0EC;     /* warm off-white surface          */
  --mwg-paper:        #F7F6F2;     /* page background, lightest       */
  --mwg-white:        #FFFFFF;

  /* Accent — fairway green. One value, used sparingly. */
  --mwg-fairway:      #1F4D2E;     /* primary accent (deep green)     */
  --mwg-fairway-700:  #173B23;     /* hover / pressed                 */
  --mwg-fairway-300:  #6F8F7B;     /* disabled accent                 */
  --mwg-fairway-tint: #E8EEEA;     /* subtle bg wash                  */

  /* Semantic — kept neutral. Avoid loud colour. */
  --mwg-success: #1F4D2E;          /* reuse fairway                   */
  --mwg-warn:    #8A6B1F;          /* warm umber, not yellow          */
  --mwg-error:   #8A2A1F;          /* deep brick                      */

  /* -- Foreground / background semantics --------------------------- */
  --fg-1: var(--mwg-black);        /* primary text                    */
  --fg-2: var(--mwg-graphite);     /* secondary text                  */
  --fg-3: var(--mwg-stone);        /* meta / captions                 */
  --fg-4: var(--mwg-mist);         /* tertiary / disabled             */
  --fg-on-dark: var(--mwg-white);
  --fg-on-dark-2: rgba(255, 255, 255, 0.72);
  --fg-on-dark-3: rgba(255, 255, 255, 0.48);

  --bg-1: var(--mwg-paper);        /* page                            */
  --bg-2: var(--mwg-bone);         /* secondary surface               */
  --bg-3: var(--mwg-white);        /* cards on light                  */
  --bg-dark-1: var(--mwg-black);
  --bg-dark-2: var(--mwg-ink);
  --bg-dark-3: var(--mwg-charcoal);

  --stroke-1: var(--mwg-black);    /* heavy hairline                  */
  --stroke-2: var(--mwg-fog);      /* hairline on white               */
  --stroke-accent: var(--mwg-fairway);

  /* -- Type ------------------------------------------------------- */
  --font-display: "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, ui-monospace, monospace;

  /* Type scale (modular, 1.25 ratio, base 16) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  88px;
  --fs-display: 128px;

  --lh-tight: 1.0;
  --lh-snug:  1.15;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-widest:    0.18em;   /* small caps eyebrow style         */

  /* -- Spacing & radii -------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-none: 0;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-pill: 999px;

  /* Borders are LOAD-BEARING in this brand. Most "shadows" are strokes. */
  --border-hairline: 1px solid var(--mwg-fog);
  --border-ink:      1px solid var(--mwg-black);
  --border-accent:   1.5px solid var(--mwg-fairway);

  /* Shadows used sparingly — short and tight, like racked-light. */
  --shadow-xs: 0 1px 0 rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 2px 4px rgba(10, 10, 10, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(10, 10, 10, 0.18);
  --shadow-lg: 0 24px 60px -24px rgba(10, 10, 10, 0.32);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
}

/* ---------- Semantic typography element defaults ----------------- */

.mwg-h1, h1.mwg, .mwg-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 96px);
  line-height: var(--lh-tight);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.mwg-h2, h2.mwg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.mwg-h3, h3.mwg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.mwg-h4, h4.mwg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.mwg-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.mwg-eyebrow--accent { color: var(--mwg-fairway); }

.mwg-lead, p.mwg-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-2);
  margin: 0;
}

.mwg-p, p.mwg {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--fg-2);
  margin: 0;
}

.mwg-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.mwg-quote {
  font-family: var(--font-display);
  font-weight: 200;
  font-style: italic;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.mwg-mono, code.mwg {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* Utility — divider line, hairline rule used as a brand element */
.mwg-rule {
  border: 0;
  border-top: 1px solid var(--mwg-black);
  height: 0;
  margin: 0;
}
.mwg-rule--accent { border-top-color: var(--mwg-fairway); border-top-width: 2px; }
.mwg-rule--soft   { border-top-color: var(--mwg-fog); }