/* ==========================================================================
   SOF Transits — design tokens
   Light, editorial, marine. Deep navy ink on paper, brass used sparingly.
   ========================================================================== */

:root {
  /* Ink & paper */
  --ink:        #0A1A28;
  --ink-soft:   #14293C;
  --navy:       #103A5C;
  --navy-tint:  #E8EEF3;
  --muted:      #596B7A;
  --muted-soft: #8494A1;

  --paper:      #FFFFFF;
  --sand:       #F6F3EE;
  --sand-deep:  #EDE8E0;
  --line:       #E2DDD4;
  --line-cool:  #DCE4EA;

  /* Accent — brass. Rules, eyebrows, hovers. Never a large fill. */
  --brass:      #B4823A;
  --brass-lite: #D3A45C;
  --brass-tint: #F7EFE1;

  /* Sea — used for maps, routes, data */
  --sea:        #2E6E8E;
  --sea-lite:   #6FA3B8;

  /* Type.
     Display is heavy and tightly tracked; all micro-copy (labels, eyebrows,
     stats, nav, buttons) is uppercase monospace at a near-solid leading —
     the technical-readout register. */
  --font-display: 'Inter Tight', Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter Tight', Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-eyebrow: 0.6875rem;   /* 11px  */
  --fs-small:   0.8125rem;   /* 13px  */
  --fs-body:    1.0625rem;   /* 17px  */
  --fs-lead:    1.25rem;     /* 20px  */
  --fs-h4:      1.25rem;
  --fs-h3:      1.75rem;
  --fs-h2:      clamp(1.7rem, 1.15rem + 1.7vw, 2.6rem);
  --fs-h1:      clamp(2rem, 1.15rem + 2.9vw, 3.5rem);
  --fs-display: clamp(2.2rem, 1.2rem + 3.4vw, 4.25rem);

  --track-wide: 0.22em;
  --track-mid:  0.08em;

  /* Space */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --maxw:    1280px;
  --maxw-narrow: 780px;
  --sec-y:   clamp(4.5rem, 9vw, 9rem);

  /* Chrome — hard edges, no soft shadows. Depth comes from hairlines. */
  --radius:    0px;
  --radius-lg: 0px;
  --shadow-sm: none;
  --shadow-md: 0 1px 0 var(--line), 0 12px 30px -18px rgba(10, 26, 40, .28);
  --shadow-lg: 0 24px 60px -28px rgba(10, 26, 40, .34);
  --hair:      1px solid var(--line);

  /* Pointer: the vessel-position marker from a chartplotter, turned to
     point the way. Solid mitred planes, same language as the mark. */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12 2 22 6.6 12 2 2Z' fill='%23000'/%3E%3C/svg%3E");

  --nav-h: 84px;

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .45s;
}

@media (max-width: 900px) {
  :root { --nav-h: 68px; }
}