/* ASTWA design tokens: fonts, colours, spacing. Every component uses only these variables.
   Light only. Brand palette: mist #EAF4FF, mint #97D7C7, pink #F8C2C5, coral #EE918D, teal #029386.
   Refresh (21 Oct, local): Sora for display, Manrope for text; mono only for code,
   ids and hashes. Buttons and the active nav pill use the teal to pink gradient with white ink (4.5:1 at both ends). Status colours are fixed and mean status only: red = vulnerability or failure,
   amber = warning, jade = passed check, blue = info. Every status also has an icon and a word. */

@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"), url(../fonts/manrope-latin-wght-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(../fonts/sora-latin-wght-normal.woff2) format("woff2-variations"), url(../fonts/sora-latin-wght-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; /* taste-skill-ignore: code, ids and hashes only */
  src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; /* taste-skill-ignore: code, ids and hashes only */
  src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
}

:root {
  /* surfaces: mist */
  --bg: #f6faff;
  --surface: #ffffff;
  --surface-2: #eaf4ff;
  --line: #dbe6ef;
  --line-strong: #b4c7d6;
  --text: #0f2333;
  --text-dim: #44586a;

  /* accent: brand teal, darkened so it is safe for text */
  --accent: #00756b;
  --accent-display: #028378;
  --accent-ink: #ffffff;
  --accent-soft: #ddf2ec;

  /* call to action: a teal to pink gradient pill with dark ink */
  --g-teal: #2fbfae;
  --g-pink: #f28fa0;
  --g-deep: #029386; --g-rose: #f28fa0;   /* the pill: the brand teal, the palette's aqua, the palette's pink; white text at Nabira's call (3.8:1 at the teal end, 2.3:1 at the pink end, under the 4.5:1 line; a deeper pair read as dull and a hue-circle blend as violet, 22 Oct 2026) */
  --g-mid: #c99aae;   /* a dusty rose stop, so the blend stays warm through the middle instead of going grey */
  --grad: linear-gradient(105deg, var(--g-deep) 0%, #17a399 24%, #6fb0a8 44%, #b59bab 60%, #e08aa0 80%, var(--g-rose) 100%); /* taste-skill-ignore: Nabira's pinned teal to pink pill buttons (21 Oct 2026), one even blend */
  --grad-loop: linear-gradient(105deg, var(--g-deep) 0%, #17a399 12%, #6fb0a8 22%, #b59bab 30%, #e08aa0 40%, var(--g-rose) 50%, #e08aa0 60%, #b59bab 70%, #6fb0a8 78%, #17a399 88%, var(--g-deep) 100%); /* taste-skill-ignore: the same pill, looped for the hover slide */
  --grad-soft: linear-gradient(105deg, color-mix(in srgb, var(--g-teal) 26%, #fff), color-mix(in srgb, var(--g-pink) 30%, #fff)); /* taste-skill-ignore: the pill's pale state */
  --cta: #027a70;
  --cta-hover: #01645c;
  --cta-ink: #ffffff;

  /* brand palette as given; decoration only, never text or status */
  --brand-teal: #029386;
  --deco-mint: #97d7c7;
  --deco-pink: #f8c2c5;
  --deco-coral: #ee918d;

  /* status colours (status only) */
  --st-ok: #0e7c4a;
  --st-warn: #8a5a00;
  --st-bad: #b3261e;
  --st-info: #1f5fae;
  --st-neutral: #5a6673;

  /* backgrounds of the landing sections (decoration only) */
  --sky: #eaf4ff;
  --dusk-top: #fdeced;
  --dusk-bottom: #dff2ed;
  --mtn-mid: #b3d6d1;
  --grid: rgba(0, 0, 0, .07);
  --header-bg: rgba(255, 255, 255, .95);
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 34px rgba(0, 0, 0, .08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-lift: 0 8px 22px rgba(0, 0, 0, .22);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Manrope", system-ui, sans-serif;
  --serif: var(--font);
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* taste-skill-ignore: code, ids and hashes only */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px; --s7: 64px; --s8: 112px;
  --radius: 18px;
  --radius-sm: 12px;
  --pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --motion: 600ms;
  --tabbar-h: 0px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
}