/* =========================================================
   Neurolabs Design System — Foundations
   Colors, type, gradients, spacing, motion, elevation.
   Import this file once at the top of any Neurolabs artefact.
   ========================================================= */

/* -------------------- Fonts -------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* -------------------- Tokens -------------------- */
:root {
  /* ---- Brand colour: primary ---- */
  --nl-indigo:        #1A0B54;   /* Dark indigo — foundational */
  --nl-orange:        #F78C1F;   /* Neurolabs orange — signal only */

  /* ---- Brand colour: secondary ---- */
  --nl-ghost-white:   #F9FBFF;
  --nl-pale-periwinkle:#BACBE8;
  --nl-periwinkle-grey:#838BB5;
  --nl-peach:         #F9F2EE;

  /* ---- System colour ---- */
  --nl-vivid-blue:    #1833FE;
  --nl-white:         #FEFEFE;
  --nl-charcoal:      #1A1A1A;
  --nl-black:         #000000;

  /* ---- Gradient-only palette (NEVER use as solid fills) ---- */
  --nl-sunrise-coral: #E87629;
  --nl-vivid-purple:  #812EFD;
  --nl-sky-mist:      #DCEBFC;
  --nl-petal:         #EAD8E9;

  /* ---- Semantic foreground/background tokens (light mode default) ---- */
  --fg-1: var(--nl-indigo);          /* primary text on light */
  --fg-2: var(--nl-charcoal);        /* small body text on light */
  --fg-muted: var(--nl-periwinkle-grey);
  --fg-link: var(--nl-vivid-blue);
  --fg-on-dark: var(--nl-white);
  --fg-on-dark-muted: rgba(254, 254, 254, 0.72);

  --bg-page: var(--nl-white);
  --bg-soft: var(--nl-ghost-white);
  --bg-card: var(--nl-white);
  --bg-alt:  var(--nl-pale-periwinkle);
  --bg-warm: var(--nl-peach);
  --bg-dark: var(--nl-indigo);
  --bg-signal: var(--nl-orange);

  --border-soft: rgba(26, 11, 84, 0.08);
  --border-base: rgba(26, 11, 84, 0.14);
  --border-strong: var(--nl-indigo);

  /* ---- Chart palette (categorical) ---- */
  --chart-1: var(--nl-vivid-blue);
  --chart-2: var(--nl-periwinkle-grey);
  --chart-3: var(--nl-indigo);
  --chart-4: var(--nl-pale-periwinkle);
  --chart-5: color-mix(in srgb, var(--nl-vivid-blue) 40%, transparent);
  --chart-highlight: var(--nl-orange);

  /* ---- Gradients ---- */
  --grad-horizon: linear-gradient(90deg, #1833FE 0%, #E87629 100%);
  --grad-atmosphere: linear-gradient(135deg, #1A0B54 0%, #1833FE 100%);
  --grad-spark: linear-gradient(225deg, #812EFD 0%, #1833FE 100%);
  --grad-daylight-soft: linear-gradient(120deg, #DCEBFC 0%, #EAD8E9 100%);
  --grad-daylight-bold: linear-gradient(120deg, #BACBE8 0%, #DCEBFC 30%, #EAD8E9 100%);
  --grad-signal:
    radial-gradient(circle at 50% 0%, rgba(232,118,41,0.35) 0%, rgba(232,118,41,0) 60%),
    #1A0B54;

  /* ---- Type families ---- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type weights ---- */
  --weight-extrabold: 800;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-light: 300;

  /* ---- Presentation type scale (1920×1080) ---- */
  --type-hero-size: 76px;
  --type-section-size: 52px;
  --type-slide-size: 34px;
  --type-subhead-size: 22px;
  --type-body-size: 17px;
  --type-caption-size: 13px;
  --type-data-callout-size: 56px;

  /* ---- Document / UI type scale ---- */
  --type-doc-title: 30px;
  --type-h1: 24px;
  --type-h2: 19px;
  --type-h3: 15px;
  --type-body-doc: 14px;
  --type-caption-doc: 12px;

  /* ---- Line height ---- */
  --leading-display: 1.1;
  --leading-headline: 1.2;
  --leading-body: 1.5;
  --leading-tight: 1.3;

  /* ---- Tracking ---- */
  --track-display: -0.015em;
  --track-headline: -0.01em;
  --track-body: 0em;
  --track-caps: 0.12em;
  --track-mono-lg: -0.02em;

  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* ---- Layout margins ---- */
  --margin-slide: 108px;
  --margin-doc: 20mm;
  --margin-social: 80px;
  --margin-web-desktop: 80px;
  --margin-web-mobile: 24px;

  /* ---- Radii ---- */
  --radius-xs: 4px;     /* chips, tags */
  --radius-sm: 6px;     /* inputs, tooltips */
  --radius-md: 8px;     /* product screenshots, buttons */
  --radius-lg: 12px;    /* cards, hero imagery */
  --radius-xl: 20px;    /* large surfaces, drawers */
  --radius-pill: 999px; /* status pills, capsule buttons */

  /* ---- Elevation (used sparingly — flat is the default) ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(26, 11, 84, 0.06);
  --shadow-md: 0 6px 24px -8px rgba(26, 11, 84, 0.12);
  --shadow-lg: 0 24px 56px -16px rgba(26, 11, 84, 0.18);
  --shadow-focus: 0 0 0 2px var(--nl-white), 0 0 0 4px var(--nl-vivid-blue);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --dur-micro: 180ms;
  --dur-reveal: 400ms;
  --dur-ambient: 10s;
}

/* -------------------- Dark surface overrides --------------------
   Apply `.on-dark` to any container with a Dark indigo background
   (or use it on <body> for dark-mode pages). */
.on-dark {
  --fg-1: var(--nl-white);
  --fg-2: rgba(254, 254, 254, 0.86);
  --fg-muted: rgba(254, 254, 254, 0.6);
  --fg-link: var(--nl-orange);
  --bg-page: var(--nl-indigo);
  --bg-soft: rgba(255, 255, 255, 0.04);
  --bg-card: rgba(255, 255, 255, 0.06);
  --border-soft: rgba(254, 254, 254, 0.12);
  --border-base: rgba(254, 254, 254, 0.2);
  color: var(--fg-1);
  background: var(--nl-indigo);
}

/* -------------------- Base element styles -------------------- */

html, body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--type-body-doc);
  line-height: var(--leading-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--nl-orange); color: var(--nl-indigo); }

/* Hero / cover titles */
.nl-hero, h1.nl-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--type-hero-size);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
}

/* Section openers */
.nl-section-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--type-section-size);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
}

