/*
  Design tokens: the colours, fonts and sizes everything else uses.
  These match the Figma file's variables and text styles. Change a value here
  and it changes everywhere on the site.
*/

:root {
  /* Palette */
  --night: #1c1e4a;
  --night-deep: #0b0c22;
  --paper: #fbf3e4;
  --ink: #262338;
  --marigold: #f4b63f;
  --magenta: #d23c78;
  --magenta-deep: #b42d62;
  --teal-deep: #0e7570;
  --white: #ffffff;

  /* Roles on a paper ground (the default) */
  --text: var(--ink);
  --line: var(--ink); /* button outlines and hard shadows */
  --link: var(--teal-deep);
  --button-secondary-fill: var(--paper);
  --button-secondary-label: var(--magenta-deep);

  /* Fonts */
  --font-wordmark: "Besley", Georgia, serif;
  --font-hand: "Patrick Hand SC", "Comic Sans MS", cursive;
  --font-body: "Fraunces", Georgia, serif;

  /* Type sizes */
  --size-display: clamp(3.5rem, 6.7vw, 6rem);
  --size-krewe: clamp(1.25rem, 2vw, 1.75rem);
  --size-heading: clamp(2.25rem, 5vw, 2.5rem);
  --size-subheading: 1.625rem;
  --size-button: 1.25rem;
  --size-body: 1.125rem;
  --size-small: 0.875rem;

  /* Layout */
  --gutter: clamp(1.5rem, 6.7vw, 6rem);
  --radius: 10px;
  --shadow: 4px 4px 0 var(--line);
}

/* Anything inside a night section flips its roles, like Figma's "On night" mode. */
.theme-night {
  --text: var(--paper);
  --line: var(--night-deep);
  --link: var(--paper);
  --button-secondary-fill: var(--night);
  --button-secondary-label: var(--paper);
  background-color: var(--night);
  color: var(--text);
}