/* =============================================================
 * Machado Muay Thai — Design System
 * Colors & Typography Tokens
 * =============================================================
 *
 * The brand lives in a black-and-white world with a single hot
 * yellow accent borrowed from fight-poster culture. Thai red and
 * Brazilian green show up as small flag accents only — never as
 * primary surfaces.
 *
 * Type is loud. Display is heavy, ultra-condensed, ALL CAPS.
 * Body copy stays grounded in a clean neutral sans.
 * ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- COLOR — Neutrals (the canvas) ---------- */
  --mt-black:           #0A0A0A;   /* near-black, primary background */
  --mt-coal:            #131313;   /* card backgrounds on black */
  --mt-iron:            #1E1E1E;   /* elevated surface on black */
  --mt-graphite:        #2A2A2A;   /* borders / dividers on dark */
  --mt-smoke:           #4A4A4A;   /* tertiary text on dark */
  --mt-fog:             #8A8A8A;   /* muted text */
  --mt-ash:             #C9C9C9;   /* light divider on light */
  --mt-bone:            #F2F0EB;   /* paper background (warm off-white) */
  --mt-white:           #FFFFFF;

  /* ---------- COLOR — Brand accent ---------- */
  --mt-yellow:          #F5D000;   /* signature electric yellow (CTA, accents) */
  --mt-yellow-hot:      #FFE21F;   /* brighter highlight on press / focus */
  --mt-yellow-dim:      #C9AB00;   /* darker yellow for borders / hover */

  /* ---------- COLOR — Flag accents (use sparingly) ---------- */
  --mt-thai-red:        #C8102E;   /* Thailand flag red */
  --mt-thai-blue:       #1B3A8B;   /* Thailand flag blue */
  --mt-brazil-green:    #1F8A4C;   /* Brazil flag green */
  --mt-brazil-yellow:   #FEDF00;   /* Brazil flag yellow */

  /* ---------- COLOR — Semantic / state ---------- */
  --mt-danger:          #E0322B;
  --mt-success:         #1F8A4C;
  --mt-warning:         #F5D000;

  /* ---------- COLOR — Foreground / background pairs ---------- */
  --mt-bg:              var(--mt-black);
  --mt-bg-elev:         var(--mt-coal);
  --mt-bg-elev-2:       var(--mt-iron);
  --mt-fg:              var(--mt-white);
  --mt-fg-muted:        var(--mt-fog);
  --mt-fg-subtle:       var(--mt-smoke);
  --mt-border:          var(--mt-graphite);
  --mt-border-strong:   #3A3A3A;
  --mt-accent:          var(--mt-yellow);
  --mt-on-accent:       var(--mt-black);

  /* ---------- TYPE — Families ---------- */
  --mt-font-display:    'Anton', 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --mt-font-condensed:  'Barlow Condensed', 'Oswald', 'Impact', sans-serif;
  --mt-font-body:       'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TYPE — Tracking ---------- */
  --mt-track-tight:     -0.01em;
  --mt-track-normal:    0;        /* @kind font */
  --mt-track-wide:      0.04em;
  --mt-track-wider:     0.08em;
  --mt-track-display:   0.02em;   /* slight opening for all-caps display */

  /* ---------- TYPE — Sizes (clamped, fluid) ---------- */
  --mt-size-mega:       clamp(56px, 9vw, 144px);   /* hero takeover */
  --mt-size-hero:       clamp(44px, 6vw, 96px);    /* page hero */
  --mt-size-h1:         clamp(36px, 4vw, 64px);
  --mt-size-h2:         clamp(28px, 3vw, 44px);
  --mt-size-h3:         clamp(22px, 2vw, 28px);
  --mt-size-h4:         18px;
  --mt-size-body-lg:    18px;
  --mt-size-body:       16px;
  --mt-size-body-sm:    14px;
  --mt-size-micro:      12px;
  --mt-size-eyebrow:    13px;

  /* ---------- TYPE — Line heights ---------- */
  --mt-lh-display:      0.92;     /* @kind font */
  --mt-lh-tight:        1.05;     /* @kind font */
  --mt-lh-snug:         1.25;     /* @kind font */
  --mt-lh-body:         1.55;     /* @kind font */
  --mt-lh-loose:        1.7;      /* @kind font */

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

  /* ---------- RADII (sparing — brand is rectilinear) ---------- */
  --mt-radius-none:     0;
  --mt-radius-sm:       2px;
  --mt-radius-md:       4px;
  --mt-radius-lg:       8px;
  --mt-radius-pill:     999px;

  /* ---------- BORDERS ---------- */
  --mt-stroke-hair:     1px;
  --mt-stroke:          2px;
  --mt-stroke-bold:     3px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --mt-shadow-sm:       0 2px 0 0 rgba(0,0,0,0.6);
  --mt-shadow-md:       0 6px 18px rgba(0,0,0,0.45);
  --mt-shadow-lg:       0 18px 40px rgba(0,0,0,0.55);
  --mt-shadow-glow:     0 0 0 3px rgba(245,208,0,0.35);
  --mt-shadow-inset:    inset 0 0 0 1px rgba(255,255,255,0.06);

  /* ---------- GRADIENTS / OVERLAYS ---------- */
  --mt-overlay-dim:     linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.75) 100%);   /* @kind color */
  --mt-overlay-vignette:radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);   /* @kind color */
  --mt-overlay-section: linear-gradient(180deg, var(--mt-black) 0%, #1A1A1A 50%, var(--mt-black) 100%);

  /* ---------- MOTION ---------- */
  --mt-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --mt-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --mt-dur-fast:        120ms;    /* @kind other */
  --mt-dur-base:        200ms;    /* @kind other */
  --mt-dur-slow:        320ms;    /* @kind other */
}