/* Slide titles */
.nl-slide-title, h1, h2.nl-slide-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--type-slide-size);
  line-height: var(--leading-headline);
  letter-spacing: var(--track-headline);
  color: var(--fg-1);
}

/* Document headings */
h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--type-h1); line-height: var(--leading-headline); letter-spacing: var(--track-headline); }
h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--type-h2); line-height: 1.25; letter-spacing: var(--track-headline); }
h3 { font-family: var(--font-body);    font-weight: 500; font-size: var(--type-h3); line-height: 1.3; }

/* Subhead / body */
.nl-subhead {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--type-subhead-size);
  line-height: var(--leading-tight);
  color: var(--fg-2);
}

p, .nl-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--type-body-doc);
  line-height: var(--leading-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.nl-caption, small {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--type-caption-doc);
  line-height: 1.4;
  color: var(--fg-muted);
}

/* All-caps eyebrow label — short, navigation/section labels only */
.nl-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Horizon gradient eyebrow */
.nl-eyebrow-horizon {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  background: var(--grad-horizon);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Data callouts — Geist Mono */
.nl-data {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--type-data-callout-size);
  line-height: 1;
  letter-spacing: var(--track-mono-lg);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.nl-data-sm {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: 14px;
  line-height: 1.2;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* Links */
a, .nl-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}
a:hover, .nl-link:hover {
  border-bottom-color: currentColor;
}

/* Code (utility — not officially branded) */
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--nl-peach);
  color: var(--nl-indigo);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}