/* ============================================================
   NAGI — Colors & Type foundation
   Nicotine-free nootropic pouches · clean, premium, calm
   ============================================================ */

/* ---- Webfonts (Google Fonts — see README for substitution note) ---- */
/* Manrope kept as the graceful fallback if Gilroy fails to load. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Space+Grotesk:wght@400;500;600&display=swap');

/* ---- Brand display face: real Gilroy ExtraBold (licensed) ---- */
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-ExtraBold.woff') format('woff');
  font-weight: 700 800;   /* one weight on file; covers the 700–800 display range */
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Type families ---------- */
  --font-display: 'Gilroy', 'Manrope', 'Zen Kaku Gothic New', system-ui, sans-serif;  /* wordmark, headings — real Gilroy ExtraBold; JP falls back to Zen Kaku */
  --font-body:    'Hanken Grotesk', 'Zen Kaku Gothic New', system-ui, sans-serif;   /* body, UI; JP falls back to Zen Kaku */
  --font-jp:      'Zen Kaku Gothic New', sans-serif;          /* Japanese accents */
  --font-mono:    'Space Grotesk', ui-monospace, monospace;   /* dosing, labels, numerals */

  /* ---------- Neutral / ink ramp ---------- */
  --ink:    #14161B;   /* near-black primary text */
  --fg-1:   #14161B;
  --fg-2:   #5A616E;   /* secondary text */
  --fg-3:   #9098A4;   /* muted / captions */
  --line:   #E6E9EE;   /* hairline borders */
  --line-2: #D4D9E0;   /* stronger borders */
  --paper:  #FFFFFF;   /* base surface */
  --bg-soft:#F5F7FA;   /* app/section background */
  --bg-2:   #EDF0F4;   /* sunken surface */

  /* ---------- Brushed metal / glass ---------- */
  --silver-1: #EEF1F4;
  --silver-2: #C9CFD7;
  --silver-3: #9AA2AD;
  --glass:    rgba(255,255,255,0.55);

  /* ---------- FOCUS world (blue) — the LEAD brand world ---------- */
  --focus-700: #1F558F;
  --focus-600: #2C6FB5;
  --focus-500: #4A90D9;   /* FOCUS primary */
  --focus-400: #76AEE5;
  --focus-300: #A6CBEF;
  --focus-200: #CFE3F7;
  --focus-100: #E6F1FB;
  --focus-bg-a:#C2DDF2;
  --focus-bg-b:#E9F2FB;

  /* ---------- Signature sky blue (sampled from the logo lockup) ---------- */
  --sky-deep: #6A99C3;   /* logo gradient, top */
  --sky:      #79A8CE;   /* logo gradient, mid — the NAGI light blue */
  --sky-soft: #82B8DC;   /* logo gradient, bottom */
  /* drop-in background that matches the official logo card */
  --logo-grad: linear-gradient(150deg, #6A99C3 0%, #79A8CE 45%, #82B8DC 100%); /* @kind color */

  /* ---------- RELAX world (coral / pink) ---------- */
  --relax-700: #C13A33;
  --relax-600: #D74840;
  --relax-500: #E85850;   /* RELAX primary (tin coral) */
  --relax-400: #F07F78;
  --relax-300: #F4A8A2;
  --relax-200: #F9CDC8;
  --relax-100: #FCE6E3;
  --relax-bg-a:#F3B2AA;
  --relax-bg-b:#FBDDD8;

  /* ---------- Brand default — FOCUS / light blue LEADS, coral is secondary ---------- */
  --brand: var(--focus-500);
  --brand-ink: var(--focus-700);
  --brand-sky: var(--sky);

  /* ---------- Semantic ---------- */
  --positive: #2E9E6B;
  --warning:  #D9952B;
  --danger:   #D74840;

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- Elevation (soft, diffused — product-photo feel) ---------- */
  --sh-1: 0 1px 2px rgba(20,22,27,0.05), 0 1px 3px rgba(20,22,27,0.06);
  --sh-2: 0 4px 12px rgba(20,22,27,0.06), 0 2px 4px rgba(20,22,27,0.05);
  --sh-3: 0 12px 32px rgba(20,22,27,0.10), 0 4px 10px rgba(20,22,27,0.06);
  --sh-float: 0 30px 60px -20px rgba(20,40,70,0.28);  /* floating-object shadow */

  /* ---------- Spacing scale (4pt base) ---------- */
  --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;

  /* ---------- Type scale ---------- */
  --t-display: 600; /* @kind font */
}

/* ============================================================
   Semantic type styles
   ============================================================ */
.nagi-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  color: var(--fg-2);
}

.p, p.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
}

.small {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
}

.dose {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.jp {
  font-family: var(--font-jp);
  font-weight: 500;
}

/* ---- Strength dots (●●○○○) reusable utility ---- */
.strength { display: inline-flex; gap: 4px; align-items: center; }
.strength i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.25; }
.strength i.on { opacity: 1; }