/* =============================================================
 * Semantic type classes — apply these directly, or use as a
 * reference for inline styles. Display is uppercase by default
 * because the brand IS uppercase.
 * ============================================================= */

.mt-eyebrow {
  font-family: var(--mt-font-condensed);
  font-weight: 600;
  font-size: var(--mt-size-eyebrow);
  letter-spacing: var(--mt-track-wider);
  text-transform: uppercase;
  color: var(--mt-yellow);
}

.mt-mega,
.mt-hero,
.mt-h1,
.mt-h2,
.mt-h3 {
  font-family: var(--mt-font-display);
  font-weight: 400;     /* Anton ships at one weight; it's already heavy */
  text-transform: uppercase;
  letter-spacing: var(--mt-track-display);
  line-height: var(--mt-lh-display);
  color: var(--mt-fg);
}

.mt-mega  { font-size: var(--mt-size-mega); }
.mt-hero  { font-size: var(--mt-size-hero); }
.mt-h1    { font-size: var(--mt-size-h1); }
.mt-h2    { font-size: var(--mt-size-h2); }
.mt-h3    { font-size: var(--mt-size-h3); line-height: var(--mt-lh-tight); }

.mt-h4 {
  font-family: var(--mt-font-condensed);
  font-weight: 700;
  font-size: var(--mt-size-h4);
  letter-spacing: var(--mt-track-wide);
  text-transform: uppercase;
  line-height: var(--mt-lh-snug);
}

.mt-body-lg,
.mt-body,
.mt-body-sm {
  font-family: var(--mt-font-body);
  font-weight: 400;
  line-height: var(--mt-lh-body);
  letter-spacing: var(--mt-track-normal);
  color: var(--mt-fg);
}

.mt-body-lg { font-size: var(--mt-size-body-lg); }
.mt-body    { font-size: var(--mt-size-body); }
.mt-body-sm { font-size: var(--mt-size-body-sm); color: var(--mt-fg-muted); }

.mt-micro {
  font-family: var(--mt-font-body);
  font-size: var(--mt-size-micro);
  letter-spacing: var(--mt-track-wide);
  text-transform: uppercase;
  color: var(--mt-fg-muted);
}

.mt-stat {
  font-family: var(--mt-font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: var(--mt-track-display);
}