/* Figma: 00 · Field Notes · Foundations
   Variables mirror the "Field Notes / Color" collection; the type classes mirror
   the "Field Notes / …" text styles one for one. Light only, same as wienscorp.com. */
:root {
  /* brand */
  --navy: #0a2634;
  --deep: #000f1d;
  --teal: #32afb6;
  --green: #89c491;
  --graphite: #383838;
  /* navy scale */
  --navy-100: #e6e9eb;
  --navy-200: #cdd4d7;
  --navy-300: #9ba8b1;
  --navy-400: #6b818c;
  /* teal scale */
  --teal-100: #eaf7f8;
  --teal-200: #d6eff1;
  --teal-300: #ade0e3;
  --teal-600: #2b8c92;
  --teal-700: #1e696d;
  /* green scale */
  --green-100: #e7f3e9;
  --green-200: #d0e7d4;
  --green-600: #6ea376;
  /* status */
  --error: #b3261e;
  --error-bg: #fdf2f1;
  /* surface */
  --paper: #ffffff;
  --mist: #f5f8f9;
  --fog: #eceff1;

  --grad: linear-gradient(100deg, var(--green) 0%, var(--teal) 70%);
  --display: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "Exo 2", ui-sans-serif, system-ui, sans-serif;

  /* motion: short and eased out, so nothing feels like it is catching up with you */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 120ms;
  --base: 180ms;
  --slow: 260ms;

  --page: 1240px;
  --gutter: 100px;
  color-scheme: light;
}

/* Figma text styles ------------------------------------------------------- */
.t-display-hero   { font: 900 56px/0.95 var(--display); letter-spacing: -0.02em; }
.t-display-page   { font: 900 40px/1.0 var(--display); letter-spacing: -0.015em; }
.t-display-drawer { font: 900 26px/1.05 var(--display); letter-spacing: -0.01em; }
.t-heading-section{ font: 900 20px/1.1 var(--display); letter-spacing: -0.005em; }
.t-heading-row    { font: 900 15px/1.2 var(--display); }
.t-label-eyebrow  { font: 900 11.5px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.t-label-nav      { font: 900 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.t-label-micro    { font: 900 10.5px/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.t-body-lede      { font: 300 17px/1.5 var(--body); }
.t-body           { font: 400 15px/1.5 var(--body); }
.t-body-strong    { font: 600 15px/1.4 var(--body); }
.t-small          { font: 400 13px/1.45 var(--body); }
.t-small-strong   { font: 600 13px/1.45 var(--body); }
.t-data-value     { font: 900 28px/1 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.t-pill           { font: 700 10.5px/1.4 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.t-button         { font: 900 11.5px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.t-chip           { font: 400 13px/1.4 var(--body); }
.t-time           { font: 400 12.5px/1.4 var(--body); font-variant-numeric: tabular-nums; }

/* colour helpers, named after the token they use */
.c-navy { color: var(--navy); } .c-deep { color: var(--deep); }
.c-navy-300 { color: var(--navy-300); } .c-navy-400 { color: var(--navy-400); }
.c-teal-700 { color: var(--teal-700); } .c-teal-300 { color: var(--teal-300); }
.c-green-600 { color: var(--green-600); } .c-error { color: var(--error); }
.c-graphite { color: var(--graphite); } .c-paper { color: var(--paper); }
.c-grad { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* base -------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--deep);
  font: 400 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--teal-700); text-decoration: none; }
::selection { background: var(--teal); color: #fff; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { flex: none; }
.num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}