/* ============================================================
   Niich — Design tokens (CSS)
   Generated from tokens.json — single source of truth.
   Version 1.0 · May 2026
   ============================================================
   Include in every web artifact:
     @import url("tokens.css");
   Or copy into a <style> block. Font imports are at the top —
   change the working substitute for Suisse Intl to the real
   font-face declarations once the licence is purchased.
   ============================================================ */

/* ─────── Font loading ─────── */
@import url('https://api.fontshare.com/v2/css?f[]=recoleta@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* When Suisse Intl licence is purchased, add:
   @font-face {
     font-family: 'Suisse Intl';
     src: url('/fonts/SuisseIntl-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Suisse Intl';
     src: url('/fonts/SuisseIntl-Medium.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
   }
   No other change required — the fallback stack already prefers Suisse Intl. */

:root {
  /* ─────── Colour ─────── */
  --niich-ink:   #0B0B09;
  --niich-bone:  #F3F1EC;
  --niich-clay:  #D8D5CC;
  --niich-stone: #A6A79A;
  --niich-earth: #6B6F5C;
  --niich-lime:  #D1DF04;

  /* Semantic aliases */
  --color-bg:              var(--niich-bone);
  --color-surface:         #FBFAF6;         /* Bone tinted lighter for cards */
  --color-surface-alt:     var(--niich-clay);
  --color-text:            var(--niich-ink);
  --color-text-muted:      var(--niich-earth);
  --color-text-faint:      var(--niich-stone);
  --color-border:          var(--niich-clay);
  --color-border-strong:   var(--niich-stone);
  --color-accent:          var(--niich-lime);
  --color-accent-text:     var(--niich-ink);  /* Ink on lime for AA contrast */
  --color-inverse-bg:      var(--niich-ink);
  --color-inverse-text:    var(--niich-bone);

  /* ─────── Typography ─────── */
  --font-display: 'Recoleta', 'Fraunces', Georgia, serif;
  --font-body:    'Suisse Intl', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — screen (px) */
  --text-h1-size:    72px;
  --text-h1-line:    80px;
  --text-h2-size:    48px;
  --text-h2-line:    54px;
  --text-h3-size:    32px;
  --text-h3-line:    40px;
  --text-body-size:  16px;
  --text-body-line:  26px;
  --text-small-size: 13px;
  --text-small-line: 20px;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-snug:  -0.01em;
  --letter-spacing-body:  0;
  --letter-spacing-label: 0.08em;

  /* ─────── Spacing (4px unit) ─────── */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;
  --space-5xl:  128px;

  --container-max:      1200px;
  --gutter-desktop:     40px;
  --gutter-mobile:      20px;

  /* ─────── Radius ─────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-icon: 22px;

  /* ─────── Shadow (used sparingly per graphic_language.avoid) ─────── */
  --shadow-sm: 0 1px 2px rgba(11, 11, 9, 0.04);
  --shadow-md: 0 1px 3px rgba(11, 11, 9, 0.04), 0 8px 24px rgba(11, 11, 9, 0.06);
  --shadow-lg: 0 4px 12px rgba(11, 11, 9, 0.06), 0 24px 48px rgba(11, 11, 9, 0.08);

  /* ─────── Motion ─────── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter:    cubic-bezier(0, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
}

/* ─────── Base reset + typography defaults ─────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  color: var(--color-text);
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  letter-spacing: var(--letter-spacing-tight);
}
h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  letter-spacing: var(--letter-spacing-tight);
}
h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  letter-spacing: var(--letter-spacing-snug);
}

p { margin: 0 0 var(--space-md); }

small, .text-small {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
  letter-spacing: var(--letter-spacing-label);
}

.label-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Numbered section markers — "01", "02" style */
.section-num {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted);
}

/* ─────── Payoff word — "Niich" in lime ─────── */
.niich-word { color: var(--niich-lime); font-family: var(--font-display); font-style: italic; }
.niich-word-solid { color: var(--niich-lime); font-family: var(--font-display); }

/* ─────── Buttons ─────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.btn:hover { opacity: 0.9; }

.btn-primary {
  background: var(--niich-ink);
  color: var(--niich-bone);
}
.btn-accent {
  background: var(--niich-lime);
  color: var(--niich-ink);
}
.btn-secondary {
  background: transparent;
  color: var(--niich-ink);
  border-color: var(--niich-ink);
}
.btn-ghost {
  background: transparent;
  color: var(--niich-ink);
}

/* ─────── Layout containers ─────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}
@media (max-width: 720px) {
  .container { padding: 0 var(--gutter-mobile); }
  :root {
    --text-h1-size: 44px; --text-h1-line: 50px;
    --text-h2-size: 32px; --text-h2-line: 38px;
    --text-h3-size: 24px; --text-h3-line: 30px;
  }
}

/* ─────── Utility ─────── */
.divider-line {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}
.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* ─────── Motion opt-out ─────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}