/* ==========================================================================
   Native Charters — design tokens
   Every value here maps 1:1 to a Bricks global variable (docs/bricks-migration/global-variables.json).
   Fonts are served by the native-charters-core plugin (assets/css/nc-fonts.css).
   ========================================================================== */

:root {
  /* --- Brand palette (from the existing logo: orange + navy) --- */
  --nc-navy-950: #071723;
  --nc-navy-900: #0b1f2e;
  --nc-navy-800: #0f2a3d;
  --nc-navy-700: #163a52;
  --nc-navy-600: #1f4b68;
  --nc-navy-100: #dbe5ee;

  --nc-orange-700: #b8480f;   /* small text / links on light: 5.6:1 on white */
  --nc-orange-600: #d9581a;   /* hover */
  --nc-orange-500: #f26b21;   /* brand orange: use with navy text (7.4:1) */
  --nc-orange-100: #fde9dc;

  --nc-teal-700: #146a7a;
  --nc-teal-500: #1f8a9e;     /* inshore / shallow water accent */
  --nc-teal-100: #dff3f6;

  --nc-sand-50:  #faf8f4;     /* page background (warm off-white) */
  --nc-sand-100: #f3efe7;
  --nc-sand-200: #e7e0d3;
  --nc-sand-300: #d6cbb8;

  --nc-ink-900: #14202b;
  --nc-ink-700: #33414d;
  --nc-ink-500: #5b6b78;      /* muted text: 5.5:1 on sand-50 */
  --nc-ink-300: #a3afb8;
  --nc-white:   #ffffff;

  /* --- Semantic --- */
  --nc-bg:            var(--nc-sand-50);
  --nc-bg-alt:        var(--nc-sand-100);
  --nc-bg-card:       var(--nc-white);
  --nc-bg-dark:       var(--nc-navy-900);
  --nc-bg-dark-alt:   var(--nc-navy-800);
  --nc-text:          var(--nc-ink-900);
  --nc-text-muted:    var(--nc-ink-500);
  --nc-text-on-dark:  #f4f1ea;
  --nc-text-on-dark-muted: #b9c6d0;
  --nc-primary:       var(--nc-orange-500);
  --nc-primary-hover: #ff7a33;
  --nc-primary-text:  var(--nc-navy-950);
  --nc-link:          var(--nc-orange-700);
  --nc-link-on-dark:  #ffb48a;
  --nc-line:          var(--nc-sand-200);
  --nc-line-on-dark:  rgb(255 255 255 / .14);
  --nc-focus:         #ffb48a;
  --nc-offshore:      var(--nc-navy-800);   /* two-boat identity colours */
  --nc-inshore:       var(--nc-teal-500);
  --nc-star:          #f5b400;

  /* --- Typography --- */
  --nc-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --nc-font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nc-text-xs:  0.8125rem;  /* 13px */
  --nc-text-sm:  0.9375rem;  /* 15px */
  --nc-text-md:  1.0625rem;  /* 17px */
  --nc-text-lg:  1.1875rem;  /* 19px */
  --nc-text-xl:  clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --nc-h1:       clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  --nc-h1-hero:  clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
  --nc-h2:       clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --nc-h3:       clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --nc-h4:       clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --nc-leading-tight: 1.05;
  --nc-leading-snug: 1.2;
  --nc-leading-body: 1.6;
  --nc-tracking-tight: -0.02em;
  --nc-tracking-caps: 0.09em;
  --nc-measure: 64ch;

  /* --- Spacing (4px base) --- */
  --nc-space-1: .25rem; --nc-space-2: .5rem; --nc-space-3: .75rem; --nc-space-4: 1rem; --nc-space-5: 1.25rem;
  --nc-space-6: 1.5rem; --nc-space-8: 2rem; --nc-space-10: 2.5rem; --nc-space-12: 3rem; --nc-space-16: 4rem; --nc-space-20: 5rem; --nc-space-24: 6rem;
  --nc-section-y: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --nc-section-y-sm: clamp(2.5rem, 2rem + 2vw, 4rem);
  --nc-stack: 1.25rem;

  /* --- Layout --- */
  --nc-gutter: clamp(1rem, 4vw, 2rem);
  --nc-container: 76rem;         /* 1216px content */
  --nc-container-wide: 92rem;    /* 1472px for full-bleed grids */
  --nc-container-narrow: 46rem;  /* 736px reading width */
  --nc-header-h: 4.5rem;
  --nc-sticky-bar-h: 3.75rem;

  /* --- Shape & depth --- */
  --nc-radius-sm: 6px;
  --nc-radius: 12px;
  --nc-radius-lg: 20px;
  --nc-radius-pill: 999px;
  --nc-shadow-sm: 0 1px 2px rgb(11 31 46 / .06), 0 1px 1px rgb(11 31 46 / .04);
  --nc-shadow: 0 12px 32px -14px rgb(11 31 46 / .28), 0 2px 6px rgb(11 31 46 / .06);
  --nc-shadow-lg: 0 30px 60px -24px rgb(11 31 46 / .45);
  --nc-overlay-hero: linear-gradient(180deg, rgb(7 23 35 / .28) 0%, rgb(7 23 35 / .18) 35%, rgb(7 23 35 / .82) 100%);
  --nc-overlay-card: linear-gradient(180deg, rgb(7 23 35 / 0) 35%, rgb(7 23 35 / .85) 100%);

  /* --- Motion --- */
  --nc-ease: cubic-bezier(.2, .7, .2, 1);
  --nc-dur-fast: 150ms;
  --nc-dur: 300ms;
  --nc-dur-slow: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --nc-dur-fast: 0ms; --nc-dur: 0ms; --nc-dur-slow: 0ms; }
}
/* Phones: 16px floor for body-sized UI text (card taglines, meta rows, tables, notes, footer links). --nc-text-xs stays for eyebrows/badges. */
@media (max-width: 47.99em) {
  :root { --nc-text-sm: 1rem; }
}