/* ============================================================
   MORNING MOB — Colors & Type Foundations
   Archival editorial e-commerce. Pure white canvas, black
   Garamond display, light tracked Helvetica utility type.
   There is no brand accent color — warmth lives in photography.
   ============================================================ */

/* EB Garamond — closest open-source match to the antique serif.
   Helvetica Neue is a system font (Arial fallback); no webfont
   is bundled for it. See README "Font substitutions". */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ---- Brand color: there is none. Ink on canvas. ---- */
  --primary: #000000;

  /* ---- Ink / Text ---- */
  --ink:          #000000; /* headlines, primary text, true black */
  --body:         #3a3a3a; /* default running text */
  --body-strong:  #1a1a1a; /* lead paragraphs, emphasis */
  --muted:        #8a8a8a; /* footer links, captions, breadcrumbs, ghost labels */
  --on-primary:   #ffffff; /* text on black fills */
  --on-light:     #000000;

  /* ---- Canvas & Surface ---- */
  --canvas:           #ffffff; /* default page floor — true white */
  --surface-soft:     #faf9f7; /* newsletter bands, subtle dividers */
  --surface-card:     #f7f5f2; /* secondary card / filter backgrounds */
  --surface-elevated: #f0ede8; /* hover states, nested containers */

  /* ---- Hairlines & Borders (warm, never cold) ---- */
  --hairline:        #d8d4ce; /* default 1px divider */
  --hairline-strong: #b8b3ac; /* focus states, active inputs, section rules */

  /* ---- Archival accent tones — PROVENANCE & EDITORIAL ONLY ----
     Never use on commerce/system surfaces. */
  --parchment:    #f2ede4; /* OOAK provenance badge background */
  --aged-linen:   #e8e2d8; /* editorial story page surface */
  --tobacco:      #8b6f4e; /* OOAK badge text — antique brown */
  --indigo-faded: #4a5a7a; /* editorial accent */
  --sage:         #7a8c6e; /* seasonal editorial accent */
  --rust:         #9e4e2e; /* editorial accent — period-quilt terracotta */

  /* ---- Semantic (used very sparingly) ---- */
  --warning: #b8862a; /* low stock, shipping cutoff */
  --success: #4a7a52; /* order confirmation */

  /* ============================================================
     TYPOGRAPHY — base families
     ============================================================ */
  --font-serif: 'EB Garamond', Garamond, 'Times New Roman', Georgia, serif;
  --font-sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;

  --weight-light:   300;
  --weight-regular: 400;

  /* ============================================================
     SPACING — base unit 4px
     ============================================================ */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-xxl: 64px;
  --space-section: 80px;

  /* ============================================================
     RADIUS — always 0. Rectilinear system.
     ============================================================ */
  --radius-none: 0px;
  --radius-xs:   2px;  /* not used */
  --radius-sm:   4px;  /* not used */
  --radius-md:   6px;  /* not used */
  --radius-full: 9999px; /* not used */

  /* ---- Layout ---- */
  --content-max: 1280px; /* narrower than typical fashion site — intimacy */
  --measure:     640px;  /* editorial body column max-width */

  /* ---- Motion (observed, not measured) ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
}

/* ============================================================
   SEMANTIC TYPE SCALE
   Garamond for ALL display/headline/product-name type (sentence
   case, 400, never bold). Helvetica for ALL utility type
   (light/regular, tracked 1–2px).
   ============================================================ */

/* --- Display (Garamond) --- */
.t-display-xl {
  font-family: var(--font-serif);
  font-size: 72px; font-weight: 400; line-height: 1.05; letter-spacing: -0.5px;
}
.t-display-lg {
  font-family: var(--font-serif);
  font-size: 52px; font-weight: 400; line-height: 1.1; letter-spacing: -0.5px;
}
.t-display-md {
  font-family: var(--font-serif);
  font-size: 36px; font-weight: 400; line-height: 1.15; letter-spacing: 0;
}
.t-display-sm {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: 0;
}

/* --- Titles (Garamond) --- */
.t-title-lg {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 400; line-height: 1.35; letter-spacing: 0;
}
.t-title-md {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: 0;
}
.t-title-sm {
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0;
}

/* --- Utility (Helvetica) --- */
.t-label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 400; line-height: 1.3; letter-spacing: 2px;
  text-transform: uppercase;
}
.t-body-md {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 300; line-height: 1.6; letter-spacing: 0;
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 300; line-height: 1.6; letter-spacing: 0;
}
.t-caption {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 300; line-height: 1.4; letter-spacing: 0.5px;
}
.t-button {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 2px;
  text-transform: uppercase;
}
.t-nav {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 1px;
}
.t-price {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 300; line-height: 1; letter-spacing: 0.5px;
}

/* ============================================================
   ELEMENT DEFAULTS — map raw tags to the scale
   ============================================================ */
body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font-family: var(--font-serif); font-weight: 400; font-size: 52px; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); margin: 0; }
h2 { font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.15; color: var(--ink); margin: 0; }
h3 { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.35; color: var(--ink); margin: 0; }
h4 { font-family: var(--font-serif); font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--ink); margin: 0; }
p  { font-family: var(--font-sans); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--body); margin: 0; }
small { font-family: var(--font-sans); font-weight: 300; font-size: 12px; color: var(--muted); }
a { color: inherit; text-decoration: none; }

/* ============================================================
   PHONE TYPE SCALE — the display sizes above are desktop-scale (up to 72px)
   and overflow on narrow screens. Scale the headings down at ≤600px.
   .mm-drop-title carries an inline font-size, so it needs !important.
   ============================================================ */
@media (max-width: 600px) {
  .t-display-xl { font-size: 40px; }
  .t-display-lg { font-size: 34px; }
  .t-display-md { font-size: 28px; }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .mm-drop-title { font-size: 40px !important; }
}