/* ============================================================
   NOVARIX STUDIO — Colors & Type
   Source of truth: assets/brand-dna-summary.html
   ============================================================ */

/* ---------- FONTS ---------- */
/* Space Mono via Google Fonts (brand accent — mono/technical) */
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
/* Caveat via Google Fonts (handwritten accent — footer notes, rare callouts) */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap");

/* Satoshi — full weight family, local files */
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- CORE BRAND COLORS ---------- */
  --nx-bg:      #DAE0E1;   /* Primary surface — neutral grey-blue */
  --nx-dark:    #1E2124;   /* Ink / charcoal — all body text */
  --nx-orange:  #E2652E;   /* Accent, CTA, geometric motif */
  --nx-mid:     #C4CDD0;   /* Alternate bg, image placeholders */
  --nx-white:   #FFFFFF;   /* Cards, detail blocks */

  /* ---------- TONAL VARIANTS (derived) ---------- */
  --nx-bg-shadow: #B8C2C4; /* Page gutter behind main surface */
  --nx-dark-08:  rgba(30,33,36,0.08);
  --nx-dark-12:  rgba(30,33,36,0.12);
  --nx-dark-25:  rgba(30,33,36,0.25);
  --nx-dark-40:  rgba(30,33,36,0.40);
  --nx-dark-60:  rgba(30,33,36,0.60);
  --nx-white-10: rgba(255,255,255,0.10);
  --nx-white-35: rgba(255,255,255,0.35);
  --nx-white-60: rgba(255,255,255,0.60);

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --nx-surface:        var(--nx-bg);
  --nx-surface-alt:    var(--nx-white);
  --nx-surface-mid:    var(--nx-mid);
  --nx-surface-inverse:var(--nx-dark);
  --nx-fg:             var(--nx-dark);
  --nx-fg-muted:       var(--nx-dark-60);
  --nx-fg-faint:       var(--nx-dark-40);
  --nx-fg-inverse:     var(--nx-white);
  --nx-accent:         var(--nx-orange);
  --nx-accent-fg:      var(--nx-white);
  --nx-border:         var(--nx-dark-12);
  --nx-border-strong:  var(--nx-dark-25);
  --nx-divider:        var(--nx-dark-08);

  /* ---------- TYPE FAMILIES ---------- */
  --nx-font-display: "Satoshi", "Inter", system-ui, -apple-system, sans-serif;
  --nx-font-body:    "Satoshi", "Inter", system-ui, -apple-system, sans-serif;
  --nx-font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --nx-font-hand:    "Caveat", cursive;

  /* ---------- TYPE SCALE (from brand DNA) ---------- */
  --nx-hook:       96px;  /* 72–96 for hook headlines */
  --nx-hook-sm:    72px;
  --nx-h1:         68px;  /* slide / section headline */
  --nx-h2:         54px;
  --nx-h3:         36px;
  --nx-h4:         24px;
  --nx-body-lg:    32px;  /* 26–32 body */
  --nx-body:       18px;  /* web body default */
  --nx-body-sm:    16px;
  --nx-caption:    14px;  /* 16–20 captions in slides, smaller on web */
  --nx-eyebrow:    11px;  /* mono labels */

  /* ---------- SPACING ---------- */
  --nx-space-1:   4px;
  --nx-space-2:   8px;
  --nx-space-3:   12px;
  --nx-space-4:   16px;
  --nx-space-5:   24px;
  --nx-space-6:   32px;
  --nx-space-7:   48px;
  --nx-space-8:   60px;   /* brand margin */
  --nx-space-9:   80px;
  --nx-space-10: 120px;

  /* ---------- RADII ---------- */
  --nx-radius-0: 0;        /* default — editorial blocks are square */
  --nx-radius-1: 2px;      /* tags, micro-pills */
  --nx-radius-2: 4px;      /* form fields, buttons */
  --nx-radius-3: 999px;    /* rare — only for orange geometric motif dots */

  /* ---------- ELEVATION ---------- */
  /* brand is low-elevation / editorial — shadows are rare */
  --nx-shadow-0: none;
  --nx-shadow-1: 0 1px 0 var(--nx-dark-08);
  --nx-shadow-2: 0 8px 24px rgba(30,33,36,0.06);
  --nx-shadow-focus: 0 0 0 3px rgba(226,101,46,0.25);

  /* ---------- MOTION ---------- */
  --nx-ease:       cubic-bezier(0.22, 1, 0.36, 1); /* calm, precise */
  --nx-ease-snap:  cubic-bezier(0.2, 0, 0, 1);
  --nx-dur-fast:   140ms;
  --nx-dur:        240ms;
  --nx-dur-slow:   420ms;
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */

html, body {
  background: var(--nx-surface);
  color: var(--nx-fg);
  font-family: var(--nx-font-body);
  font-size: var(--nx-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--nx-font-display);
  font-weight: 700;
  color: var(--nx-fg);
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: var(--nx-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--nx-h2); }
h3 { font-size: var(--nx-h3); line-height: 1.1; }
h4 { font-size: var(--nx-h4); line-height: 1.2; letter-spacing: -0.01em; }

.nx-hook {
  font-family: var(--nx-font-display);
  font-weight: 700;
  font-size: var(--nx-hook);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--nx-fg);
}

p { max-width: 62ch; color: var(--nx-fg); text-wrap: pretty; }
p.nx-lead { font-size: var(--nx-body-lg); line-height: 1.4; font-weight: 500; }
small, .nx-caption { font-size: var(--nx-caption); color: var(--nx-fg-muted); }

/* Eyebrow / section labels — the brand's signature meta-treatment */
.nx-eyebrow {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-eyebrow);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nx-fg-faint);
}

/* Mono / technical callouts */
.nx-mono, code, kbd, pre {
  font-family: var(--nx-font-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

/* Rare handwritten accent */
.nx-hand {
  font-family: var(--nx-font-hand);
  color: var(--nx-accent);
  font-size: 1.3em;
}

/* Links — minimal, dark by default, orange on hover */
a {
  color: var(--nx-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--nx-fg);
  transition: color var(--nx-dur) var(--nx-ease),
              border-color var(--nx-dur) var(--nx-ease);
}
a:hover { color: var(--nx-accent); border-bottom-color: var(--nx-accent); }

/* Selection */
::selection { background: var(--nx-accent); color: var(--nx-white); }

/* Utility */
.nx-accent { color: var(--nx-accent); }
.nx-divider { height: 1px; background: var(--nx-divider); width: 100%; }
.nx-rule-strong { height: 1px; background: var(--nx-border-strong); width: 100%; }