/* ============================================================
   MAD MONKEY DESIGN SYSTEM — Colors & Typography
   v2.1 · "Every day is a holiday"
   ============================================================ */

/* ── Webfonts ─────────────────────────────────────────────── */
@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  font-weight: 500;
  font-style: normal;
  src: url("fonts/Montserrat-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  font-style: normal;
  src: url("fonts/Montserrat-Bold.ttf") format("truetype");
  font-display: swap;
}

/* ── Brand Palette ────────────────────────────────────────────
   Strict 4-color brand palette. No other hues are permitted
   in the system except text greys. See preview/colors-brand.html
   ─────────────────────────────────────────────────────────── */
:root {
  --mm-off-white:   #FAFAFA;   /* primary surface */
  --mm-neutral:     #F0F0F0;   /* surface alt */
  --mm-teal-light:  #78C3C0;   /* accent / highlight */
  --mm-teal:        #388688;   /* primary brand teal */

  /* Brand-derived utilities (kept because they're tints/shades of the four core colors,
     used by the semantic layer for hover states, washes, and rules) */
  --mm-teal-hover:  #2A6567;   /* primary hover (deeper teal) */
  --mm-teal-wash:   #EAF5F5;   /* primary-light wash / success-light */
  --mm-white:       #FFFFFF;   /* canvas */
  --mm-border:      #E0E0E0;   /* default rule between #F0F0F0 sections */

  /* Text greys — neutral only, no hue */
  --mm-text:        #1A1A1A;   /* primary text / dark surface */
  --mm-text-muted:  #444444;
  --mm-text-subtle: #666666;
  --mm-text-placeholder: #999999;


  /* ── Semantic Tokens ──────────────────────────────────────────
     Mirrors preview/colors-semantic.html. Always reference these
     in components — never the raw --mm-* tokens.
     ────────────────────────────────────────────────────────── */

  /* Brand surfaces & actions */
  --color-primary:         var(--mm-teal);
  --color-primary-hover:   var(--mm-teal-hover);
  --color-accent:          var(--mm-teal-light);
  --color-primary-light:   var(--mm-teal-wash);
  --color-surface:         var(--mm-off-white);
  --color-surface-alt:     var(--mm-neutral);
  --color-canvas:          var(--mm-white);

  /* CTA aliases */
  --color-cta:             var(--mm-teal);
  --color-cta-hover:       var(--mm-teal-hover);

  /* Page background defaults to surface */
  --color-bg:              var(--mm-off-white);

  /* Text */
  --color-text:            var(--mm-text);
  --color-text-muted:      var(--mm-text-muted);
  --color-text-subtle:     var(--mm-text-subtle);
  --color-text-placeholder:var(--mm-text-placeholder);
  --color-text-link:       var(--mm-teal);
  --color-text-on-dark:    var(--mm-off-white);
  --color-text-on-primary: var(--mm-white);

  /* Borders & dividers */
  --color-border:          var(--mm-border);
  --color-border-brand:    var(--mm-teal-light);
  --color-border-strong:   var(--mm-teal);

  /* States */
  --color-success:         var(--mm-teal);
  --color-success-light:   var(--mm-teal-wash);
  --color-disabled:        var(--mm-text-muted);
  --color-disabled-bg:     var(--mm-off-white);
  --color-disabled-fg:     var(--mm-text-placeholder);

  /* Focus */
  --color-focus-ring:      rgba(120, 195, 192, 0.35);

  /* Component-specific surfaces */
  --color-header-bg:       var(--mm-off-white);
  --color-header-border:   var(--mm-border);
  --color-search-bg:       var(--mm-white);
  --color-search-border:   var(--mm-border);

  --color-community-bg:    var(--mm-teal-light);
  --color-on-community:    var(--mm-text);

  /* Sold-out / dead-card */
  --color-deadcard-bg:     var(--mm-neutral);
  --color-deadcard-border: var(--mm-border);
  --color-deadcard-fg:     var(--mm-text-subtle);
  --color-deadcard-meta:   var(--mm-text-placeholder);


  /* ── Typography ───────────────────────────────────────────── */
  --font-sans:    "Montserrat", "Nunito", system-ui, sans-serif;
  --font-display: "Montserrat", "Nunito", system-ui, sans-serif;

  /* Scale */
  --text-xs:   0.70rem;   /* 11px */
  --text-sm:   0.80rem;   /* 13px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */
  --text-5xl:  5.5rem;    /* 88px */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.20em;

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ── Shadows (cool teal-tinted) ───────────────────────────── */
  --shadow-sm:     0 1px 4px  rgba(56, 134, 136, 0.08);
  --shadow-md:     0 2px 12px rgba(56, 134, 136, 0.10);
  --shadow-lg:     0 8px 32px rgba(56, 134, 136, 0.14);
  --shadow-xl:     0 16px 56px rgba(56, 134, 136, 0.18);
  --shadow-card:   0 2px 12px rgba(56, 134, 136, 0.08);
  --shadow-raised: 0 4px 16px rgba(56, 134, 136, 0.12);
  --shadow-cta:    0 2px 8px  rgba(56, 134, 136, 0.25);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   150ms;
  --duration-normal: 280ms;
  --duration-slow:   450ms;
}

/* ── Semantic HTML Tags ───────────────────────────────────── */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-text);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--color-text);
}

p, .body {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.body-sm {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
}

.caption {
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-text);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-primary-hover); }