/* =========================================================================
   Modern Supplies — Core Design Tokens
   Colors, typography, spacing, radii, shadows.
   Import into any surface: <link rel="stylesheet" href="/colors_and_type.css">
   ========================================================================= */

/* -------- Webfonts -------- */
/* Display: condensed serif wordmark feel (substituted from logo)            */
/* Body:    humanist grotesk                                                  */
/* Mono:    utility / receipts / SKUs                                         */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ================== BRAND PALETTE ================== */
  /* Primary — forest green, drawn from the wordmark + tree mark */
  --ms-forest-900: #0F2A1D;   /* deepest — headings on cream       */
  --ms-forest-800: #163A28;   /* primary brand green (logo type)   */
  --ms-forest-700: #1F4F36;   /* buttons, links, tree fill         */
  --ms-forest-600: #2E6A48;   /* hover / highlight                 */
  --ms-forest-500: #4A8A64;   /* mid — subtle fills, tags          */
  --ms-forest-300: #A8C4B2;   /* tint — bg washes                  */
  --ms-forest-100: #E3EDE6;   /* lightest wash                     */

  /* Neutrals — warm paper, slightly cream (catalog vibe) */
  --ms-cream-50:   #FBF8F1;   /* page bg                           */
  --ms-cream-100:  #F4EEE1;   /* alt bg, cards                     */
  --ms-cream-200:  #E8DEC8;   /* dividers, muted fills             */
  --ms-stone-300:  #C6BCA9;   /* borders                           */
  --ms-stone-500:  #8A8275;   /* muted text                        */
  --ms-ink-700:    #3B3A33;   /* body text                         */
  --ms-ink-900:    #1A1A17;   /* headlines on cream                */

  /* Accent — heritage rust / amber (outdoor catalog warmth) */
  --ms-rust-700:   #A84A1C;   /* sale tags, CTAs                   */
  --ms-rust-500:   #C86B3C;   /* accents                           */
  --ms-amber-500:  #D69A3C;   /* highlights, stars                 */
  --ms-amber-200:  #F0DDB4;   /* wash                              */

  /* Semantic */
  --ms-success:    #2E6A48;   /* in-stock, success — uses forest-600 */
  --ms-warning:    #A86B12;   /* low-stock                         */
  --ms-danger:     #9B2A1E;   /* out-of-stock, errors              */
  --ms-info:       #2C5A7A;   /* lake-blue info                    */

  /* ================== SEMANTIC SURFACE TOKENS ================== */
  --ms-bg:         var(--ms-cream-50);
  --ms-bg-alt:     var(--ms-cream-100);
  --ms-bg-inverse: var(--ms-forest-900);
  --ms-surface:    #FFFFFF;

  --ms-fg-1:       var(--ms-ink-900);  /* primary text                */
  --ms-fg-2:       var(--ms-ink-700);  /* body text                   */
  --ms-fg-3:       var(--ms-stone-500);/* muted / captions            */
  --ms-fg-on-dark: var(--ms-cream-50); /* text on forest              */

  --ms-border:     var(--ms-stone-300);
  --ms-border-strong: var(--ms-ink-700);
  --ms-border-subtle: var(--ms-cream-200);

  --ms-link:       var(--ms-forest-700);
  --ms-link-hover: var(--ms-forest-600);

  /* ================== TYPOGRAPHY ================== */
  --ms-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ms-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ms-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (1.250 major third, slightly compressed) */
  --ms-text-xs:   12px;
  --ms-text-sm:   13px;
  --ms-text-base: 15px;
  --ms-text-md:   17px;
  --ms-text-lg:   20px;
  --ms-text-xl:   24px;
  --ms-text-2xl:  32px;
  --ms-text-3xl:  44px;
  --ms-text-4xl:  60px;
  --ms-text-5xl:  84px;

  --ms-leading-tight: 1.08;
  --ms-leading-snug:  1.25;
  --ms-leading-base:  1.5;
  --ms-leading-loose: 1.7;

  --ms-tracking-tight:  -0.01em;
  --ms-tracking-normal:  0;
  --ms-tracking-wide:    0.04em;
  --ms-tracking-caps:    0.14em;  /* heritage eyebrow labels */

  /* ================== SPACING ================== */
  --ms-space-1:  4px;
  --ms-space-2:  8px;
  --ms-space-3:  12px;
  --ms-space-4:  16px;
  --ms-space-5:  24px;
  --ms-space-6:  32px;
  --ms-space-7:  48px;
  --ms-space-8:  64px;
  --ms-space-9:  96px;
  --ms-space-10: 128px;

  /* ================== RADII ================== */
  /* Heritage/catalog — restrained. Most things square or 2px.  */
  --ms-radius-0:   0px;
  --ms-radius-sm:  2px;
  --ms-radius-md:  4px;
  --ms-radius-lg:  8px;
  --ms-radius-pill: 999px;

  /* ================== SHADOWS ================== */
  /* Soft, warm, low — like a catalog spread, not glassy */
  --ms-shadow-xs: 0 1px 0 rgba(26, 26, 23, 0.04);
  --ms-shadow-sm: 0 1px 2px rgba(26, 26, 23, 0.06), 0 1px 1px rgba(26, 26, 23, 0.04);
  --ms-shadow-md: 0 4px 10px rgba(26, 26, 23, 0.08), 0 1px 2px rgba(26, 26, 23, 0.05);
  --ms-shadow-lg: 0 12px 28px rgba(26, 26, 23, 0.10), 0 2px 6px rgba(26, 26, 23, 0.06);
  --ms-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(26, 26, 23, 0.05);

  /* ================== MOTION ================== */
  --ms-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ms-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ms-dur-fast:    120ms;
  --ms-dur-base:    200ms;
  --ms-dur-slow:    360ms;
}

