/* Avora Academy design tokens. Colours are the four values in the brand guide. */
:root {
  /* Brand colours */
  --navy: #142B4A;
  --white: #F7F8FA;
  --grey: #A0A7B0;
  --crimson: #D72643;

  /* Roles. Muted text and hairlines are tints of the same navy and grey, not new hues. */
  --text: var(--navy);
  --text-muted: rgba(20, 43, 74, 0.8);
  --text-on-navy: var(--white);
  --text-on-navy-muted: rgba(247, 248, 250, 0.82);
  --line: rgba(160, 167, 176, 0.55);
  --line-strong: var(--grey);
  --line-on-navy: rgba(160, 167, 176, 0.4);
  --tint: rgba(20, 43, 74, 0.04);

  /* Type */
  --font-display: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --h4: 1.25rem;
  --h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
  --h2: clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem);
  --h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: clamp(4rem, 3rem + 4vw, 7rem);

  /* Shape and layout */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --page: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --ease: 160ms ease;
}