/* ============================================================
   TrueNorth Intell — Design Tokens
   Fonts + colors + type scale + semantic mappings.
   Source of truth: landing-page/index.html + truenorth-business-card.pdf
   ============================================================ */

/* --- Fonts (self-hosted brand files) --- */
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Variable.ttf') format('truetype-variations'),
       url('fonts/Manrope-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — PRIMARY (shipping palette, canonical)
     Pulled from tailwind.config in landing-page/index.html
     and print specs in truenorth-business-card.pdf.
     ============================================================ */
  --tn-cream:         #FBF7EF; /* primary background — warm off-white, NOT sterile */
  --tn-cream-dark:    #F2EDE4; /* secondary surface — quiet cards on cream */
  --tn-ink:           #141414; /* primary text, primary button fill */
  --tn-gold:          #C8923C; /* accent — painted edge, CTAs on dark, underlines */
  --tn-gold-light:    #E8B86D; /* soft gold — inverted text on dark, hover gold */
  --tn-forest:        #1E3328; /* dark anchor — proof + getting-started sections */
  --tn-forest-light:  #2A4538; /* forest hover / raised surface on dark */

  /* ============================================================
     COLOR — BRIEF PALETTE (alt names kept for reference)
     Founder brief specified different hexes; shipping artifacts
     shifted warmer. Keep these aliases to cross-reference copy
     from the brief without breaking code that references them.
     ============================================================ */
  --tn-navy-brief:    #1B2B3A; /* "Deep Navy" from brief — unused in shipping */
  --tn-green-brief:   #2E7D5E; /* "Muted Forest Green" from brief — unused in shipping */
  --tn-amber-brief:   #F4A623; /* "Warm Amber" from brief — unused in shipping */
  --tn-offwhite-brief:#F5F0EB; /* "Warm Off-White" from brief — close to cream-dark */
  --tn-charcoal-brief:#2C2C2C; /* "Charcoal" from brief — close to ink */

  /* ============================================================
     COLOR — OPACITY TOKENS (landing page uses these constantly)
     Ink-on-cream: text hierarchy via alpha, not hue shift.
     ============================================================ */
  --tn-ink-muted:     rgba(20, 20, 20, 0.55); /* body paragraph text */
  --tn-ink-subtle:    rgba(20, 20, 20, 0.40); /* eyebrows, meta */
  --tn-ink-hair:      rgba(20, 20, 20, 0.12); /* dividers, borders */
  --tn-ink-faint:     rgba(20, 20, 20, 0.04); /* bar track, quiet fill */

  --tn-cream-muted:   rgba(251, 247, 239, 0.60); /* body text on forest */
  --tn-cream-subtle:  rgba(251, 247, 239, 0.40); /* meta on forest */
  --tn-cream-hair:    rgba(251, 247, 239, 0.10); /* dividers on forest */

  /* ============================================================
     SEMANTIC COLOR MAPPING
     Use these in components, not raw values above.
     ============================================================ */
  --tn-bg:            var(--tn-cream);
  --tn-bg-alt:        var(--tn-cream-dark);
  --tn-bg-dark:       var(--tn-forest);
  --tn-bg-dark-alt:   var(--tn-forest-light);

  --tn-fg:            var(--tn-ink);
  --tn-fg-muted:      var(--tn-ink-muted);
  --tn-fg-subtle:     var(--tn-ink-subtle);
  --tn-fg-on-dark:    var(--tn-cream);
  --tn-fg-on-dark-muted: var(--tn-cream-muted);

  --tn-accent:        var(--tn-gold);
  --tn-accent-soft:   var(--tn-gold-light);
  --tn-border:        var(--tn-ink-hair);
  --tn-border-dark:   var(--tn-cream-hair);

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --tn-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --tn-font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tn-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============================================================
     TYPE SCALE — display (Instrument Serif, tight leading, italic for emphasis)

     Two parallel sets — same content, different sizing strategy:
       FLUID  → viewport-responsive via clamp(). For web/landing surfaces.
       FIXED  → single px value (the upper bound). For print artifacts
                (business cards, PDFs, posters) where layout must be exact.

     The unsuffixed default tokens alias to FLUID — web is the dominant surface.
     Print artifacts opt into FIXED explicitly.
     ============================================================ */

  /* FLUID — for screens. clamp(min, preferred, max) */
  --tn-display-fluid-xl:  clamp(3rem,  6vw + 1rem, 6rem);     /* 48–96px */
  --tn-display-fluid-lg:  clamp(2.5rem, 4vw + 0.75rem, 4rem); /* 40–64px */
  --tn-display-fluid-md:  clamp(1.875rem, 2.5vw + 0.5rem, 3rem); /* 30–48px */

  /* FIXED — for print. The upper bound of the fluid range. */
  --tn-display-fixed-xl:  6rem;     /* 96px */
  --tn-display-fixed-lg:  4rem;     /* 64px */
  --tn-display-fixed-md:  3rem;     /* 48px */

  /* DEFAULT — aliases to fluid (web-first) */
  --tn-display-xl:  var(--tn-display-fluid-xl);
  --tn-display-lg:  var(--tn-display-fluid-lg);
  --tn-display-md:  var(--tn-display-fluid-md);

  /* sm and xs are already small enough that fluid scaling has no benefit */
  --tn-display-sm:  1.25rem;  /* card title — 20px */
  --tn-display-xs:  1.125rem; /* quote lead — 18px */

  /* ============================================================
     TYPE SCALE — body (Manrope)
     ============================================================ */
  --tn-body-lg:     1.375rem;  /* 22px — hero subhead, key claims (range 20–24) */
  --tn-body:        1.0625rem; /* 17px — primary body (range 17–18) */
  --tn-body-sm:     0.9375rem; /* 15px — supporting text (range 15–16) */
  --tn-body-xs:     0.8125rem; /* 13px — eyebrow upper bound (range 12–13) */
  --tn-body-xxs:    0.75rem;   /* 12px — eyebrow lower bound */
  --tn-memo:        0.875rem;  /* 14px — memo/caption italic or mono (range 13–14) */

  /* ============================================================
     TYPE — weights, leading, tracking
     ============================================================ */
  --tn-fw-light:    300;
  --tn-fw-regular:  400;
  --tn-fw-medium:   500;
  --tn-fw-semibold: 600;
  --tn-fw-bold:     700;

  --tn-leading-tight:   1.05;  /* display */
  --tn-leading-snug:    1.25;  /* card titles */
  --tn-leading-body-lg: 1.4;   /* body LG / hero subhead */
  --tn-leading-normal:  1.5;   /* short body */
  --tn-leading-body:    1.55;  /* body MD primary */
  --tn-leading-relaxed: 1.6;   /* body SM, long paragraphs */

  --tn-tracking-tight:  -0.02em; /* display */
  --tn-tracking-normal: 0;
  --tn-tracking-wide:   0.05em;  /* small caps */
  --tn-tracking-eyebrow: 0.1em;  /* eyebrow — new spec */
  --tn-tracking-wider:  0.15em;  /* legacy eyebrows */
  --tn-tracking-widest: 0.20em;  /* print eyebrows */

  /* ============================================================
     SPACING — based on 4px grid
     ============================================================ */
  --tn-space-1: 0.25rem;   /* 4 */
  --tn-space-2: 0.5rem;    /* 8 */
  --tn-space-3: 0.75rem;   /* 12 */
  --tn-space-4: 1rem;      /* 16 */
  --tn-space-5: 1.25rem;   /* 20 */
  --tn-space-6: 1.5rem;    /* 24 */
  --tn-space-8: 2rem;      /* 32 */
  --tn-space-10: 2.5rem;   /* 40 */
  --tn-space-12: 3rem;     /* 48 */
  --tn-space-16: 4rem;     /* 64 */
  --tn-space-20: 5rem;     /* 80 */
  --tn-space-24: 6rem;     /* 96 */
  --tn-space-32: 8rem;     /* 128 */

  /* ============================================================
     RADII — generous rounding on cards, pill-style buttons
     ============================================================ */
  --tn-radius-sm:   4px;   /* inputs */
  --tn-radius-md:   12px;  /* small cards */
  --tn-radius-lg:   16px;  /* larger cards */
  --tn-radius-xl:   24px;  /* hero cards */
  --tn-radius-2xl:  32px;
  --tn-radius-pill: 9999px; /* all buttons */

  /* ============================================================
     SHADOWS — soft, editorial; no aggressive drop shadows
     ============================================================ */
  --tn-shadow-nav:   0 1px 12px rgba(20, 20, 20, 0.06);
  --tn-shadow-card:  0 2px 12px rgba(20, 20, 20, 0.06);
  --tn-shadow-lift:  0 12px 40px rgba(20, 20, 20, 0.08);
  --tn-shadow-deep:  0 16px 48px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.12); /* print-card mockups */

  /* ============================================================
     MOTION — slow, confident, no bounces
     ============================================================ */
  --tn-ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* confident deceleration */
  --tn-ease:        ease;
  --tn-dur-fast:    180ms;
  --tn-dur-base:    400ms; /* card lift, color transitions */
  --tn-dur-slow:    700ms; /* scroll reveal */
  --tn-dur-bar:     1400ms; /* bar fills */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --tn-container:   72rem; /* 1152px — max-w-6xl */
  --tn-container-narrow: 48rem; /* 768px */
}

/* ============================================================
   BASE — reset-ish, sets brand defaults
   ============================================================ */
html { scroll-behavior: smooth; }
body {
  background: var(--tn-bg);
  color: var(--tn-fg);
  font-family: var(--tn-font-body);
  font-size: var(--tn-body);
  line-height: var(--tn-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   SEMANTIC TYPE — use these rather than raw tokens
   ============================================================ */
.tn-display-xl,
h1.tn {
  font-family: var(--tn-font-display);
  font-size: var(--tn-display-xl);
  font-weight: var(--tn-fw-regular);
  line-height: var(--tn-leading-tight);
  letter-spacing: var(--tn-tracking-tight);
}
.tn-display-lg,
h2.tn {
  font-family: var(--tn-font-display);
  font-size: var(--tn-display-lg);
  font-weight: var(--tn-fw-regular);
  line-height: var(--tn-leading-tight);
  letter-spacing: var(--tn-tracking-tight);
}
.tn-display-md,
h3.tn {
  font-family: var(--tn-font-display);
  font-size: var(--tn-display-md);
  font-weight: var(--tn-fw-regular);
  line-height: 1.15;
  letter-spacing: var(--tn-tracking-tight);
}
.tn-display-sm,
h4.tn {
  font-family: var(--tn-font-display);
  font-size: var(--tn-display-sm);
  font-weight: var(--tn-fw-regular);
  line-height: var(--tn-leading-snug);
}

/* Italic is a voice device — use <em> inside display headings */
.tn em, h1.tn em, h2.tn em, h3.tn em, h4.tn em {
  font-style: italic;
}

/* Body text — primary 17px / 1.55 */
p.tn,
.tn-body {
  font-family: var(--tn-font-body);
  font-size: var(--tn-body);
  line-height: var(--tn-leading-body);
  color: var(--tn-fg-muted);
  font-weight: var(--tn-fw-regular);
}
/* Body LG — hero subhead, key claims, 22px / 1.4 */
.tn-body-lg {
  font-size: var(--tn-body-lg);
  line-height: var(--tn-leading-body-lg);
  color: var(--tn-fg-muted);
  font-weight: var(--tn-fw-light);
}
/* Body SM — supporting text, 15px / 1.6 */
.tn-body-sm {
  font-size: var(--tn-body-sm);
  line-height: var(--tn-leading-relaxed);
  color: var(--tn-fg-muted);
}

/* Eyebrow — small cap meta label, 13px / 0.1em tracking / muted */
.tn-eyebrow {
  font-family: var(--tn-font-body);
  font-size: var(--tn-body-xs);
  font-weight: var(--tn-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tn-tracking-eyebrow);
  color: var(--tn-fg-subtle);
}

/* Memo / caption — annotations, 14px italic serif or mono, muted */
.tn-memo {
  font-family: var(--tn-font-display);
  font-style: italic;
  font-size: var(--tn-memo);
  line-height: var(--tn-leading-body);
  color: var(--tn-fg-subtle);
}
.tn-memo-mono {
  font-family: var(--tn-font-mono);
  font-size: var(--tn-memo);
  line-height: var(--tn-leading-body);
  color: var(--tn-fg-subtle);
  letter-spacing: var(--tn-tracking-wide);
}

/* Stat / data display — display face for numbers */
.tn-stat {
  font-family: var(--tn-font-display);
  font-size: 1.875rem;
  font-weight: var(--tn-fw-regular);
  letter-spacing: var(--tn-tracking-tight);
  line-height: 1;
}

/* Pull quote — italic display */
.tn-quote {
  font-family: var(--tn-font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: var(--tn-leading-snug);
  letter-spacing: var(--tn-tracking-tight);
}

/* Mono — code, keyboard, technical */
.tn-mono {
  font-family: var(--tn-font-mono);
  font-size: 0.875rem;
}

/* Hairline divider */
.tn-divider {
  height: 1px;
  background: var(--tn-border);
  border: 0;
  width: 100%;
}
.tn-divider-dark {
  height: 1px;
  background: var(--tn-border-dark);
  border: 0;
  width: 100%;
}