/* ============================================================
   MTHOR SHOP — Colors & Type
   ============================================================
   Athletic streetwear / sneaker resale aesthetic.
   Bold blocky display + clean modern body.
   ============================================================ */

/* Local brand fonts */
@font-face {
  font-family: "Akira Expanded";
  src: url("fonts/Akira_Expanded_Demo.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "League Spartan";
  src: url("fonts/LeagueSpartan-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/LeagueSpartan-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     CORE PALETTE — three-color brand
     ---------------------------------------------------------- */
  --mthor-black:    #000000;   /* primary surface, headlines, logo bg */
  --mthor-white:    #ffffff;   /* primary fg on dark, surfaces */
  --mthor-gray:     #808080;   /* mid-gray accent, borders, secondary text */
  --mthor-teal:     #0ebab5;   /* signature accent — CTAs, marks, highlights */

  /* ----------------------------------------------------------
     EXTENDED NEUTRALS — derived from the gray axis
     ---------------------------------------------------------- */
  --mthor-ink:      #0a0a0a;   /* near-black surfaces, deeper than pure */
  --mthor-charcoal: #1a1a1a;   /* card surfaces on black */
  --mthor-graphite: #2b2b2b;   /* elevated surfaces on black */
  --mthor-stone:    #4a4a4a;   /* dark borders */
  --mthor-mid:      #808080;   /* alias of mthor-gray */
  --mthor-silver:   #b3b3b3;   /* light secondary text */
  --mthor-fog:      #d9d9d9;   /* dividers on light */
  --mthor-mist:     #ececec;   /* subtle bg on light */
  --mthor-snow:     #f6f6f6;   /* page bg on light */

  /* ----------------------------------------------------------
     TEAL VARIATIONS
     ---------------------------------------------------------- */
  --mthor-teal-deep: #0a8d89;  /* press / hover-darker */
  --mthor-teal-soft: #2dd4ce;  /* highlight / hover-lighter */
  --mthor-teal-tint: #d6f5f3;  /* tinted bg, badges */

  /* ----------------------------------------------------------
     SEMANTIC COLOR TOKENS — light mode default
     ---------------------------------------------------------- */
  --bg:           var(--mthor-white);
  --bg-elev:      var(--mthor-snow);
  --bg-card:      var(--mthor-white);
  --bg-inverse:   var(--mthor-black);
  --bg-accent:    var(--mthor-teal);

  --fg:           var(--mthor-black);
  --fg-muted:     var(--mthor-mid);
  --fg-subtle:    var(--mthor-silver);
  --fg-inverse:   var(--mthor-white);
  --fg-accent:    var(--mthor-teal);
  --fg-on-accent: var(--mthor-white);

  --border:       var(--mthor-fog);
  --border-strong:var(--mthor-mid);
  --border-inverse:var(--mthor-graphite);

  /* status — borrowed from streetwear/auth-tagging conventions */
  --success:      #18b85a;
  --warning:      #f59e0b;
  --danger:       #e8463c;
  --info:         var(--mthor-teal);

  /* ----------------------------------------------------------
     TYPE FAMILIES
     ---------------------------------------------------------- */
  /* Display: Akira Expanded (Demo version) — wide, blocky, all-caps. */
  --font-display: "Akira Expanded", "Arial Black", "Impact", sans-serif;
  --font-body:    "League Spartan", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----------------------------------------------------------
     TYPE SCALE — display-led, mobile-first
     ---------------------------------------------------------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   84px;
  --fs-6xl:   112px;

  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-base:  1.45;
  --lh-loose: 1.65;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em;
  --ls-widest:  0.22em;

  /* ----------------------------------------------------------
     SPACING — 4px grid
     ---------------------------------------------------------- */
  --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 — minimal. brand uses square + softly-rounded only.
     ---------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;   /* cards / panels */
  --radius-xl:   28px;   /* hero cards, logo container */
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — used sparingly. brand is mostly flat / borderly.
     ---------------------------------------------------------- */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.08);
  --shadow-md:    0 6px 20px rgba(0,0,0,0.10);
  --shadow-lg:    0 18px 48px rgba(0,0,0,0.18);
  --shadow-glow:  0 0 0 4px rgba(14,186,181,0.25);
  --shadow-pop:   6px 6px 0 0 var(--mthor-black);  /* hard offset, sticker-style */

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-snap:  cubic-bezier(0.5, -0.3, 0.2, 1.4); /* tiny overshoot */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ------------------------------------------------------------
   SEMANTIC TYPE — apply to actual elements
   ------------------------------------------------------------ */

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

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 9vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.eyebrow, .overline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.subtitle {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
}

.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

blockquote, .quote {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  border-left: 3px solid var(--mthor-teal);
  padding-left: var(--sp-4);
}

.price {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-normal);
  font-size: var(--fs-xl);
}

.tag, .badge {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}