/* Design tokens, reset, base typography. Loaded first. */

:root{
  color-scheme:light;

  /* Maritime Gold palette */
  --navy-deep:#050e1f;
  --navy:#0a1628;
  --navy-mid:#122a47;
  --ocean:#1a3a5c;
  --teal:#0d7388;
  --teal-light:#2ba8bc;
  --gold:#c9a14b;
  --gold-bright:#e3c071;
  --gold-deep:#8a6f30;
  --cream:#faf6ee;
  --cream-warm:#f3ebd9;
  --white:#ffffff;
  --text:#14233b;
  --text-soft:#41526b;
  --muted:#758397;
  --soft:#eef2f6;
  --line:rgba(20,35,59,0.08);
  --good:#2d7a4f;
  --good-bg:#e9f3ec;
  --warn:#b4622a;
  --warn-bg:#fbf0e6;
  --alert:#a8334c;
  --alert-bg:#fbe9ed;

  /* Elevation */
  --shadow-sm:0 1px 3px rgba(10,22,40,0.04),0 1px 2px rgba(10,22,40,0.06);
  --shadow-md:0 4px 14px rgba(10,22,40,0.08),0 2px 6px rgba(10,22,40,0.04);
  --shadow-lg:0 18px 40px rgba(10,22,40,0.12),0 8px 16px rgba(10,22,40,0.06);

  /* Geometry */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;

  /* Motion */
  --t-fast:160ms cubic-bezier(.2,.7,.3,1);
  --t-med:320ms cubic-bezier(.2,.7,.3,1);

  /* Layout */
  --bottom-nav-h:64px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--cream);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}

/* Base typography */
h2{font-family:'Fraunces',serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:500;color:var(--navy);line-height:1.1;letter-spacing:-0.018em;margin-bottom:4px}
h2 .date{display:block;color:var(--gold-deep);font-size:0.78rem;font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;margin-top:10px}
h3{font-family:'Fraunces',serif;font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:600;color:var(--navy);line-height:1.2;margin:22px 0 10px}
h4{font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--teal);text-transform:uppercase;letter-spacing:0.14em;margin:18px 0 8px;font-weight:500}
p{margin-bottom:12px;color:var(--text);font-size:1rem}
p strong{color:var(--navy);font-weight:600}
ul{margin:8px 0 14px 22px}
li{margin-bottom:8px}
li strong{color:var(--navy)}
em{font-style:italic;color:var(--text-soft)}

/* Universal a11y: focus + touch */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
button,a{touch-action:manipulation}