/* ============================================================
   MZ Wallace — Colors & Type
   Source: mzw-shopify theme (base.css, head-css.liquid, settings)
   ============================================================ */

/* ---- Font Faces ---- */
@font-face {
  font-family: 'MZW Sans';
  font-display: swap;
  src: url('fonts/font-MZW-Sans-Fine.woff2') format('woff2');
  font-weight: 100 300;
}
@font-face {
  font-family: 'MZW Sans';
  font-display: swap;
  src: url('fonts/font-MZW-Sans-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'MZW Sans';
  font-display: swap;
  src: url('fonts/font-MZW-Sans-Medium.woff2') format('woff2');
  font-weight: 500 600;
}
@font-face {
  font-family: 'MZW Sans';
  font-display: swap;
  src: url('fonts/font-MZW-Sans-Bold.woff2') format('woff2');
  font-weight: 700;
}
@font-face {
  font-family: 'MZW Sans';
  font-display: swap;
  src: url('fonts/font-MZW-Sans-ExtraBold.woff2') format('woff2');
  font-weight: 800 900;
}

@font-face {
  font-family: 'Monument Grotesk';
  font-display: swap;
  src: url('fonts/font-MonumentGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
}
@font-face {
  font-family: 'Monument Grotesk';
  font-display: swap;
  src: url('fonts/font-MonumentGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Monument Grotesk';
  font-display: swap;
  src: url('fonts/font-MonumentGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
}
@font-face {
  font-family: 'Monument Grotesk';
  font-display: swap;
  src: url('fonts/font-MonumentGrotesk-Bold.woff2') format('woff2');
  font-weight: 600 700;
}

@font-face {
  font-family: 'Monument Grotesk Mono';
  font-display: swap;
  src: url('fonts/font-MonumentGroteskMono-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Monument Grotesk Mono';
  font-display: swap;
  src: url('fonts/font-MonumentGroteskMono-Medium.woff2') format('woff2');
  font-weight: 500;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---- Font Families ---- */
  --font-sans: 'MZW Sans', system-ui, sans-serif;
  --font-heading: 'MZW Sans', system-ui, sans-serif;
  --font-body: 'MZW Sans', system-ui, sans-serif;
  --font-accent: 'Monument Grotesk Mono', ui-monospace, monospace;
  --font-mono: 'Monument Grotesk Mono', ui-monospace, monospace;

  /* ---- Base Colors (from settings_schema defaults) ---- */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-fg: #272727;                    /* body text */
  --color-fg-heading: #000000;            /* headings */
  --color-bg: #FFFFFF;                    /* page background */
  --color-primary: #000F9F;               /* deep indigo — links & primary CTA */
  --color-primary-hover: #000000;
  --color-accent: #11059F;                /* accent — slightly more violet */
  --color-border: rgba(39, 39, 39, 0.19); /* #27272730 — translucent hairline */
  --color-shadow: rgba(0, 0, 0, 1);       /* multiplied by alpha below */

  /* Semantic */
  --color-error: #c92b2a;
  --color-warning: #fab005;
  --color-success: #2e9e44;
  --color-dark-red: #740404;

  /* Badges (from settings_data) */
  --badge-available: #49b338;
  --badge-low-stock: #fab005;
  --badge-out-of-stock: #000000;
  --badge-mzw-exclusive: #11059F;
  --badge-pre-order: #49b338;

  /* Checkout */
  --checkout-accent: #272727;
  --checkout-button: #272727;
  --checkout-error: #ee2663;

  /* ---- Typography — Scale ---- */
  --font-size-2xs: 0.625rem;   /* 10 */
  --font-size-xs:  0.8125rem;  /* 13 */
  --font-size-sm:  0.875rem;   /* 14 */
  --font-size-md:  1rem;       /* 16 — body default */
  --font-size-lg:  1.125rem;   /* 18 */

  --font-h1-mobile: 2.5rem;   /* 40 */
  --font-h1:        3rem;     /* 48 */
  --font-h2-mobile: 2rem;     /* 32 */
  --font-h2:        2.25rem;  /* 36 */
  --font-h3-mobile: 1.25rem;  /* 20 */
  --font-h3:        1.5rem;   /* 24 */
  --font-h4-mobile: 1.125rem; /* 18 */
  --font-h4:        1.25rem;  /* 20 */
  --font-h5:        1.125rem; /* 18 */
  --font-h6:        1rem;     /* 16 */

  /* Weights — MZ Wallace leans light/regular */
  --font-weight-light: 300;
  --font-weight-regular: 400;     /* default for headings + body */
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-display-tight: 1;
  --line-height-display: 1.1;
  --line-height-display-loose: 1.2;
  --line-height-heading-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-heading-loose: 1.35;
  --line-height-body-tight: 1.15;
  --line-height-body: 1.4;
  --line-height-body-loose: 1.65;  /* default body */

  /* Letter spacing — loose is brand default */
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-loose: 0.03em;     /* brand default on headings */

  /* ---- Spacing — Utopia fluid scale ---- */
  --space-2xs: clamp(0.5rem, 0.44rem + 0.2vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.66rem + 0.29vw, 0.9375rem);
  --space-s:   clamp(1rem, 0.88rem + 0.39vw, 1.25rem);
  --space-m:   clamp(1.5rem, 1.32rem + 0.59vw, 1.875rem);
  --space-l:   clamp(2rem, 1.76rem + 0.78vw, 2.5rem);
  --space-xl:  clamp(3rem, 2.65rem + 1.18vw, 3.75rem);

  /* ---- Layout widths ---- */
  --narrow-content-width: 36rem;
  --normal-content-width: 42rem;
  --wide-content-width:   50rem;
  --narrow-page-width:    80rem;
  --normal-page-width:   120rem;
  --wide-page-width:     150rem;

  /* Section heights */
  --section-height-small: 50svh;
  --section-height-medium: 65svh;
  --section-height-large: 80svh;

  /* ---- Borders & Radii ---- */
  --border-width: 1px;
  --radius-xs: 0.2rem;    /* buttons, inputs */
  --radius-sm: 0.25rem;
  --radius-md: 0.8rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;  /* swatches, pills */

  /* ---- Shadows (restrained) ---- */
  --shadow-drawer:  0px 4px 20px rgba(0,0,0,0.15);
  --shadow-popover: 0px 4px 20px rgba(0,0,0,0.30);
  --shadow-ring:
    oklch(from currentColor l c h / 0.1) 0 0 0 1px,
    oklch(from currentColor l c h / 0.1) 0 1px 3px 0,
    oklch(from currentColor l c h / 0.1) 0 1px 2px -1px;

  /* ---- Motion ---- */
  --duration-short: 100ms;
  --duration-base: 150ms;
  --duration-medium: 300ms;
  --duration-long: 600ms;
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-quad:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:    cubic-bezier(0.66, 0, 0.34, 1);
  --ease-hover:     cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ---- Sizing ---- */
  --icon-size-xs: 0.85em;
  --icon-size-sm: 1.25em;
  --icon-size:    1.25em;
  --icon-size-md: 1.375em;
  --icon-size-lg: 1.5em;
  --button-size-md: 36px;
  --touch-target: 44px;
  --header-height: 55px;
  --header-height-desktop: 65px;

  /* Z-index layers */
  --z-base: 0;
  --z-raised: 2;
  --z-sticky: 8;
  --z-overlay: 16;
  --z-drawer: 18;
  --z-temporary: 20;
}

/* ============================================================
   SEMANTIC PRESETS
   Body default is MZW Sans regular, loose tracking on headings.
   ============================================================ */
body,
.mzw-body {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-loose);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-fg);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--font-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-loose);
  color: var(--color-fg-heading);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--font-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-loose);
  color: var(--color-fg-heading);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--font-h3);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-loose);
  color: var(--color-fg-heading);
}
h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-loose);
  color: var(--color-fg-heading);
}
h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--font-h5);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-loose);
}
h6, .h6 {
  font-family: var(--font-heading);
  font-size: var(--font-h6);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-loose);
}

/* Editorial display — all caps, brand signature */
.type-headline {
  font-family: var(--font-heading);
  font-size: var(--font-h1);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-wrap: balance;
}

.type-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg);
}

.type-subheader {
  font-family: var(--font-heading);
  font-size: var(--font-h3);
  font-weight: 500;
  line-height: 1.25;
}

.type-paragraph-big {
  font-family: var(--font-body);
  font-size: var(--font-h4);
  font-weight: 400;
  line-height: 1.4;
}

.type-small {
  font-size: var(--font-size-xs);
  line-height: 1.25;
}

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

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