/* ============================================================
   NUBEM · Design Tokens
   Single source of truth for color, type, spacing, motion.
   ============================================================ */

:root {
  /* ——— BRAND COLORS ——————————————————————————————— */
  --nb-lime:        #A8E022;   /* primary accent — CTAs, highlights */
  --nb-lime-600:    #8FC318;   /* hover/pressed lime */
  --nb-lime-100:    #ECFACB;   /* lime tint for badges/surfaces */
  --nb-lime-50:     #F5FCE4;

  --nb-sage-deep:   #2D3F35;   /* primary dark — headings, nav text, dark surfaces */
  --nb-sage-700:    #3E5446;
  --nb-sage-500:    #6B8070;
  --nb-sage-300:    #A8B8AE;
  --nb-sage-100:    #DEE7E1;
  --nb-sage-50:     #EEF3EF;

  --nb-ink:         #0E1410;   /* deepest — dark-bg sections */
  --nb-ink-80:      rgba(14,20,16,0.80);

  --nb-cream:       #F4F2EA;   /* light surface alt — subtle warm */
  --nb-cream-dim:   #ECEAE1;
  --nb-paper:       #FCFCFA;   /* app background */
  --nb-white:       #FFFFFF;

  /* ——— NEUTRAL SCALE ——————————————————————————————— */
  --nb-n-900:       #16231B;
  --nb-n-700:       #3A443E;
  --nb-n-500:       #6F7A73;
  --nb-n-300:       #C3CAC5;
  --nb-n-200:       #DEE3DF;
  --nb-n-100:       #ECECE6;
  --nb-n-50:        #F6F6F1;

  /* ——— SEMANTIC ——————————————————————————————— */
  --nb-text:            var(--nb-sage-deep);
  --nb-text-muted:      var(--nb-n-500);
  --nb-text-subtle:     var(--nb-n-300);
  --nb-text-inverse:    var(--nb-cream);
  --nb-surface:         var(--nb-white);
  --nb-surface-alt:     var(--nb-cream);
  --nb-surface-dark:    var(--nb-ink);
  --nb-surface-sage:    var(--nb-sage-deep);
  --nb-border:          var(--nb-n-100);
  --nb-border-strong:   var(--nb-n-200);
  --nb-accent:          var(--nb-lime);
  --nb-accent-on:       var(--nb-sage-deep);   /* text color on lime */
  --nb-danger:          #D94F4F;
  --nb-warn:            #E8A838;
  --nb-info:            #4A8FD8;
  --nb-success:         #5CB85C;

  /* ——— TYPOGRAPHY ——————————————————————————————— */
  --nb-font-sans: 'Space Grotesk', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — desktop (clamp for fluid) */
  --nb-fs-display:  clamp(44px, 5.4vw, 76px);
  --nb-fs-h1:       clamp(34px, 4vw, 54px);
  --nb-fs-h2:       clamp(26px, 2.8vw, 38px);
  --nb-fs-h3:       clamp(20px, 1.6vw, 24px);
  --nb-fs-h4:       18px;
  --nb-fs-body-lg:  18px;
  --nb-fs-body:     16px;
  --nb-fs-sm:       14px;
  --nb-fs-xs:       13px;
  --nb-fs-micro:    11px;

  --nb-lh-tight:    1.05;
  --nb-lh-snug:     1.2;
  --nb-lh-normal:   1.55;
  --nb-lh-loose:    1.7;

  --nb-fw-normal:   400;
  --nb-fw-medium:   500;
  --nb-fw-semi:     600;
  --nb-fw-bold:     700;

  --nb-track-tight: -0.02em;
  --nb-track-wide:  0.08em;

  /* ——— SPACING (4px base) ——————————————————————————————— */
  --nb-s-1:   4px;
  --nb-s-2:   8px;
  --nb-s-3:   12px;
  --nb-s-4:   16px;
  --nb-s-5:   20px;
  --nb-s-6:   24px;
  --nb-s-8:   32px;
  --nb-s-10:  40px;
  --nb-s-12:  48px;
  --nb-s-16:  64px;
  --nb-s-20:  80px;
  --nb-s-24:  96px;
  --nb-s-32:  128px;

  /* ——— RADIUS ——————————————————————————————— */
  --nb-r-xs:   4px;
  --nb-r-sm:   8px;
  --nb-r-md:   12px;
  --nb-r-lg:   16px;
  --nb-r-xl:   24px;
  --nb-r-pill: 999px;

  /* ——— SHADOW ——————————————————————————————— */
  --nb-sh-xs:  0 1px 2px rgba(14,20,16,0.05);
  --nb-sh-sm:  0 1px 3px rgba(14,20,16,0.06), 0 1px 2px rgba(14,20,16,0.04);
  --nb-sh-md:  0 4px 12px rgba(14,20,16,0.06), 0 2px 4px rgba(14,20,16,0.04);
  --nb-sh-lg:  0 12px 32px rgba(14,20,16,0.10), 0 4px 8px rgba(14,20,16,0.04);
  --nb-sh-xl:  0 24px 60px rgba(14,20,16,0.16);
  --nb-sh-focus: 0 0 0 3px rgba(168,224,34,0.35);

  /* ——— MOTION ——————————————————————————————— */
  --nb-ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --nb-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --nb-d-fast:     120ms;
  --nb-d-base:     200ms;
  --nb-d-slow:     320ms;

  /* ——— LAYOUT ——————————————————————————————— */
  --nb-container:  1160px;
  --nb-container-narrow: 880px;
  --nb-container-wide:   1320px;
  --nb-section-py:       clamp(64px, 9vw, 120px);
  --nb-gutter:     clamp(20px, 4vw, 32px);

  /* ——— Z-INDEX ——————————————————————————————— */
  --nb-z-nav:       60;
  --nb-z-sticky:    70;
  --nb-z-modal:     200;
  --nb-z-toast:     300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nb-d-fast: 0ms;
    --nb-d-base: 0ms;
    --nb-d-slow: 0ms;
  }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}