/* ============================================================================
   NODO J — Design Foundations: Color & Type
   ----------------------------------------------------------------------------
   Single source of truth for color, typography, spacing, radius, shadow and
   motion tokens. Import this file first, then layer component styles on top.

   Fonts load from Google Fonts (open licensed). For offline/production builds,
   self-host the .woff2 files into /fonts and swap the @import for @font-face.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------------------------------------------------------------- FONTS */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ------------------------------------------------------ NEUTRALS (slate) */
  /* Cool-gray ramp. Paper surfaces in light, ink surfaces in dark sections.  */
  --paper:        #ffffff;
  --slate-50:     #f7f8fa;
  --slate-100:    #eff1f5;
  --slate-200:    #e2e6ec;
  --slate-300:    #cdd3dd;
  --slate-400:    #a6aebc;
  --slate-500:    #7b8494;
  --slate-600:    #5a6473;
  --slate-700:    #3d4654;
  --slate-800:    #262d38;
  --slate-900:    #161b22;
  --slate-950:    #0c0f14;

  /* ------------------------------------------------------- BRAND / ACCENT */
  /* Turquoise/jade #00caaa — Nodo J's identity color, taken straight from   */
  /* the logo. Owns the node motif, primary CTAs, highlights and focus.      */
  --accent-50:    #e6faf5;
  --accent-100:   #c2f3e8;
  --accent-200:   #8fe8d6;  /* focus-ring base */
  --accent-300:   #54d8be;
  --accent-400:   #1fcaa9;
  --accent:       #00caaa;  /* the brand color — bright fills, motif      */
  --accent-600:   #03a88e;  /* hover on bright fills                      */
  --accent-700:   #0a8473;  /* active / deep eyebrow on light            */
  --accent-ink:   #0c6457;  /* teal used as TEXT / links (AA on white)   */
  --brand:        #00caaa;  /* alias for clarity in markup               */

  /* Secondary data-viz hues (charts only) — kept sober. */
  --data-1:       #00caaa;  /* brand teal   */
  --data-2:       #2b4a63;  /* deep slate   */
  --data-3:       #6aa7c9;  /* muted blue   */
  --data-4:       #e0b25a;  /* soft amber   */

  /* -------------------------------------------------------- SEMANTIC ROLES */
  --success:      #16a34a;
  --success-bg:   #e7f6ec;
  --warning:      #d97706;
  --warning-bg:   #fcf0dd;
  --danger:       #dc2626;
  --danger-bg:    #fbe7e7;
  --info:         var(--accent);
  --info-bg:      var(--accent-50);

  /* ------------------------------------------------ SEMANTIC SURFACE / TEXT */
  --bg:           var(--slate-50);   /* app/page background       */
  --surface:      var(--paper);      /* cards, panels             */
  --surface-2:    var(--slate-50);   /* sunken / subtle fills     */
  --surface-ink:  var(--slate-950);  /* dark drama sections       */

  --fg1:          var(--slate-900);  /* primary text              */
  --fg2:          var(--slate-600);  /* secondary text            */
  --fg3:          var(--slate-500);  /* muted / captions          */
  --fg-on-ink:    #eef1f6;           /* text on dark surfaces     */
  --fg-on-accent: #ffffff;           /* text on accent            */

  --line:         var(--slate-200);  /* hairline borders          */
  --line-strong:  var(--slate-300);
  --line-ink:     rgba(255,255,255,.10);

  /* ------------------------------------------------------------- RADIUS */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 999px;

  /* ------------------------------------------------------------ SPACING */
  /* 4px base grid. Reference via var() for consistent rhythm.            */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ------------------------------------------------------------- SHADOW */
  /* Soft, cool-tinted elevation. Sober — never heavy or colored.         */
  --shadow-xs: 0 1px 2px rgba(12,15,20,.06);
  --shadow-sm: 0 1px 2px rgba(12,15,20,.06), 0 1px 1px rgba(12,15,20,.04);
  --shadow-md: 0 4px 12px rgba(12,15,20,.07), 0 2px 4px rgba(12,15,20,.05);
  --shadow-lg: 0 12px 28px rgba(12,15,20,.10), 0 4px 8px rgba(12,15,20,.05);
  --shadow-xl: 0 24px 56px rgba(12,15,20,.14), 0 8px 16px rgba(12,15,20,.06);
  --ring:      0 0 0 3px var(--accent-200);   /* focus ring          */

  /* ------------------------------------------------------------- MOTION */
  --ease:        cubic-bezier(.2, .7, .2, 1);   /* default, gentle */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);   /* entrances       */
  --dur-fast:    120ms;
  --dur:         200ms;
  --dur-slow:    420ms;

  /* --------------------------------------------------------- TYPE SCALE */
  /* Display uses Space Grotesk with tight tracking; body uses Hanken.    */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY
   Apply these classes (or copy the rules) instead of styling ad-hoc.
   ========================================================================== */

.nj-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-6xl);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--fg1);
  text-wrap: balance;
}
.nj-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--fg1);
  text-wrap: balance;
}
.nj-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--fg1);
  text-wrap: balance;
}
.nj-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.nj-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--fg2);
  text-wrap: pretty;
}
.nj-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg1);
  text-wrap: pretty;
}
.nj-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg2);
}
/* Eyebrow / kicker — mono, upper, tracked. A core Nodo J signature. */
.nj-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);  /* deep teal for legibility at small sizes */
}
.nj-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  color: var(--fg2);
}

/* Links inherit the accent and underline on hover only. */
.nj-link {
  color: var(--accent-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nj-link:hover { color: var(--accent-700); text-decoration: underline; text-underline-offset: 3px; }