/* =====================================================
   Needlework Design System — Colors & Type
   Drop this into any HTML file and you get the brand.
   ===================================================== */

/* Self-hosted brand fonts — variable Merriweather + Open Sans.
   Served from fonts/ next to this file. */
@font-face {
  font-family: 'Merriweather';
  src: url('fonts/Merriweather.woff2') format('woff2');
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather';
  src: url('fonts/Merriweather-Italic.woff2') format('woff2');
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- PRIMARY COLORS ---------- */
  --nw-gold:          #C39644; /* Icon, hover accents, dark-bg CTAs */
  --nw-olive:         #5B6412; /* Wordmark, light-bg CTAs, labels */
  --nw-near-black:    #21231B; /* Body text, dark backgrounds */
  --nw-warm-cream:    #FFFBF5; /* Canvas, dark-bg text */

  /* ---------- SECONDARY / ACCENT ---------- */
  --nw-blue-accent:   #629DCD; /* Rare — links, info states */
  --nw-tan:           #E8BD6F; /* Soft gold — highlights, chips */
  --nw-dark-gold:     #BC8F3A; /* Pressed/active gold */
  --nw-light-beige:   #EDE4D8; /* Hairline borders, dividers */
  --nw-soft-gray:     #F6F1E8; /* Card backgrounds on cream pages */
  --nw-muted-yellow:  #E8DF68; /* Rare — callouts */

  /* ---------- GRADIENTS ---------- */
  --nw-gradient-olive: linear-gradient(135deg, #889429 0%, #5B6412 100%);
  --nw-gradient-gold:  linear-gradient(135deg, #896218 0%, #B48839 100%);

  /* ---------- SEMANTIC TOKENS ---------- */
  /* Surfaces */
  --nw-surface-canvas:      var(--nw-warm-cream);
  --nw-surface-card:        #FFFFFF;
  --nw-surface-subtle:      var(--nw-soft-gray);
  --nw-surface-inverse:     var(--nw-near-black);

  /* Foregrounds — graded by importance */
  --nw-fg-1:                var(--nw-near-black);   /* primary text */
  --nw-fg-2:                #4C4E42;                /* secondary text */
  --nw-fg-3:                #6B6B60;                /* muted, captions */
  --nw-fg-4:                #9A9A8E;                /* disabled, meta */

  /* Foregrounds on dark */
  --nw-fg-on-dark-1:        var(--nw-warm-cream);
  --nw-fg-on-dark-2:        rgba(255,251,245,0.70);
  --nw-fg-on-dark-3:        rgba(255,251,245,0.45);
  --nw-fg-on-dark-4:        rgba(255,251,245,0.30);

  /* Brand accents */
  --nw-accent:              var(--nw-olive);
  --nw-accent-on-dark:      var(--nw-gold);

  /* Borders */
  --nw-border-subtle:       var(--nw-light-beige);
  --nw-border-strong:       #D8CEBD;
  --nw-border-on-dark:      rgba(255,251,245,0.14);

  /* Status */
  --nw-success:             #5B6412;
  --nw-warning:             #BC8F3A;
  --nw-danger:              #C44B3F;
  --nw-info:                #629DCD;

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --nw-font-serif:   'Merriweather', 'Iowan Old Style', 'Palatino', 'Georgia', serif;
  --nw-font-sans:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --nw-font-mono:    ui-monospace, 'SF Mono', 'Menlo', 'Courier New', monospace;

  /* ---------- TYPE SCALE ---------- */
  --nw-display-1-size:   64px;
  --nw-display-1-lh:     1.1;
  --nw-display-2-size:   48px;
  --nw-display-2-lh:     1.15;

  /* Headings */
  --nw-h1-size:          42px; --nw-h1-lh: 1.2;
  --nw-h2-size:          32px; --nw-h2-lh: 1.25;
  --nw-h3-size:          24px; --nw-h3-lh: 1.3;
  --nw-h4-size:          19px; --nw-h4-lh: 1.4;
  --nw-h5-size:          17px; --nw-h5-lh: 1.4;

  /* Body */
  --nw-body-size:        15px; --nw-body-lh: 1.65;
  --nw-body-sm-size:     14px; --nw-body-sm-lh: 1.6;
  --nw-caption-size:     13px; --nw-caption-lh: 1.5;

  /* Overline / label */
  --nw-overline-size:    11px; --nw-overline-lh: 1.4; --nw-overline-tracking: 0.18em;

  /* ---------- SPACING (4px base) ---------- */
  --nw-space-0:   0;
  --nw-space-1:   4px;
  --nw-space-2:   8px;
  --nw-space-3:   12px;
  --nw-space-4:   16px;
  --nw-space-5:   24px;
  --nw-space-6:   32px;
  --nw-space-7:   40px;
  --nw-space-8:   56px;
  --nw-space-9:   64px;
  --nw-space-10:  96px;

  /* ---------- RADII ---------- */
  --nw-radius-xs:  3px;
  --nw-radius-sm:  5px;
  --nw-radius-md:  8px;
  --nw-radius-lg:  10px;
  --nw-radius-xl:  14px;
  --nw-radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --nw-shadow-0:   none;
  --nw-shadow-1:   0 1px 2px rgba(33,35,27,0.05);
  --nw-shadow-2:   0 1px 4px rgba(33,35,27,0.08);
  --nw-shadow-3:   0 2px 8px rgba(33,35,27,0.10);
  --nw-shadow-4:   0 8px 28px rgba(33,35,27,0.14);
  --nw-shadow-inset: inset 0 1px 0 rgba(255,251,245,0.05);

  /* ---------- MOTION ---------- */
  --nw-ease-std:   cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --nw-ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1.0);
  --nw-dur-fast:   120ms;
  --nw-dur-med:    220ms;
  --nw-dur-slow:   420ms;

  /* ---------- LAYOUT ---------- */
  --nw-container:       1080px;
  --nw-container-text:  640px;
  --nw-focus-ring:      0 0 0 3px rgba(195,150,68,0.35);
}

/* =====================================================
   Semantic element styling — opt in by adding .nw
   class to a wrapper, or adopt these wholesale.
   ===================================================== */

.nw, .nw * { box-sizing: border-box; }

.nw {
  font-family: var(--nw-font-sans);
  font-size: var(--nw-body-size);
  line-height: var(--nw-body-lh);
  color: var(--nw-fg-1);
  background: var(--nw-surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nw h1, .nw .h1 {
  font-family: var(--nw-font-serif);
  font-weight: 400;
  font-size: var(--nw-h1-size);
  line-height: var(--nw-h1-lh);
  letter-spacing: -0.01em;
  color: var(--nw-fg-1);
  margin: 0 0 var(--nw-space-3);
  text-wrap: balance;
}
.nw h2, .nw .h2 {
  font-family: var(--nw-font-serif);
  font-weight: 400;
  font-size: var(--nw-h2-size);
  line-height: var(--nw-h2-lh);
  letter-spacing: -0.005em;
  margin: 0 0 var(--nw-space-3);
  text-wrap: balance;
}
.nw h3, .nw .h3 {
  font-family: var(--nw-font-serif);
  font-weight: 400;
  font-size: var(--nw-h3-size);
  line-height: var(--nw-h3-lh);
  margin: 0 0 var(--nw-space-3);
}
.nw h4, .nw .h4 {
  font-family: var(--nw-font-serif);
  font-weight: 700;
  font-size: var(--nw-h4-size);
  line-height: var(--nw-h4-lh);
  margin: 0 0 var(--nw-space-2);
}
.nw h5, .nw .h5 {
  font-family: var(--nw-font-sans);
  font-weight: 700;
  font-size: var(--nw-h5-size);
  line-height: var(--nw-h5-lh);
  margin: 0 0 var(--nw-space-2);
}
.nw p, .nw .body {
  font-size: var(--nw-body-size);
  line-height: var(--nw-body-lh);
  color: var(--nw-fg-1);
  margin: 0 0 var(--nw-space-4);
  text-wrap: pretty;
}
.nw .body-muted { color: var(--nw-fg-3); }
.nw .body-sm { font-size: var(--nw-body-sm-size); line-height: var(--nw-body-sm-lh); }
.nw .caption { font-size: var(--nw-caption-size); line-height: var(--nw-caption-lh); color: var(--nw-fg-3); }

.nw .overline, .nw .eyebrow {
  font-family: var(--nw-font-sans);
  font-weight: 600;
  font-size: var(--nw-overline-size);
  line-height: var(--nw-overline-lh);
  letter-spacing: var(--nw-overline-tracking);
  text-transform: uppercase;
  color: var(--nw-olive);
}

.nw code, .nw .mono {
  font-family: var(--nw-font-mono);
  font-size: 0.92em;
}

.nw a {
  color: var(--nw-olive);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--nw-dur-fast) var(--nw-ease-std);
}
.nw a:hover { color: var(--nw-dark-gold); }

.nw hr {
  border: none;
  border-top: 1px solid var(--nw-border-subtle);
  margin: var(--nw-space-6) 0;
}

/* Inverse (dark) surface */
.nw-dark {
  background: var(--nw-surface-inverse);
  color: var(--nw-fg-on-dark-1);
}
.nw-dark h1, .nw-dark h2, .nw-dark h3, .nw-dark h4, .nw-dark h5 { color: var(--nw-fg-on-dark-1); }
.nw-dark p { color: var(--nw-fg-on-dark-2); }
.nw-dark .overline, .nw-dark .eyebrow { color: var(--nw-gold); }
.nw-dark a { color: var(--nw-gold); }
.nw-dark a:hover { color: var(--nw-tan); }