/* =========================================================================
   NORTH STAR VENDING — Foundational tokens
   Colors + Typography + Spacing + Borders + Motion
   ========================================================================= */

/* ---- Fonts ----
   Accia Piano — brand wordmark + display, loaded locally (OTF, Production Type).
   Cormorant Garamond — temporary stand-in for display headlines (see README).
   Jost — Futura-like geometric sans for nav / labels / body (Google Fonts).
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

@font-face { font-family: 'Accia Piano'; font-weight: 100; font-style: normal;  src: url('fonts/AcciaPiano-Thin.otf')             format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 100; font-style: italic;  src: url('fonts/AcciaPiano-ThinItalic.otf')       format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 200; font-style: normal;  src: url('fonts/AcciaPiano-ExtraLight.otf')       format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 200; font-style: italic;  src: url('fonts/AcciaPiano-ExtraLightItalic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 300; font-style: normal;  src: url('fonts/AcciaPiano-Light.otf')            format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 300; font-style: italic;  src: url('fonts/AcciaPiano-LightItalic.otf')      format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 400; font-style: normal;  src: url('fonts/AcciaPiano-Regular.otf')          format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 400; font-style: italic;  src: url('fonts/AcciaPiano-Italic.otf')           format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 500; font-style: normal;  src: url('fonts/AcciaPiano-Medium.otf')           format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 500; font-style: italic;  src: url('fonts/AcciaPiano-MediumItalic.otf')     format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 600; font-style: normal;  src: url('fonts/AcciaPiano-SemiBold.otf')         format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 600; font-style: italic;  src: url('fonts/AcciaPiano-SemiBoldItalic.otf')   format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 700; font-style: normal;  src: url('fonts/AcciaPiano-Bold.otf')             format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 700; font-style: italic;  src: url('fonts/AcciaPiano-BoldItalic.otf')       format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 800; font-style: normal;  src: url('fonts/AcciaPiano-ExtraBold.otf')        format('opentype'); font-display: swap; }
@font-face { font-family: 'Accia Piano'; font-weight: 800; font-style: italic;  src: url('fonts/AcciaPiano-ExtraBoldItalic.otf')  format('opentype'); font-display: swap; }

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Backgrounds */
  --ns-midnight:        #0D1421;   /* primary dark bg */
  --ns-navy:            #1A2744;   /* secondary dark bg (B2B) */
  --ns-parchment:       #F5F0E8;   /* warm light bg, not white */

  /* Accents */
  --ns-gold:            #C4A233;   /* North Star Gold — headlines, CTAs */
  --ns-gold-trim:       #D4AF37;   /* trim / hover state */
  --ns-flame:           #CC2020;   /* HOT indicator only */
  --ns-ice:             #2568C8;   /* COLD indicator only */
  --ns-brass:           #B5946B;   /* origin labels, small caps — brightened from spec #8B7355 for legibility on midnight */

  /* Text — on dark */
  --ns-text-dark:       rgba(245, 240, 232, 0.78);   /* body copy on dark */
  --ns-text-dark-mute:  rgba(245, 240, 232, 0.45);
  --ns-text-dark-strong: rgba(245, 240, 232, 0.92);

  /* Text — on light */
  --ns-ink:             #0D1421;   /* body on parchment */
  --ns-ink-mute:        rgba(13, 20, 33, 0.62);

  /* Decorative line — the one and only rule */
  --ns-rule:            rgba(196, 162, 51, 0.30);   /* 0.5px gold @ 30% */
  --ns-rule-strong:     rgba(196, 162, 51, 0.45);   /* ghost borders */

  /* Semantic aliases */
  --color-bg:           var(--ns-midnight);
  --color-bg-alt:       var(--ns-navy);
  --color-bg-light:     var(--ns-parchment);
  --color-fg:           var(--ns-text-dark-strong);
  --color-fg-mute:      var(--ns-text-dark);
  --color-accent:       var(--ns-gold);
  --color-hot:          var(--ns-flame);
  --color-cold:         var(--ns-ice);
  --color-rule:         var(--ns-rule);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:       'Accia Piano', 'Cormorant Garamond', 'Garamond', serif;   /* italic gold headlines — Accia Piano medium italic */
  --font-wordmark:      'Accia Piano', 'Cormorant SC', serif;       /* NORTH STAR logotype — Accia Piano SemiBold */
  --font-label:         'Accia Piano', 'Helvetica Neue', serif;        /* nav / labels / all-caps */
  --font-body:          'Accia Piano', 'Helvetica Neue', serif;        /* body copy */
  --font-origin:        'Accia Piano', 'Helvetica Neue', serif;        /* origin labels, tracked uppercase */

  /* Type scale — display */
  --fs-display-xl:      80px;
  --fs-display-lg:      64px;
  --fs-display-md:      52px;
  --fs-display-sm:      40px;
  --fs-eyebrow:         10px;     /* nav, labels, button text */
  --fs-body:            16px;
  --fs-body-sm:         15px;
  --fs-origin:          11px;     /* small caps brass labels */

  --lh-display:         1.05;      /* @kind font */
  --lh-body:            1.75;      /* @kind font */
  --lh-tight:           1.2;       /* @kind font */

  --ls-eyebrow:         0.06em;
  --ls-wordmark:        0.12em;
  --ls-display:         -0.01em;

  /* ---------- LAYOUT ---------- */
  --max-w:              1200px;
  --page-pad:           80px;
  --gutter:             32px;

  /* Spacing scale (8pt-ish, generous) */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;
  --space-9:            96px;
  --space-10:           128px;
  --section-y:          120px;     /* section vertical padding */

  /* ---------- BORDERS & RADIUS ---------- */
  --radius-0:           0;          /* default — sharp corners, non-negotiable */
  --radius-pill:        2px;        /* tiny — pill tags ONLY */
  --hairline:           0.5px;      /* gold rule weight */
  --border-ghost:       0.5px solid rgba(196, 162, 51, 0.45);   /* @kind other */

  /* No shadows. No glow. Light & flat. */
  --shadow-none:        none;

  /* ---------- MOTION ---------- */
  --ease-out:           cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --dur-fast:           300ms;     /* @kind other */
  --dur-base:           500ms;     /* @kind other */
  --dur-slow:           700ms;     /* @kind other */
  --stagger:            80ms;      /* @kind other */
}

