/* =========================================================
   Mountain Music — Colors & Type
   Country-music artist management. Editorial / Americana.
   Warm browns + bone neutrals. High-contrast serif + condensed sans.
   ========================================================= */

/* -------- WEBFONTS --------
   Wordmark / brand display = GOBOLD (real OTF files, supplied by the brand).
   The family ships in many weights & styles; we expose the six primary
   weights via standard CSS weight numbers, plus italics, plus the
   decorative variants (Hollow, High, CUTS, Uplow, Lowplus) as separate
   font-families so they can be used intentionally.

   Editorial display = Cormorant Garamond (high-contrast serif).
   Body = Inter (humanist sans, neutral workhorse).
   Script accent = Pinyon Script (used very sparingly).
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=Pinyon+Script&display=swap');

/* ---- Gobold (primary, weighted family) ---- */
@font-face { font-family: "Gobold"; font-weight: 100; font-style: normal;  src: url("fonts/Gobold_Thin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 100; font-style: italic;  src: url("fonts/Gobold_Thin_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 300; font-style: normal;  src: url("fonts/Gobold_Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 300; font-style: italic;  src: url("fonts/Gobold_Light_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 400; font-style: normal;  src: url("fonts/Gobold_Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 400; font-style: italic;  src: url("fonts/Gobold_Regular_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 700; font-style: normal;  src: url("fonts/Gobold_Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 700; font-style: italic;  src: url("fonts/Gobold_Bold_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 800; font-style: normal;  src: url("fonts/Gobold_Extra1.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 800; font-style: italic;  src: url("fonts/Gobold_Extra1_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 900; font-style: normal;  src: url("fonts/Gobold_Extra2.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold"; font-weight: 900; font-style: italic;  src: url("fonts/Gobold_Extra2_Italic.otf") format("opentype"); font-display: swap; }

/* ---- Gobold decorative variants (use intentionally; not aliased to weights) ---- */
@font-face { font-family: "Gobold High";   font-weight: 400; font-style: normal; src: url("fonts/Gobold_High.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold High";   font-weight: 400; font-style: italic; src: url("fonts/Gobold_High_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold High";   font-weight: 100; font-style: normal; src: url("fonts/Gobold_High_Thin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold High";   font-weight: 100; font-style: italic; src: url("fonts/Gobold_High_Thin_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold High";   font-weight: 700; font-style: normal; src: url("fonts/Gobold_High_Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold High";   font-weight: 700; font-style: italic; src: url("fonts/Gobold_High_Bold_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold Hollow"; font-weight: 400; font-style: normal; src: url("fonts/Gobold_Hollow.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold Hollow"; font-weight: 400; font-style: italic; src: url("fonts/Gobold_Hollow_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold Hollow"; font-weight: 700; font-style: normal; src: url("fonts/Gobold_Hollow_Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold Hollow"; font-weight: 700; font-style: italic; src: url("fonts/Gobold_Hollow_Bold_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold CUTS";   font-weight: 400; font-style: normal; src: url("fonts/Gobold_CUTS.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold CUTS";   font-weight: 400; font-style: italic; src: url("fonts/Gobold_CUTS_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold Uplow";  font-weight: 400; font-style: normal; src: url("fonts/Gobold_Uplow.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold Uplow";  font-weight: 400; font-style: italic; src: url("fonts/Gobold_Uplow_Italic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold Lowplus"; font-weight: 400; font-style: normal; src: url("fonts/Gobold_Lowplus.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Gobold Lowplus"; font-weight: 400; font-style: italic; src: url("fonts/Gobold_Lowplus_Italic.otf") format("opentype"); font-display: swap; }

:root {
  /* ============ COLOR TOKENS ============ */

  /* Brand core — warm earth tones taken from the brand palette inspiration */
  --bone:        #EDEAE3;  /* primary surface — paper / off-white */
  --sand:        #C9BCAA;  /* secondary surface — warm taupe */
  --olive:       #5C5646;  /* dark accent — earthy olive-brown */
  --rust:        #875F45;  /* primary accent — saddle / clay */
  --walnut:      #604635;  /* deep brown — wood / leather */
  --ink:         #2F2E2C;  /* near-black — text on light */

  /* Extended derived shades (oklch, harmonious) */
  --bone-50:     #F7F5EF;  /* lightest paper */
  --bone-100:    #EDEAE3;  /* = bone */
  --sand-200:    #DDD2C0;  /* light taupe */
  --sand-300:    #C9BCAA;  /* = sand */
  --rust-500:    #875F45;  /* = rust */
  --rust-600:    #6F4D38;  /* hover/press */
  --walnut-700:  #604635;  /* = walnut */
  --olive-700:   #5C5646;  /* = olive */
  --ink-900:     #2F2E2C;  /* = ink */
  --ink-950:     #1B1A18;  /* deep, used for dark mode bg */

  /* Semantic — light mode (default) */
  --bg:          var(--bone-50);
  --bg-alt:      var(--bone-100);
  --bg-card:     #FFFEFA;
  --bg-dark:     var(--ink-950);   /* used for dark hero blocks */

  --fg:          var(--ink-900);    /* primary text */
  --fg-2:        var(--walnut-700); /* secondary text */
  --fg-3:        #7A6E5C;           /* tertiary / muted */
  --fg-on-dark:  var(--bone-50);    /* text over walnut/ink */

  --accent:      var(--rust-500);   /* primary action color */
  --accent-hover:var(--rust-600);
  --accent-soft: #E8D9CB;           /* tinted background tied to rust */

  --border:      #D6CFC2;           /* hairline, warm */
  --border-strong:#A89A85;
  --border-on-dark: rgba(237,234,227,0.18);

  /* States */
  --focus-ring:  #875F45;
  --success:     #6B7A4F;
  --danger:      #8F4A3A;

  /* ============ ELEVATION / RADII / SPACING ============ */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(48,38,28,0.06);
  --shadow-sm: 0 2px 6px rgba(48,38,28,0.08);
  --shadow-md: 0 8px 24px rgba(48,38,28,0.10);
  --shadow-lg: 0 24px 60px rgba(48,38,28,0.14);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* Spacing scale — generous; editorial layouts breathe */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ============ TYPE FAMILIES ============ */
  --font-wordmark:   "Gobold", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-wordmark-hollow:  "Gobold Hollow", "Gobold", sans-serif;
  --font-wordmark-high:    "Gobold High",   "Gobold", sans-serif;
  --font-wordmark-cuts:    "Gobold CUTS",   "Gobold", sans-serif;
  --font-display:  "Cormorant Garamond", "Cormorant", "Playfair Display", Georgia, serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-script:   "Pinyon Script", "Snell Roundhand", cursive;
  --font-mono:     ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Tracking / case helpers */
  --track-tight:   -0.02em;
  --track-normal:  0;
  --track-loose:   0.08em;
  --track-xloose:  0.22em;
}

/* =========================================================
   BASE TYPE
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display (editorial serif) ---- */
.mm-h1, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.95;
  letter-spacing: var(--track-tight);
  color: var(--fg);
  text-wrap: balance;
}
.mm-h2, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.mm-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.15;
  color: var(--fg);
}
.mm-h4, h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: var(--track-normal);
}

/* ---- Wordmark / monumental display (condensed industrial sans) ---- */
.mm-wordmark,
.mm-mega {
  font-family: var(--font-wordmark);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--fg);
}
.mm-mega {
  font-size: clamp(80px, 14vw, 220px);
}

/* ---- Body ---- */
p, .mm-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
}
.mm-body-lg {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-2);
}
.mm-body-sm {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}

/* ---- Eyebrow / overline (used everywhere in the inspirations) ---- */
.mm-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--track-xloose);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---- Script accent ---- */
.mm-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  font-size: 1.1em;
  color: var(--accent);
  line-height: 1;
}

/* ---- Italic display (for "by", "of", names — editorial flourish) ---- */
.mm-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

/* ---- Mono / utility ---- */
.mm-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}

/* ---- Selection ---- */
::selection { background: var(--accent); color: var(--bone-50); }