/* Brand source of truth: Manual aulasneo, pp. 5–6 and 12–13.
   Use the printed HEX values where the manual's RGB values differ. */
@font-face {
  font-family: Quicksand;
  src: url("quicksand-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --brand-blue: #062b60;
  --brand-blue-medium: #133979;
  --brand-blue-light: #24497f;
  --brand-blue-soft: #3f6b9e;
  --brand-violet: #4e359e;
  --brand-violet-medium: #6f51b5;
  --brand-violet-light: #806ac6;
  --brand-violet-soft: #a395db;
  --brand-orange: #ef9245;
  --brand-orange-medium: #faa95b;
  --brand-orange-light: #ffbb83;
  --brand-orange-soft: #ffd3b3;
  --brand-white: #ffffff;
  --brand-gray-light: #f2f2f2;
  --brand-gray: #cdcdcd;
  --brand-black: #1d1d1b;
  --font-content: Quicksand, "Segoe UI", sans-serif;
  --font-code: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --color-text: var(--brand-black);
  --color-heading: var(--brand-blue);
  --color-muted: var(--brand-blue-light);
  --color-link: var(--brand-violet);
  --color-link-hover: var(--brand-blue);
  --color-surface: var(--brand-white);
  --color-background: var(--brand-gray-light);
  --color-border: var(--brand-gray);
  --color-action: var(--brand-blue);
  --color-action-hover: var(--brand-violet);
  --color-focus: var(--brand-violet);
  --radius: 0.75rem;
  --shadow: 0 6px 24px rgb(6 43 96 / 8%);
}
body { font-family: var(--font-content); color: var(--color-text); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-content); color: var(--color-heading); font-weight: 700; }
a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}
code, pre, kbd, samp { font-family: var(--font-code); }
::selection { background: var(--brand-orange-soft); color: var(--brand-blue); }