/* =========================================================
   Neuronomy Design System — Colors & Type
   Source: Paleta de Color.pdf + Manual de Identidad
   ========================================================= */

/* ---------- Fonts ---------- */
/* Nexa — display / headline (matches the wordmark's geometric lowercase feel) */
@font-face { font-family: 'Nexa'; src: url('fonts/Nexa-Light.otf')   format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('fonts/Nexa-Book.otf')    format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('fonts/Nexa-Regular.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('fonts/Nexa-Bold.otf')    format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('fonts/Nexa-Heavy.otf')   format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

/* Nexa Text — body */
@font-face { font-family: 'Nexa Text'; src: url('fonts/NexaText-Light.otf')   format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa Text'; src: url('fonts/NexaText-Book.otf')    format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa Text'; src: url('fonts/NexaText-Regular.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa Text'; src: url('fonts/NexaText-Bold.otf')    format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

/* Chillax — secondary display (softer, humanist geometric) */
@font-face { font-family: 'Chillax'; src: url('fonts/Chillax-Light.otf')    format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chillax'; src: url('fonts/Chillax-Regular.otf')  format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chillax'; src: url('fonts/Chillax-Medium.otf')   format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chillax'; src: url('fonts/Chillax-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chillax'; src: url('fonts/Chillax-Bold.otf')     format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Brand colors (from Paleta de Color.pdf) ---------- */
  --n-verde-deep:   #0B3D2D;   /* primary — deep forest green */
  --n-verde:        #0D6548;   /* secondary — true brand green */
  --n-mint:         #78C1A6;   /* tertiary — soft mint accent  */

  --n-ink:          #222222;   /* primary ink / near-black */
  --n-gray-700:     #61615E;   /* dark neutral text */
  --n-gray-500:     #9A9A94;   /* mid neutral */
  --n-gray-300:     #BCBCB4;   /* warm stone */
  --n-bone:         #FFFCFB;   /* off-white, slightly warm */

  /* ---------- Extended tints (oklch-interpolated, harmonious) ---------- */
  --n-verde-900:    #07281E;
  --n-verde-800:    #0B3D2D;   /* = deep */
  --n-verde-700:    #0D6548;   /* = verde */
  --n-verde-600:    #1A8762;
  --n-verde-500:    #2FA783;
  --n-verde-400:    #78C1A6;   /* = mint */
  --n-verde-300:    #A8D6C2;
  --n-verde-200:    #CFE7DB;
  --n-verde-100:    #E8F2EC;
  --n-verde-50:     #F4F9F6;

  --n-stone-900:    #1A1A18;
  --n-stone-800:    #222222;   /* = ink */
  --n-stone-700:    #3A3A37;
  --n-stone-600:    #61615E;
  --n-stone-500:    #9A9A94;
  --n-stone-400:    #BCBCB4;
  --n-stone-300:    #D9D9D2;
  --n-stone-200:    #ECECE6;
  --n-stone-100:    #F6F6F1;
  --n-stone-50:     #FFFCFB;

  /* ---------- Semantic (light, default) ---------- */
  --bg:             var(--n-bone);
  --bg-raised:      #FFFFFF;
  --bg-sunken:      var(--n-stone-100);
  --bg-inverted:    var(--n-verde-deep);

  --fg:             var(--n-ink);
  --fg-muted:       var(--n-gray-700);
  --fg-subtle:      var(--n-gray-500);
  --fg-disabled:    var(--n-gray-300);
  --fg-on-dark:     var(--n-bone);
  --fg-on-brand:    var(--n-bone);

  --brand:          var(--n-verde);
  --brand-strong:   var(--n-verde-deep);
  --brand-soft:     var(--n-verde-100);

  --accent:         var(--n-mint);

  --border:         var(--n-stone-200);
  --border-strong:  var(--n-stone-300);

  --success:        var(--n-verde-600);
  --warning:        #C98A2E;
  --danger:         #B84B3A;

  /* ---------- Radii ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-2xl: 48px;
  --radius-pill: 999px;

  /* ---------- Shadows (soft, warm) ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(11, 61, 45, 0.06);
  --shadow-sm: 0 2px 6px -1px rgba(11, 61, 45, 0.08), 0 1px 2px rgba(11, 61, 45, 0.05);
  --shadow-md: 0 10px 24px -8px rgba(11, 61, 45, 0.14), 0 2px 6px -2px rgba(11, 61, 45, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(11, 61, 45, 0.18), 0 4px 10px -4px rgba(11, 61, 45, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  /* ---------- Spacing (8pt base) ---------- */
  --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-32: 128px;

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---------- Type families ---------- */
  --font-display: 'Nexa', 'Chillax', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Nexa Text', 'Nexa', ui-sans-serif, system-ui, sans-serif;
  --font-soft:    'Chillax', 'Nexa', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (desktop) ---------- */
  --t-display-xl: 96px;
  --t-display-lg: 72px;
  --t-display:    56px;
  --t-h1:         44px;
  --t-h2:         34px;
  --t-h3:         26px;
  --t-h4:         20px;
  --t-body-lg:    18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    12px;
  --t-overline:   11px;

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-widest:  0.16em;
}

/* ---------- Dark theme (on deep green canvas) ---------- */
[data-theme="dark"],
.theme-dark {
  --bg:          var(--n-verde-deep);
  --bg-raised:   var(--n-verde-700);
  --bg-sunken:   var(--n-verde-900);
  --bg-inverted: var(--n-bone);

  --fg:          var(--n-bone);
  --fg-muted:    var(--n-verde-200);
  --fg-subtle:   var(--n-verde-300);
  --fg-disabled: rgba(255,252,251,0.35);

  --brand:       var(--n-mint);
  --brand-strong:var(--n-verde-400);
  --brand-soft:  rgba(120, 193, 166, 0.15);

  --border:         rgba(255,252,251,0.14);
  --border-strong:  rgba(255,252,251,0.28);
}

/* ---------- Base element styles ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; }
h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h2); line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); margin: 0; }
h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: var(--lh-snug);  margin: 0; }
h4, .h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h4); line-height: var(--lh-snug);  margin: 0; }

.display-xl { font-family: var(--font-display); font-weight: 300; font-size: var(--t-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.display-lg { font-family: var(--font-display); font-weight: 300; font-size: var(--t-display-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.display    { font-family: var(--font-display); font-weight: 400; font-size: var(--t-display);    line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }

.body-lg { font-size: var(--t-body-lg); line-height: var(--lh-base); }
.body    { font-size: var(--t-body);    line-height: var(--lh-base); }
.body-sm { font-size: var(--t-body-sm); line-height: var(--lh-base); color: var(--fg-muted); }
.caption { font-size: var(--t-caption); line-height: var(--lh-snug); color: var(--fg-muted); }

.overline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-overline);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.eyebrow-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-body-sm);
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
}

code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }