/* Lifted from design/tokens/colors_and_type.css. Changes: the Google Fonts @import is gone
   (fonts are self-hosted in fonts.css) and the monospace family is dropped (house rule). */
/* ==========================================================================
   MDR Sound & Lighting — Colors & Type
   ==========================================================================
   Core tokens derived from the MDR homepage reference. Two worlds:
   a dense "stage" world (black canvas, magenta spot) and a bright "showroom"
   world (white canvas, black type, magenta accents). Wavy dividers are the
   connective tissue between them.
   ========================================================================== */


:root {
  /* ---------- Brand palette ----------------------------------------------
     The MDR accent lives on a magenta → deep-purple ramp. Pills and CTAs
     use the mid magenta; section washes go darker toward aubergine. */
  --mdr-magenta:        #B026B9;   /* primary CTA / category pill */
  --mdr-magenta-hover:  #951EA1;   /* button hover */
  --mdr-magenta-press:  #781880;   /* button press */
  --mdr-magenta-soft:   #D963DF;   /* hover on dark, highlight accents */
  --mdr-purple:         #7A1B85;   /* deep purple panel */
  --mdr-aubergine:      #4A0E55;   /* darkest purple wash */
  --mdr-plum:           #2A0A38;   /* near-black purple, gradient start */

  /* ---------- Neutrals --------------------------------------------------- */
  --mdr-black:          #000000;   /* full bleed backdrop */
  --mdr-ink:            #111111;   /* cards on dark, less harsh than pure */
  --mdr-charcoal:       #2A2A2A;   /* dividers on black */
  --mdr-graphite:       #4A4A4A;   /* muted type on white */
  --mdr-slate:          #6E6E73;   /* body copy secondary */
  --mdr-silver:         #AEAEB2;   /* hairlines, disabled */
  --mdr-mist:           #E5E5E7;   /* card border, chip border */
  --mdr-fog:            #F2F2F4;   /* card background on white */
  --mdr-paper:          #FFFFFF;   /* section background */

  /* ---------- Semantic roles -------------------------------------------- */
  --bg-page:            var(--mdr-paper);
  --bg-page-dark:       var(--mdr-black);
  --bg-panel:           var(--mdr-fog);
  --bg-card:            var(--mdr-paper);
  --bg-card-dark:       var(--mdr-ink);

  --fg-1:               var(--mdr-black);    /* primary on light */
  --fg-2:               var(--mdr-graphite); /* secondary on light */
  --fg-3:               var(--mdr-slate);    /* tertiary / captions */
  --fg-1-dark:          var(--mdr-paper);    /* primary on dark */
  --fg-2-dark:          #CFCFD3;             /* secondary on dark */
  --fg-3-dark:          #8E8E93;             /* tertiary on dark */

  --accent:             var(--mdr-magenta);
  --accent-fg:          var(--mdr-paper);
  --accent-hover:       var(--mdr-magenta-hover);
  --accent-press:       var(--mdr-magenta-press);

  --border-1:           var(--mdr-mist);
  --border-2:           var(--mdr-silver);
  --border-dark:        var(--mdr-charcoal);

  --success:            #1F9D55;
  --warning:            #F2A900;
  --danger:             #D0021B;

  /* ---------- Type families --------------------------------------------
     Title/display: Mulish is the closest free match for MDR's rounded-bold
     geometric headings ("MDR Sound & Lighting", "Industry Categories",
     "Our Latest Gear"). Weight 800 with tight tracking.
     Body: Inter — MDR's body copy is a clean humanist sans in the
     14–16px range; Inter matches the x-height and warmth.               */
  --font-display: 'Mulish', 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Mulish', 'Segoe UI', system-ui, sans-serif;

  /* ---------- Type scale ------------------------------------------------ */
  --fs-display:   clamp(44px, 6vw, 72px);  /* hero "MDR Sound & Lighting" */
  --fs-h1:        40px;
  --fs-h2:        32px;   /* section titles: "Industry Categories" */
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      15px;   /* default paragraph */
  --fs-small:     13px;
  --fs-caption:   11px;
  --fs-overline:  10px;

  --lh-tight:     1.1;
  --lh-heading:   1.2;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  --tr-tight:     -0.02em;
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-ucase:     0.12em;

  /* ---------- Spacing scale (4pt base) ---------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii ----------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;    /* MDR's signature button/chip shape */

  /* ---------- Shadows --------------------------------------------------- */
  --sh-card:    0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --sh-card-hi: 0 2px 4px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.12);
  --sh-pill:    0 2px 6px rgba(176, 38, 185, 0.28);
  --sh-glow:    0 0 24px rgba(217, 99, 223, 0.55);   /* magenta stage glow */
  --sh-hero:    0 24px 80px rgba(0,0,0,0.45);

  /* ---------- Gradients / washes --------------------------------------- */
  --grad-stage:     linear-gradient(135deg, #2A0A38 0%, #4A0E55 45%, #7A1B85 100%);
  --grad-magenta:   linear-gradient(180deg, #C22FCB 0%, #951EA1 100%);
  --grad-footer:    linear-gradient(180deg, #A020A0 0%, #7A1B85 100%);

  /* ---------- Motion ---------------------------------------------------- */
  --ease-standard:  cubic-bezier(.2,.7,.2,1);
  --ease-in:        cubic-bezier(.55,.06,.68,.19);
  --ease-out:       cubic-bezier(.22,1,.36,1);
  --dur-fast:       120ms;
  --dur-med:        220ms;
  --dur-slow:       420ms;
}

/* ==========================================================================
   Base element styles — drop-in defaults
   ========================================================================== */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); }
body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

/* Display & headings use Mulish, extra-bold, slight negative tracking */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, .display {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
}
.display { font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); }
h1, .h1 { font-size: var(--fs-h1); font-weight: 800; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 800; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; }

p { margin: 0 0 var(--sp-4); color: var(--fg-2); }
small, .small { font-size: var(--fs-small); color: var(--fg-3); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: var(--tr-wide); }
.overline {
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-ucase);
  font-weight: 700;
  color: var(--fg-3);
}

/* Nav link — used in header */
.nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--fg-1);
  text-decoration: none;
}
.nav-link--dark { color: var(--fg-1-dark); }

/* Link */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }


/* Dark-surface helpers */
.on-dark  { color: var(--fg-1-dark); }
.on-dark p, .on-dark .body { color: var(--fg-2-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--fg-1-dark); }

/* Utility: price tag styling (matches product card) */
.price { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: var(--fs-body); }