/* =========================================================================
   BASE ELEMENT STYLES
   ========================================================================= */

html, body {
  background: var(--ms-bg);
  color: var(--ms-fg-2);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-text-base);
  line-height: var(--ms-leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .ms-display {
  font-family: var(--ms-font-display);
  color: var(--ms-fg-1);
  font-weight: 600;
  line-height: var(--ms-leading-tight);
  letter-spacing: var(--ms-tracking-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--ms-text-5xl); font-weight: 700; }
h2 { font-size: var(--ms-text-4xl); }
h3 { font-size: var(--ms-text-3xl); }
h4 { font-size: var(--ms-text-2xl); }
h5 { font-size: var(--ms-text-xl);  font-weight: 700; }
h6 { font-size: var(--ms-text-lg);  font-weight: 700; }

p { margin: 0; line-height: var(--ms-leading-base); text-wrap: pretty; }

.ms-eyebrow {
  font-family: var(--ms-font-sans);
  font-size: var(--ms-text-xs);
  font-weight: 600;
  letter-spacing: var(--ms-tracking-caps);
  text-transform: uppercase;
  color: var(--ms-forest-700);
}

.ms-lede {
  font-family: var(--ms-font-display);
  font-size: var(--ms-text-xl);
  line-height: var(--ms-leading-snug);
  color: var(--ms-fg-2);
  font-weight: 500;
  font-style: italic;
}

code, pre, .ms-mono {
  font-family: var(--ms-font-mono);
  font-size: 0.92em;
  background: var(--ms-cream-100);
  padding: 2px 5px;
  border-radius: var(--ms-radius-sm);
}

a {
  color: var(--ms-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--ms-dur-fast) var(--ms-ease-out);
}
a:hover { color: var(--ms-link-hover); }

hr {
  border: 0;
  border-top: 1px solid var(--ms-border);
  margin: var(--ms-space-5) 0;
}

/* Decorative heritage rule — double line */
.ms-rule-double {
  border: 0;
  border-top: 1px solid var(--ms-ink-900);
  border-bottom: 1px solid var(--ms-ink-900);
  height: 4px;
  background: var(--ms-bg);
}