/* Design tokens, v2. Blues dominant, white text, gold rationed as an
   accent. Same three brand hexes throughout, PROJECT.md and
   DESIGN-PLAN.md, just a different balance for a 16 to 24 audience. */

:root {
  /* Colour */
  --colour-navy: #1B264B;
  --colour-blue: #1551B3;
  --colour-blue-light: #4C9AFF;
  --colour-gold: #C5AD70;
  --colour-gold-light: #E8CE8F;
  --colour-white: #FFFFFF;

  --colour-bg: var(--colour-navy);
  --colour-bg-raised: #26335E;
  --colour-text: var(--colour-white);
  --colour-text-muted: #ADB7DA;
  --colour-line: rgba(255, 255, 255, 0.18);

  /* Kept for anything still reading the old names. */
  --colour-paper: var(--colour-bg);
  --colour-ink: var(--colour-text);

  /* Type */
  --font-body: "Poppins", sans-serif;

  --display-size: 2.5rem;
  --display-line: 2.6rem;
  --display-weight: 600;

  --heading-size: 1.875rem;
  --heading-line: 2.25rem;
  --heading-weight: 600;

  --body-size: 1.0625rem;
  --body-line: 1.65rem;
  --body-weight: 400;

  --button-size: 1.0625rem;
  --button-line: 1.5rem;
  --button-weight: 600;

  --meta-size: 0.8125rem;
  --meta-line: 1.125rem;
  --meta-weight: 500;

  /* Motion */
  --transition-duration: 340ms;
  --transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --display-size: 3.5rem;
    --display-line: 3.6rem;

    --heading-size: 2.375rem;
    --heading-line: 2.75rem;

    --body-size: 1.125rem;
    --body-line: 1.75rem;
  }
}