/* Needle Shark design system v2.0 · CURRENT · 2026-11-04.
   Shared values for every new page. Shared production and preview tokens.
   Rules and migration: README.md and MIGRATION.md in this directory. */
:root {
  --ns-color-brand: #BE3E3E;
  --ns-color-brand-hover: #A83232;
  --ns-color-ink: #1C2020;
  --ns-color-ink-hover: #373C39;
  --ns-color-muted: #656B68;
  --ns-color-footer-muted: #CDD0CC;
  --ns-color-footer-line: #4B4E4A;
  --ns-color-footer-hover: #F0B4B4;
  --ns-color-white: #FFFFFF;
  --ns-color-surface: #F5F6F3;
  --ns-color-accent-surface: #F8EEEB;
  --ns-color-line: #E2E5E1;
  --ns-color-control-border: #858D85;
  --ns-color-error: #A62929;
  --ns-color-success: #343E2D;
  --ns-color-success-surface: #E8ECE3;

  /* Radius is determined by role, never by page or viewport. */
  --ns-radius-surface: 24px;
  --ns-radius-control: 14px;
  --ns-radius-pill: 999px;
  --ns-radius-circle: 50%;
  --ns-radius-none: 0;

  --ns-space-1: 4px;
  --ns-space-2: 8px;
  --ns-space-3: 12px;
  --ns-space-4: 16px;
  --ns-space-6: 24px;
  --ns-space-8: 32px;
  --ns-space-10: 40px;
  --ns-space-12: 48px;
  --ns-space-16: 64px;
  --ns-space-20: 80px;
  --ns-space-28: 112px;
  --ns-container-max: 1320px;
  --ns-page-gutter: 56px;
  --ns-section-space: var(--ns-space-28);
  --ns-card-padding: var(--ns-space-8);
  --ns-grid-gap: var(--ns-space-6);
  --ns-reading-width: 68ch;

  --ns-font: Manrope, Arial, sans-serif;
  --ns-weight-body: 400;
  --ns-weight-label: 600;
  --ns-weight-heading: 650;
  --ns-weight-strong: 700;
  --ns-text-caption: .75rem;
  --ns-text-small: .875rem;
  --ns-text-body: 1rem;
  --ns-text-lead: 1.125rem;
  --ns-text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --ns-text-h2: clamp(2.125rem, 3.65vw, 3.25rem);
  --ns-text-h1: clamp(2.625rem, 4.6vw, 4.125rem);
  --ns-text-reading-title: clamp(2rem, 3.65vw, 3.25rem);
  --ns-leading-body: 1.65;
  --ns-leading-reading: 1.8;
  --ns-leading-heading: 1.15;
  --ns-leading-card: 1.3;
  --ns-tracking-heading: -.045em;
  --ns-tracking-card: -.025em;
  --ns-tracking-eyebrow: .1em;

  --ns-control-height: 52px;
  --ns-button-height: 60px;
  --ns-compact-height: 48px;
  --ns-icon-control-size: 48px;
  --ns-icon-size: 24px;
  --ns-icon-stroke: 1.6;
  --ns-focus-width: 3px;
  --ns-focus-offset: 4px;
  --ns-focus-color: var(--ns-color-brand);
  --ns-motion-fast: 180ms;
  --ns-motion-panel: 300ms;
  --ns-motion-ease: ease;
  --ns-shadow-surface: none;
  --ns-z-header: 20;
  --ns-z-dialog: 100;
}
@media (max-width: 1199px) {
  :root { --ns-page-gutter: 36px; --ns-section-space: var(--ns-space-20); }
}
@media (max-width: 899px) {
  :root { --ns-page-gutter: 24px; }
}
@media (max-width: 639px) {
  :root {
    --ns-page-gutter: 20px;
    --ns-section-space: var(--ns-space-16);
    --ns-card-padding: var(--ns-space-6);
    --ns-grid-gap: var(--ns-space-4);
  }
}
@media (max-width: 374px) {
  :root { --ns-page-gutter: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --ns-motion-fast: 0ms; --ns-motion-panel: 0ms; }
}