/* D-tree brand tokens — copied from brand/brand-kit/README.md (D-tree Design System).
   The system does not define correct/wrong states; those two are marked below. */
@font-face { font-family: "Avenir Next LT Pro"; src: url("fonts/AvenirNextLTPro-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir Next LT Pro"; src: url("fonts/AvenirNextLTPro-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir Next LT Pro"; src: url("fonts/AvenirNextLTPro-It.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --sea-blue: #076771;
  --sea-blue-90: #3a838b;
  --sea-blue-110: #065a63;
  --sea-blue-tint: #e7f0f1;
  --light-blue: #5db0be;
  --light-blue-110: #549eab;
  --green: #abd548;
  --orange: #d9712b;
  --orange-110: #c36627;
  --white: #ffffff;
  --grey-900: #1c1c1c;
  --grey-700: #4a4a4a;
  --grey-100: #ececec;

  --text-heading: var(--sea-blue);
  --text-body: var(--grey-900);
  --text-muted: var(--grey-700);
  --border-subtle: var(--grey-100);
  --focus: var(--light-blue);

  /* Not defined by the brand — chosen here. Fills differ in lightness and
     always carry an icon, so meaning never rests on colour alone. */
  --correct: var(--green);   /* grey-900 text on it: 10.02:1 */
  --wrong: var(--orange);    /* grey-900 text on it: 5.15:1 */

  --font: "Avenir Next LT Pro", "Avenir Next", -apple-system, "Segoe UI", sans-serif;
  --radius-pill: 999px;
  --shape-diag: 16px 0 16px 0;
  --ease: cubic-bezier(.4, 0, .2, 1);
}