/* ==========================================================================
   NSRL DESIGN TOKENS — the one place for colors, fonts, sizes and motion
   Path: assets/common/css/public/tokens.css
   Loaded on every page (dependency of site.css). Change a value here and every
   public section follows.

   Palette (4 core colors + neutrals)
     green  #0b3d24  brand: headings, primary buttons, dark bands, footer
   Neutrals are warm: cream page, sand alternate sections, white cards.
     teal   #087f87  interactive: links, focus rings, secondary buttons
     gold   #c9a227  highlight: accents, active states, primary button on dark bands
     red    #b42318  danger only: errors, destructive actions
   ========================================================================== */

:root {
  /* ---------- Core scales ---------- */
  --nsrl-color-green-950: #062818;
  --nsrl-color-green-900: #0b3d24;
  --nsrl-color-green-800: #12532f;
  --nsrl-color-green-700: #1b6b40;
  --nsrl-color-green-100: #e3efe7;
  --nsrl-color-green-50:  #f2f7f3;

  --nsrl-color-teal-800: #065f65;
  --nsrl-color-teal-700: #087f87;
  --nsrl-color-teal-500: #2aa3a9;
  --nsrl-color-teal-300: #7fd3d6;
  --nsrl-color-teal-100: #dff4f4;
  --nsrl-color-teal-50:  #f0fafa;

  --nsrl-color-gold-800: #7a5d08;
  --nsrl-color-gold-700: #8a6a0b;
  --nsrl-color-gold-600: #b48f1c;
  --nsrl-color-gold-500: #c9a227;
  --nsrl-color-gold-400: #d9b84a;
  --nsrl-color-gold-300: #e8cf7a;
  --nsrl-color-gold-100: #f8efd2;

  --nsrl-color-red-700: #b42318;
  --nsrl-color-red-100: #fde8e6;

  --nsrl-color-cream: #fbf8f1;
  --nsrl-color-sand:  #f3eee2;
  --nsrl-color-sage:  #e4ede5;

  --nsrl-color-ink:   #101a15;
  --nsrl-color-slate: #46544c;
  --nsrl-color-muted: #6b7a72;
  --nsrl-color-line:  #dbe4de;
  --nsrl-color-mist:  #f4f7f5;
  --nsrl-color-paper: #ffffff;

  /* ---------- Semantic roles (use these in components) ---------- */
  --nsrl-color-brand:        var(--nsrl-color-green-900);
  --nsrl-color-brand-deep:   var(--nsrl-color-green-950);
  --nsrl-color-accent:       var(--nsrl-color-teal-700);
  --nsrl-color-accent-text:  var(--nsrl-color-teal-800);
  --nsrl-color-highlight:    var(--nsrl-color-gold-500);
  --nsrl-color-danger:       var(--nsrl-color-red-700);

  --nsrl-color-heading:      var(--nsrl-color-green-900);
  --nsrl-color-text:         var(--nsrl-color-slate);
  --nsrl-color-text-muted:   var(--nsrl-color-muted);
  --nsrl-color-surface:      var(--nsrl-color-cream);
  --nsrl-color-surface-alt:  var(--nsrl-color-sand);
  --nsrl-color-card:         var(--nsrl-color-paper);
  --nsrl-color-border:       var(--nsrl-color-line);

  --nsrl-color-on-dark:        #ffffff;
  --nsrl-color-on-dark-muted:  rgba(255, 255, 255, 0.78);
  --nsrl-color-on-dark-faint:  rgba(255, 255, 255, 0.55);
  --nsrl-color-on-dark-line:   rgba(255, 255, 255, 0.14);

  --nsrl-focus-ring: 0 0 0 3px rgba(8, 127, 135, 0.35);

  /* ---------- Typography ---------- */
  --nsrl-font-body: var(--nsrl-font, "DM Sans", sans-serif);   /* family defined once in fonts.css */
  --nsrl-font-display: var(--nsrl-font-heading, "DM Sans", sans-serif);   /* family defined once in fonts.css */

  --nsrl-fs-eyebrow: 0.75rem;
  --nsrl-fs-xs:      0.75rem;
  --nsrl-fs-sm:      0.875rem;
  --nsrl-fs-body:    1rem;
  --nsrl-fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --nsrl-fs-h4:      1.125rem;
  --nsrl-fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --nsrl-fs-h2:      clamp(2.25rem, 1.4rem + 3vw, 4rem);
  --nsrl-fs-h1:      clamp(2.75rem, 1.6rem + 3.6vw, 4.625rem);
  --nsrl-fs-display: clamp(2.5rem, 1.2rem + 5vw, 6rem);

  --nsrl-lh-tight: 1.12;
  --nsrl-lh-snug:  1.3;
  --nsrl-lh-body:  1.65;

  --nsrl-fw-regular: 400;
  --nsrl-fw-medium:  500;
  --nsrl-fw-bold:    700;
  --nsrl-fw-display: 600;

  --nsrl-tracking-eyebrow: 0.16em;

  /* ---------- Spacing + layout ---------- */
  --nsrl-space-1: 4px;
  --nsrl-space-2: 8px;
  --nsrl-space-3: 12px;
  --nsrl-space-4: 16px;
  --nsrl-space-5: 24px;
  --nsrl-space-6: 32px;
  --nsrl-space-7: 48px;
  --nsrl-space-8: 64px;
  --nsrl-space-9: 96px;

  --nsrl-container: 1200px;
  --nsrl-container-wide: 1300px;
  --nsrl-gutter: clamp(16px, 4vw, 32px);
  --nsrl-section-y: clamp(72px, 3rem + 6vw, 144px);

  /* ---------- Shape + depth ---------- */
  --nsrl-radius-sm:   6px;
  --nsrl-radius-md:   10px;
  --nsrl-radius-lg:   16px;
  --nsrl-radius-xl:   28px;
  --nsrl-radius-2xl:  40px;
  --nsrl-radius-pill: 999px;

  --nsrl-shadow-sm: 0 1px 2px rgba(6, 40, 24, 0.06), 0 1px 3px rgba(6, 40, 24, 0.08);
  --nsrl-shadow-md: 0 6px 18px -6px rgba(6, 40, 24, 0.16), 0 2px 6px rgba(6, 40, 24, 0.06);
  --nsrl-shadow-lg: 0 24px 48px -16px rgba(6, 40, 24, 0.28);

  /* ---------- Motion ---------- */
  --nsrl-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --nsrl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nsrl-dur-fast: 150ms;
  --nsrl-dur-base: 250ms;
  --nsrl-dur-slow: 600ms;

  /* ---------- Buttons: one size everywhere ---------- */
  --nsrl-btn-font-size: 0.9375rem;
  --nsrl-btn-pad-y: 0.8125rem;
  --nsrl-btn-pad-x: 1.625rem;
  --nsrl-btn-radius: var(--nsrl-radius-pill);
  --nsrl-btn-primary-bg: var(--nsrl-color-green-900);
  --nsrl-btn-primary-bg-hover: var(--nsrl-color-green-800);
  --nsrl-btn-primary-text: #ffffff;

  /* ---------- Header / anchors ---------- */
  --nsrl-anchor-offset: 150px;
  --nsrl-z-header: 999;

  /* ---------- Skeleton ---------- */
  --nsrl-skel-base:  rgba(11, 61, 36, 0.08);
  --nsrl-skel-shine: rgba(255, 255, 255, 0.75);

  /* ---------- Footer ---------- */
  --nsrl-footer-size: 0.875rem;
  --nsrl-footer-leading: 1.6;
  --nsrl-footer-text: var(--nsrl-color-on-dark-muted);
}