/* Natural State tokens, site build.
   A copy of the design system's colors_and_type.css with the eight display and
   textured cuts the site never sets removed: they were 2.4 MB of font files
   inlined into every page. The four cuts in use point at assets/fonts. To pick
   up a new cut, add its @font-face here and copy the .otf across. */
/* =============================================================
   Natural State Medicinals — Colors & Type
   Source: Natural State Style Guide (uploads/) + brand site
   ============================================================= */

/* ---- Webfonts (licensed brand faces) --------------------------
   Three custom families ship with this system:
     • Burford  — display / wordmark (slab serif, multiple cuts)
     • Caligor / Caligor Sans — subheaders, labels, UI
     • Esther   — body, long-form, quotes
   All files live in ./fonts. Cuts are exposed via family-name
   suffixes ("Burford Outline", "Caligor Sans Edge", etc) so designs
   can pick the cut they want. The base family aliases below default
   to the most useful cut.
*/
@font-face { font-family: "Burford";          src: url("assets/fonts/Burford_Base.otf") format("opentype");          font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Burford Outline";  src: url("assets/fonts/Burford_Outline.otf") format("opentype");       font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: "Caligor Sans";     src: url("assets/fonts/Caligor_Sans_Clean.otf") format("opentype");    font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: "Esther";           src: url("assets/fonts/Esther-Regular.otf") format("opentype");        font-weight: 400; font-style: normal; font-display: swap; }

/* Outfit kept as a UI-weight fallback (Caligor Sans is single-weight) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* ===========================================================
     PALETTE — primary brand
     =========================================================== */
  --ns-arctic:    #F5F4E1; /* off-white, warm paper */
  --ns-midnight:  #20253A; /* deep navy, primary ink */
  --ns-bronze:    #B79550; /* signature gold/bronze */

  /* PALETTE — accent */
  --ns-cream:     #F6E7D7; /* warm peach-cream */
  --ns-haze:      #EFD7C5; /* dusty pink-tan */

  /* Extended neutrals (derived; for borders, hairlines, hover states) */
  --ns-midnight-90: #2c3149;
  --ns-midnight-70: #4a4f63;
  --ns-midnight-50: #8b8e9c;
  --ns-midnight-20: #d2d3d8;
  --ns-bronze-dark: #8e7339; /* hover state on bronze CTAs */
  --ns-bronze-light: #d4b878;
  --ns-arctic-deep: #ebe9d0; /* subtle paper shadow */
  --ns-ink-on-cream: #20253A;

  /* Semantic / functional */
  --ns-success: #5a7d4a;
  --ns-warning: #c08a3e;
  --ns-error:   #9b3838;

  /* ===========================================================
     SURFACE / FOREGROUND TOKENS (use these in product code)
     =========================================================== */
  --bg-primary:     var(--ns-arctic);
  --bg-secondary:   var(--ns-cream);
  --bg-tertiary:    var(--ns-haze);
  --bg-inverse:     var(--ns-midnight);
  --bg-elevated:    #ffffff;

  --fg-primary:     var(--ns-midnight);
  --fg-secondary:   var(--ns-midnight-70);
  --fg-tertiary:    var(--ns-midnight-50);
  --fg-inverse:     var(--ns-arctic);
  --fg-accent:      var(--ns-bronze);

  --border-hairline: rgba(32, 37, 58, 0.12);
  --border-default:  rgba(32, 37, 58, 0.22);
  --border-strong:   var(--ns-midnight);
  --border-bronze:   var(--ns-bronze);

  /* ===========================================================
     TYPOGRAPHY — base families
     ===========================================================
     - display: ornate slab serif used for arched marks, big numbers
     - heading: classical serif for H1–H3
     - sans:    geometric sans for eyebrows, labels, UI
     - body:    serif for long-form copy
  */
  --font-display:         'Burford', 'Playfair Display', Georgia, serif;
  --font-display-outline: 'Burford Outline', 'Burford', Georgia, serif;
  --font-display-line:    'Burford Line', 'Burford', Georgia, serif;
  --font-display-rustic:  'Burford Rustic', 'Burford', Georgia, serif;
  --font-heading:         'Esther', 'Cormorant Garamond', Georgia, serif;
  --font-sans:            'Caligor Sans', 'Outfit', 'Futura', system-ui, sans-serif;
  --font-sans-edge:       'Caligor Sans Edge', 'Caligor Sans', system-ui, sans-serif;
  --font-serif-sans:      'Caligor', 'Outfit', system-ui, sans-serif;
  --font-body:            'Esther', 'Cormorant Garamond', Georgia, serif;
  --font-mono:            ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weight scale */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type scale (modular, ratio ~1.25) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-6xl:   120px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing — eyebrows + display caps want generous tracking */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.18em;   /* eyebrow / label all-caps */
  --ls-widest:  0.32em;   /* display arched headers */

  /* ===========================================================
     SPACING — 4px base
     =========================================================== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Radii — restrained. Brand artwork is square-cornered slab-serif. */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* Elevation — soft, warm, low-key */
  --shadow-xs: 0 1px 2px rgba(32,37,58,0.06);
  --shadow-sm: 0 2px 6px rgba(32,37,58,0.08);
  --shadow-md: 0 6px 18px rgba(32,37,58,0.10);
  --shadow-lg: 0 18px 40px rgba(32,37,58,0.14);
  --shadow-bronze: 0 6px 22px rgba(183, 149, 80, 0.28);

  /* Motion */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.85, 0.35);
  --ease-inout: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ---------------------------------------------------------------
   SEMANTIC TYPE STYLES
   --------------------------------------------------------------- */

.ns-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.ns-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.ns-h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
.ns-h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.ns-h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.ns-h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.ns-subheader {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.ns-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}
.ns-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.ns-ui {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--fg-primary);
}

.ns-button-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.ns-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

/* ---------------------------------------------------------------
   ELEMENT DEFAULTS (opt-in via .ns-doc on a wrapper)
   --------------------------------------------------------------- */
.ns-doc {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
}
.ns-doc h1 { font: var(--fw-medium) var(--fs-4xl)/var(--lh-tight) var(--font-heading); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-4); }
.ns-doc h2 { font: var(--fw-medium) var(--fs-3xl)/var(--lh-snug) var(--font-heading); margin: var(--sp-12) 0 var(--sp-4); }
.ns-doc h3 { font: var(--fw-medium) var(--fs-2xl)/var(--lh-snug) var(--font-heading); margin: var(--sp-8) 0 var(--sp-3); }
.ns-doc h4 { font: var(--fw-semibold) var(--fs-xl)/var(--lh-snug) var(--font-heading); margin: var(--sp-6) 0 var(--sp-2); }
.ns-doc p  { margin: 0 0 var(--sp-4); max-width: 64ch; text-wrap: pretty; }
.ns-doc a  { color: var(--ns-bronze); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
.ns-doc a:hover { color: var(--ns-bronze-dark); }