/* ---------------------------------------------------------------------------
   Askivia - brand tokens.

   Midnight Navy carries the type and the dark bands; Cloud White is the page's
   second surface; Emerald Teal is the one bright thing, and marks what matters:
   the button, the tick, your name in the answer.

   Teal is too light to read as text on white (2.1:1), so on light surfaces teal
   is a fill with navy on it (8.2:1), and anything that must be read in teal uses
   --teal-ink (5.6:1). On navy, plain teal reads well (8.2:1).
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-latin.52d04440a9fa.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-latin-italic.7e597b38903d.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand */
  --navy: #111b30;        /* Midnight Navy: type, dark bands */
  --teal: #22c9a8;        /* Emerald Teal: fills, ticks, highlights */
  --cloud: #eaf1f5;       /* Cloud White: the second surface */

  /* Derived */
  --navy-2: #1a2640;      /* a panel raised off navy */
  --navy-3: #2a3754;      /* hairlines on navy */
  --teal-ink: #0a7562;    /* teal that can be read on white */
  --teal-deep: #17a98c;   /* teal button, hovered */
  --teal-wash: #e1f6f1;   /* a teal tint for highlights */
  --white: #ffffff;
  --page: #ffffff;
  --body: #3a475e;        /* body copy: 9.4:1 on white */
  --muted: #55627a;       /* captions: 6.2:1 on white */
  --on-navy: #c9d2df;     /* body copy on navy */
  --on-navy-muted: #a9b5c8;
  --line: #d9e3ea;
  --line-soft: #e6edf2;

  /* Type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.1rem + 0.25vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.25rem + 0.5vw, 1.65rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.4rem);
  --step-4: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --step-5: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);

  /* Space and shape */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 8vw, 6.5rem);
  --measure: 62ch;
  --container: 1180px;
  --container-narrow: 820px;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(17 27 48 / 0.06);
  --shadow: 0 2px 4px rgb(17 27 48 / 0.04), 0 10px 24px rgb(17 27 48 / 0.07);
  --shadow-lg: 0 4px 10px rgb(17 27 48 / 0.05), 0 24px 60px rgb(17 27 48 / 0.14);
}