/* ============================================================
   Avalmar — Design tokens
   Geist typeface + 4px scale + hairline borders.
   Nautical palette: deep navy, turquoise accent, validity status.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap");

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Geist_wght_.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Geist";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Geist-Italic_wght_.woff2") format("woff2-variations");
}

:root {
  /* ---------- Brand: deep navy + turquoise ---------- */
  --navy-900: #07131F;
  --navy-800: #0A1B2C;
  --navy-700: #0F2740;
  --navy-600: #16385B;
  --navy-500: #1E4B78;

  --brand:        #12B0A6;
  --brand-hover:  #0E948C;
  --brand-soft:   #E0F6F4;
  --brand-bright: #2BD4C7;

  /* ---------- Status / validity ---------- */
  --ok:        #1A9E55;  --ok-bg:        #E7F6ED;  --ok-bd:        #BCE6CB;
  --warn:      #C8820B;  --warn-bg:      #FBF1DC;  --warn-bd:      #F0DBA8;
  --bad:       #D33A36;  --bad-bg:       #FBE8E7;  --bad-bd:       #F1C4C2;

  /* ---------- Neutrals (cool) ---------- */
  --paper:     #F6F9FB;
  --surface:   #FFFFFF;
  --elevated:  #EEF3F7;
  --border:    #E1E9F0;
  --border-strong: #CBD8E3;

  --text-1:    #0A1B2C;
  --text-2:    #4E6275;
  --text-3:    #8294A4;

  /* on-dark text */
  --on-dark-1: #EAF2F8;
  --on-dark-2: #9DB2C4;
  --on-dark-bd: rgba(255,255,255,0.10);

  --link:      var(--brand);

  /* ---------- Radii ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* ---------- Type ---------- */
  --font-display: "Geist", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

  --fs-display: 60px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 22px;
  --fs-body-l: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-mono: 13px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;

  --track-tight: -0.022em;
  --track-body: -0.01em;

  --content-max: 1200px;
  --gutter: 32px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 110ms;
  --dur-base: 170ms;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-tight);
  line-height: 1.08;
  margin: 0;
  color: var(--text-1);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0; max-width: 66ch; text-wrap: pretty; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-hover);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.lead { font-size: var(--fs-body-l); line-height: 1.55; color: var(--text-2); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--content-max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-24); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-medium);
  letter-spacing: var(--track-body); padding: 13px 22px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; line-height: 1; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary { background: transparent; color: var(--text-1); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--text-2); }
.btn-sm { padding: 9px 16px; font-size: var(--fs-small); }

/* on dark surfaces */
.on-dark .btn-secondary { color: var(--on-dark-1); border-color: var(--on-dark-bd); }
.on-dark .btn-secondary:hover { border-color: var(--on-dark-2); }

/* ---------- Validity pill ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); border: 1px solid;
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.pill-ok   { color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok-bd); }
.pill-ok::before   { background: var(--ok); }
.pill-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.pill-warn::before { background: var(--warn); }
.pill-bad  { color: var(--bad);  background: var(--bad-bg);  border-color: var(--bad-bd); }
.pill-bad::before  { background: var(--bad); }

/* ---------- Card ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-8);
  transition: border-color var(--dur-base) var(--ease);
}