/* ============================================================================
   MAXIVO — Design System (tokens, base, primitives)
   Ported 1:1 from the Maxivo canvas. All screens share these tokens.
   ============================================================================ */

:root {
  /* Type */
  --mx-display: 'Big Shoulders Display', 'Arial Narrow', system-ui, sans-serif;
  --mx-body: 'Manrope', system-ui, sans-serif;
  --mx-mono: 'DM Mono', ui-monospace, monospace;

  /* Core palette */
  --mx-bg: #E4E3E1;         /* page ground (light) */
  --mx-ink: #121211;        /* near-black text + solid surfaces */
  --mx-cream: #EFEEEC;      /* off-white on dark */
  --mx-cream-2: #F4F3F1;    /* brightest cream (hero copy, light buttons) */
  --mx-panel: #EDECEA;      /* light panel (order summary, table hi-row) */

  /* Dark surfaces */
  --mx-dark: #121211;
  --mx-dark-2: #1F1E1D;     /* placeholder stripe A (dark) */
  --mx-dark-3: #272625;     /* placeholder stripe B (dark) */

  /* Muted inks (on light) */
  --mx-mut: #4A4845;        /* secondary body */
  --mx-mut-2: #6D6B67;      /* prices, tertiary */
  --mx-mut-3: #8B8985;      /* mono micro-labels */
  --mx-mut-3b: #8C8984;     /* mono micro-labels (alt) */

  /* On dark */
  --mx-on-dark: #B9B6B2;    /* body on dark */
  --mx-on-dark-mut: #8C8984;
  --mx-on-dark-plc: #6A6863;/* placeholder label on dark */
  --mx-foot-mut: #77746F;   /* footer legal */

  /* Lines */
  --mx-line: rgba(18,18,17,.13);
  --mx-line-2: rgba(18,18,17,.25);
  --mx-line-3: rgba(18,18,17,.30);
  --mx-line-4: rgba(18,18,17,.40);
  --mx-line-dark: rgba(239,238,236,.16);
  --mx-line-dark-2: rgba(239,238,236,.35);
  --mx-line-dark-3: rgba(239,238,236,.45);

  /* Accent (one pop of colour: New badges, eyebrows on dark) */
  --mx-accent: #B93E92;

  /* Image placeholders (until real photography lands) */
  --mx-plc: repeating-linear-gradient(135deg, #D9D8D5 0 7px, #E7E6E4 7px 14px);
  --mx-plc-dark: repeating-linear-gradient(135deg, #1F1E1D 0 7px, #272625 7px 14px);

  /* Rhythm */
  --mx-pad-x: 40px;
}

/* ---- reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.maxivo,
body {
  margin: 0;
  background: var(--mx-bg);
  color: var(--mx-ink);
  font-family: var(--mx-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.maxivo img { display: block; max-width: 100%; }
body.maxivo a { color: inherit; text-decoration: none; }
body.maxivo a:hover { color: var(--mx-ink); text-decoration: underline; text-underline-offset: 3px; }
body.maxivo input, body.maxivo button, body.maxivo select, body.maxivo textarea { font-family: inherit; }
body.maxivo h1, body.maxivo h2, body.maxivo h3, body.maxivo h4 { font-family: var(--mx-display); }

/* Kill Glozin's default page chrome / containers on Maxivo pages so our
   full-bleed sections read exactly as designed. */
body.maxivo .maxivo-main { display: block; }
body.maxivo #main-content,
body.maxivo .site-content,
body.maxivo .page-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* ---- shared primitives ---- */
.mx-plc  { background: var(--mx-plc);  display: grid; place-items: center; }
.mx-plc--dark { background: var(--mx-plc-dark); display: grid; place-items: center; }
.mx-plc-label {
  font: 400 10px var(--mx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mx-mut-3);
  text-align: center; padding: 8px;
}
.mx-plc--dark .mx-plc-label { color: var(--mx-on-dark-plc); }

.mx-eyebrow { font: 400 11px var(--mx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mx-mut-3); }
.mx-mono-label { font: 400 10px var(--mx-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mx-mut-3); }

.mx-btn {
  display: inline-block; padding: 15px 26px; cursor: pointer; border: 0;
  font: 500 12px var(--mx-body); letter-spacing: .1em; text-transform: uppercase;
  background: var(--mx-ink); color: var(--mx-cream);
}
.mx-btn:hover { text-decoration: none; opacity: .92; color: var(--mx-cream); }
.mx-btn--light { background: var(--mx-cream-2); color: var(--mx-ink); }
.mx-btn--light:hover { color: var(--mx-ink); }
.mx-btn--ghost { background: transparent; color: var(--mx-ink); border: 1px solid var(--mx-line-4); }
.mx-btn--ghost-light { background: transparent; color: var(--mx-cream); border: 1px solid var(--mx-line-dark-3); }
.mx-btn--ghost-light:hover { color: var(--mx-cream); }

/* “New / Low stock” product flag */
.mx-flag {
  position: absolute; top: 12px; left: 12px;
  font: 700 9px var(--mx-mono); letter-spacing: .16em; text-transform: uppercase;
  background: var(--mx-accent); color: #fff; padding: 4px 8px;
}
.mx-flag--ink { background: var(--mx-ink); color: var(--mx-cream); }