/* ==========================================================================
   M10 reskin: design tokens
   Source: Figma "Mitchell Tenpenny (website)", frame 2103:192
   Map these onto the existing theme styles. Nothing here targets theme
   markup except the optional section-band helpers at the bottom.
   ========================================================================== */
:root {
  /* Color */
  --m10-gold:   #E4B010;              /* all text, outlines, rules, buttons */
  --m10-ink:    #130F0C;              /* header/hero + footer background */
  --m10-black:  #040404;              /* tour + about background (behind photos) */
  --m10-slate:  #4B697F;              /* music + videos background, TICKETS button fill */
  --m10-veil:   rgba(19, 15, 12, .7); /* dark panel over photos (tour list, about box) */
  --m10-rule:   rgba(4, 4, 4, .5);    /* hairlines between tour rows */

  /* Type: Owners Text (Adobe Fonts). Add the kit, then keep this stack. */
  --m10-font: "owners-text", "Owners Text", "Helvetica Neue", Arial, sans-serif;

  /* Type scale (desktop px from Figma) */
  --m10-fs-section: 55px;  /* MUSIC / VIDEOS headings (TOUR 50, ABOUT 36) */
  --m10-fs-h3:      40px;  /* album title (video title 26) */
  --m10-fs-bar:     24px;  /* hero bottom bar: TEXT MITCHELL / JOIN THE NEWSLETTER */
  --m10-fs-body:    16px;  /* nav, body copy, buttons */
  --m10-fs-small:   14px;  /* small buttons: TICKETS, WATCH NOW */
  --m10-fs-legal:   11px;

  /* Buttons */
  --m10-radius: 5px;       /* 4px on the smaller outline buttons */
  --m10-btn-pad: 11px 31px;
  --m10-tracking-btn: .05em;
}

/* Base: typography and links */
body { font-family: var(--m10-font); color: var(--m10-gold); }

/* Outline button (LISTEN NOW, WATCH NOW, MORE VIDEOS, JOIN NOW) */
.m10-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--m10-gold); border-radius: var(--m10-radius);
  padding: var(--m10-btn-pad); color: var(--m10-gold);
  letter-spacing: var(--m10-tracking-btn); text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.m10-btn:hover { background: var(--m10-gold); color: var(--m10-ink); }

/* Filled button (TICKETS uses slate; SEE ALL DATES uses ink) */
.m10-btn--fill  { background: var(--m10-slate); border-color: transparent; }
.m10-btn--dark  { background: var(--m10-ink);   border-color: transparent; }

/* Optional section-band backgrounds, in page order */
#feature { background-color: var(--m10-ink); }    /* hero */
/* music grid section */            /* background: var(--m10-slate); */
#tour    { background-color: var(--m10-black); }  /* photo bg + var(--m10-veil) panel */
#videos  { background-color: var(--m10-slate); }
/* about section */                 /* photo bg + var(--m10-veil) panel */
#contact { background-color: var(--m10-ink); }    /* fan club + footer */