/* ==========================================================================
   Nordic Nights Network — design tokens
   --------------------------------------------------------------------------
   Derived from the Figma file "Nordic Nights Network Landing Page"
   (vAVAAf5Kj0sFg51wqTtIzW), frames "Desktop - 1" (1440) and "iPhone 17 - 1"
   (402).

   The Figma file itself defines only two variables (C-cube/Black and one type
   style), so every value below was read off individual layers and consolidated
   here. This file is the single place to change them.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Colour ----------------------------------------------------------- */
  --nn-ink:            #040404;  /* Figma variable "C-cube/Black" */
  --nn-black:          #000000;  /* hero plate behind the gradient */
  --nn-white:          #ffffff;
  --nn-muted:          #4b4b4b;  /* copyright line */

  --nn-accent:         #7570ff;  /* primary button — "Get in touch" */
  --nn-accent-ink:     #ffffff;
  --nn-accent-alt:     #2cd8a8;  /* secondary button, menu icon */
  --nn-accent-alt-ink: #040404;

  --nn-bg:             var(--nn-white);
  --nn-text:           var(--nn-ink);
  --nn-text-invert:    var(--nn-white);

  /* --- Type families ---------------------------------------------------- */
  --nn-font-display: "seismic-latin-variable", "Seismic Latin VF",
                     ui-sans-serif, system-ui, sans-serif;
  --nn-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system,
                     "Segoe UI", Roboto, sans-serif;

  /* Variable-font axes. The Seismic face carries a custom "SEIS" axis; the
     design uses it at 0 throughout. */
  --nn-seis: 0;
  --nn-wght-medium: 500;
  --nn-wght-bold: 700;

  /* --- Type scale ------------------------------------------------------- */
  /* Each clamp() interpolates linearly between the two designed breakpoints,
     402px and 1440px, hitting the Figma value exactly at both ends. */
  --nn-size-section: clamp(1.5rem,  0.532rem + 3.854vw, 4rem);     /* 24 → 64 */
  --nn-size-cta:     clamp(1.5rem,  0.919rem + 2.312vw, 3rem);     /* 24 → 48 */
  --nn-size-title:   clamp(1.5rem,  1.306rem + 0.771vw, 2rem);     /* 24 → 32 */
  --nn-size-lead:    clamp(1rem,    0.806rem + 0.771vw, 1.5rem);   /* 16 → 24 */
  --nn-size-body:    clamp(1rem,    0.903rem + 0.385vw, 1.25rem);  /* 16 → 20 */
  --nn-size-ctasub:  clamp(1rem,    0.613rem + 1.541vw, 2rem);     /* 16 → 32 */
  --nn-size-label:   clamp(1rem,    0.806rem + 0.771vw, 1.5rem);   /* 16 → 24 */
  --nn-size-nav:     clamp(1rem,    0.952rem + 0.193vw, 1.125rem); /* 16 → 18 */
  --nn-size-button:  1.25rem;                                      /* 20 both  */

  /* --- Line height ------------------------------------------------------ */
  --nn-lh-tight: 1.2;   /* headings, leads */
  --nn-lh-body:  1.5;   /* narrowed to 1.35 at the desktop breakpoint */
  --nn-lh-nav:   1.556; /* 28/18 */
  --nn-lh-wide:  1.8;   /* copyright */

  /* --- Letter spacing --------------------------------------------------- */
  /* Figma expresses these in px; converted to em so they hold at every size.
     The conversion is consistent across both breakpoints. */
  --nn-track-tight: -0.03em; /* display + body copy */
  --nn-track-wide:   0.06em; /* CTA heading, form labels */
  --nn-track-nav:    0.028em;

  /* --- Layout ----------------------------------------------------------- */
  --nn-gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --nn-container: 77.5rem;  /* 1240px — matches the desktop content band */
  --nn-measure:   53.5rem;  /* 856px — the centred "Our context" measure */
  --nn-radius:    0;        /* every surface in the design is square */
  /* Header band: 96px on the 402 frame, 140px on the 1440 frame. */
  --nn-header-h:  clamp(6rem, 4.935rem + 4.239vw, 8.75rem);

  /* --- Spacing ---------------------------------------------------------- */
  --nn-space-xs:  1rem;
  --nn-space-s:   1.5rem;
  --nn-space-m:   2.5rem;
  --nn-space-l:   4rem;
  --nn-space-xl:  clamp(4rem, 8vw, 7.5rem);
  --nn-section:   clamp(4.5rem, 10vw, 10rem);

  /* --- Motion ----------------------------------------------------------- */
  --nn-transition: 160ms ease;
}

@media (min-width: 60rem) {
  :root { --nn-lh-body: 1.35; }
}