/* =========================================================================
   SEMANTIC TYPE — apply directly to elements
   ========================================================================= */

html, body {
  background: var(--ns-midnight);
  color: var(--ns-text-dark-strong);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headlines — italic gold serif. The emotional voice. */
.ns-display,
.ns-h1, .ns-h2, .ns-h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--ns-gold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
}
.ns-h1, .ns-display { font-size: var(--fs-display-xl); }
.ns-h2 { font-size: var(--fs-display-md); }
.ns-h3 { font-size: var(--fs-display-sm); }

/* Wordmark — only for NORTH STAR logotype */
.ns-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  color: var(--ns-gold);
  font-style: normal;
}

/* Eyebrow / Nav / Label — Accia Piano uppercase */
.ns-eyebrow, .ns-label, .ns-nav-link {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  word-spacing: -0.08em;
  color: rgba(196, 162, 51, 0.78);    /* gold @ 78% */
}

/* Body copy on dark */
.ns-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ns-text-dark);
  font-weight: 500;
}
.ns-body-sm { font-size: var(--fs-body-sm); }

/* Origin label — tracked uppercase brass */
.ns-origin {
  font-family: var(--font-origin);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ns-brass);
}

/* =========================================================================
   PRIMITIVES
   ========================================================================= */

/* The 0.5px gold horizontal rule — the only decorative border allowed */
.ns-rule {
  height: 0;
  border: 0;
  border-top: var(--hairline) solid var(--ns-rule);
  width: 100%;
  margin: var(--space-7) 0;
}

/* Star glyph — the only decorative icon */
.ns-star::before { content: "\2726"; }     /* ✦ */

/* Buttons — sharp, all caps, no movement */
.ns-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 28px;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  word-spacing: -0.08em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ns-btn-primary {
  background: var(--ns-gold);
  color: var(--ns-midnight);
}
.ns-btn-primary:hover { background: var(--ns-gold-trim); }
.ns-btn-ghost {
  background: transparent;
  color: var(--ns-gold);
  border: var(--border-ghost);
}
.ns-btn-ghost:hover { border-color: var(--ns-gold); color: var(--ns-gold-trim); }

/* Pill tag — HOT / COLD (only 2px radius element) */
.ns-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ns-parchment);
}
.ns-pill-hot  { background: var(--ns-flame); }
.ns-pill-cold { background: var(--ns-ice); }

/* Sections (dark / light / navy) — never two darks back to back */
.ns-section {
  padding: var(--section-y) var(--page-pad);
}
.ns-section--dark  { background: var(--ns-midnight); color: var(--ns-text-dark-strong); }
.ns-section--light { background: var(--ns-parchment); color: var(--ns-ink); }
.ns-section--navy  { background: var(--ns-navy); color: var(--ns-text-dark-strong); }
.ns-container {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Section headlines + light-bg variant */
.ns-section--light .ns-h1,
.ns-section--light .ns-h2,
.ns-section--light .ns-h3 { color: var(--ns-midnight); }
.ns-section--light .ns-body { color: rgba(13,20,33,0.72); }
.ns-section--light .ns-eyebrow { color: var(--ns-brass); }

/* =========================================================================
   MOTION — page-load fade + translateY (default off; opt-in via class)
   ========================================================================= */

@keyframes ns-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ns-rise {
  opacity: 0;
  animation: ns-rise var(--dur-base) var(--ease-out) forwards;
}
.ns-rise-1 { animation-delay: calc(var(--stagger) * 1); }
.ns-rise-2 { animation-delay: calc(var(--stagger) * 2); }
.ns-rise-3 { animation-delay: calc(var(--stagger) * 3); }
.ns-rise-4 { animation-delay: calc(var(--stagger) * 4); }
.ns-rise-5 { animation-delay: calc(var(--stagger) * 5); }
.ns-rise-6 { animation-delay: calc(var(--stagger) * 6); }