/* The Modern Basic Co. — design foundations: color, type, space, motion */
/* ============================================================
   The Modern Basic Co. — Design Foundations
   Colors, Type, Space, Radius, Shadow
   ============================================================ */

/* Webfont imports (Google Fonts substitutions — see README) */


:root {
  /* ---------- PRIMARY PALETTE ----------
     Six approved colors, drawn from the Hybrid System color matrix.
     Treat WARM-WHITE as the canonical background; MATTE-BLACK / DEEP-NAVY
     are the workhorse type colors. SAND, BEIGE, OLIVE are accents and
     surface tints — never type on small body copy.                          */

  --warm-white:    #F2EDE3;  /* primary background, packaging interior      */
  --sand:          #DBC9A9;  /* secondary surface, sleeves                  */
  --beige:         #B8A07E;  /* accent, hangtags, ribbons                   */
  --olive:         #4F5236;  /* deep accent, leather goods                  */
  --deep-navy:     #1E2A3A;  /* primary type alt, leather goods             */
  --matte-black:   #141414;  /* primary type, brand-mark                    */

  /* ---------- EXTENDED NEUTRALS ----------
     Used sparingly for UI rails, dividers, and disabled states.
     Mixed off WARM-WHITE so everything reads on warm paper, not bluish.    */

  --paper-50:      #FBF8F2;
  --paper-100:     #F2EDE3;  /* === warm-white */
  --paper-200:     #E8E0D0;
  --paper-300:     #D6CAB1;
  --paper-400:     #B4A584;
  --paper-500:     #8B7E63;
  --paper-600:     #5F5645;
  --paper-700:     #3A352B;
  --paper-800:     #23211C;
  --paper-900:     #141414;  /* === matte-black */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:            var(--warm-white);
  --bg-alt:        var(--paper-50);
  --bg-elevated:   #FFFFFF;
  --bg-inverse:    var(--matte-black);

  --surface:       var(--warm-white);
  --surface-sand:  var(--sand);
  --surface-navy:  var(--deep-navy);
  --surface-olive: var(--olive);

  /* ---------- SEMANTIC FOREGROUNDS ---------- */
  --fg:            var(--matte-black);
  --fg-1:          var(--matte-black);   /* primary text */
  --fg-2:          var(--paper-700);     /* secondary text */
  --fg-3:          var(--paper-500);     /* tertiary text / captions */
  --fg-4:          var(--paper-400);     /* labels on light */
  --fg-inverse:    var(--warm-white);    /* text on dark surfaces */
  --fg-accent:     var(--olive);

  --line:          var(--paper-300);     /* hairline divider */
  --line-strong:   var(--paper-500);
  --line-inverse:  rgba(242, 237, 227, 0.16);

  /* ---------- SEMANTIC STATUS ----------
     Only use sparingly in UI. The brand prefers no traffic-light colors.   */
  --positive:      #4F5236;              /* reuse olive */
  --critical:      #7A2E1C;              /* reserved-brick, used sparingly */
  --info:          var(--deep-navy);

  /* ---------- TYPE FAMILIES ----------
     Display:  Cormorant Garamond (high-contrast classical serif).
               Stand-in for the proprietary wordmark serif.
     Body:     Cormorant Garamond at lighter weights for editorial body.
     UI/Sans:  Manrope — modern grotesque for product UI + labels.
     Mono:     JetBrains Mono — receipts, order numbers, code.               */

  --font-serif:    "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:     "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-wordmark: var(--font-serif);

  /* ---------- TYPE SCALE ----------
     The brand's voice is editorial — generous sizes, generous tracking on
     uppercase, generous leading. Match the cadence of a print catalogue.   */

  --t-display-1:   clamp(64px, 8vw, 128px);   /* hero wordmark, covers */
  --t-display-2:   clamp(48px, 6vw, 88px);    /* section openers */
  --t-display-3:   clamp(36px, 4.5vw, 64px);  /* page heroes */

  --t-h1:          44px;
  --t-h2:          32px;
  --t-h3:          24px;
  --t-h4:          20px;

  --t-body-lg:     18px;
  --t-body:        16px;
  --t-body-sm:     14px;

  --t-label:       11px;   /* the brand's letter-spaced caps labels */
  --t-label-sm:    10px;
  --t-caption:     12px;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-display:    0.96;
  --lh-heading:    1.12;
  --lh-body:       1.55;
  --lh-tight:      1.2;
  --lh-loose:      1.7;

  /* ---------- LETTER SPACING ----------
     Uppercase labels carry the brand. Tracking is wide and consistent.     */
  --ls-wordmark:   0.32em;
  --ls-label:      0.22em;
  --ls-label-tight:0.16em;
  --ls-caps:       0.12em;
  --ls-tight:      -0.01em;

  /* ---------- WEIGHTS ---------- */
  --fw-display:    400;   /* serif looks heaviest at 400; avoid heavy weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semi:       600;
  --fw-bold:       700;

  /* ---------- SPACING ----------
     8px base scale. Generous on mobile, even more generous on desktop.     */
  --s-0:           0;
  --s-1:           4px;
  --s-2:           8px;
  --s-3:           12px;
  --s-4:           16px;
  --s-5:           24px;
  --s-6:           32px;
  --s-7:           48px;
  --s-8:           64px;
  --s-9:           96px;
  --s-10:          128px;
  --s-11:          192px;

  /* ---------- RADIUS ----------
     The system is square-cornered. Reserve small radii for buttons + cards;
     never round photography or heroes.                                      */
  --r-0:           0;
  --r-1:           2px;
  --r-2:           4px;
  --r-3:           6px;
  --r-4:           8px;
  --r-pill:        999px;

  /* ---------- SHADOW ----------
     Almost never used. When used, soft + low, never glossy.                 */
  --shadow-sm:     0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-md:     0 8px 24px -8px rgba(20, 20, 20, 0.08);
  --shadow-lg:     0 24px 64px -16px rgba(20, 20, 20, 0.12);
  --shadow-inset:  inset 0 0 0 1px rgba(20, 20, 20, 0.06);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.7, 0, 1);
  --ease-soft:     cubic-bezier(0.32, 0.72, 0, 1);

  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      360ms;
  --dur-page:      560ms;

  /* ---------- LAYOUT ---------- */
  --max-w:         1440px;
  --max-w-prose:   640px;
  --gutter:        clamp(20px, 4vw, 64px);
}

/* ============================================================
   SEMANTIC ELEMENTS — apply directly when not using component classes.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-display);
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-display);
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-display);
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin: 0;
}

p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 1em;
  text-wrap: pretty;
}

.editorial-prose {
  font-family: var(--font-serif);
  font-size: var(--t-body-lg);
  line-height: var(--lh-loose);
  font-weight: var(--fw-regular);
}

/* The signature letter-spaced uppercase label used everywhere */
.label,
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--fg-2);
}

.caption {
  font-size: var(--t-caption);
  color: var(--fg-3);
  line-height: var(--lh-body);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0;
}

/* The wordmark element — used in JSX as <span class="wordmark"> */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}
.wordmark .the,
.wordmark .co {
  font-size: 0.55em;
  letter-spacing: 0.18em;
}