/* Design tokens: the Speedway design system.
   ACOMM pages use it inverted (blush type on charcoal); Speedway pages use it straight (charcoal on blush).
   Breakpoints (mobile-first, min-width): sm 576px, md 768px, lg 992px, xl 1200px, xxl 1400px.
   Custom properties can't be used inside media queries, so the values are written out in each query. */
:root {
  /* Palette */
  --color-charcoal: #2a282a;
  --color-blush: #f2cfe8;
  --color-white: #ffffff;
  --color-paper: #e9e7e8;
  --color-muted-on-charcoal: #b5a4b0;
  --color-muted-on-blush: #4f4a4e;
  --color-line-on-charcoal: #575257;
  --color-line-on-charcoal-band: #3a373a;
  --color-line-on-blush: #b9a3b3;
  --color-backdrop: rgba(11, 11, 12, 0.72);

  /* Theme roles (default: ACOMM, inverted) */
  --ground: var(--color-charcoal);
  --ink: var(--color-blush);
  --white: var(--color-white);
  --muted: var(--color-muted-on-charcoal);
  --line: var(--color-line-on-charcoal);

  /* Type */
  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --container: 1440px;
  --gutter: 24px;
  --touch: 48px;

  color-scheme: dark;
}

/* Speedway pages: the design system used straight. */
.page-speedway {
  --ground: var(--color-blush);
  --ink: var(--color-charcoal);
  --white: var(--color-charcoal);
  --muted: var(--color-muted-on-blush);
  --line: var(--color-line-on-blush);

  color-scheme: light;
}

/* A blush band inside an ACOMM page. */
.theme-blush {
  --ground: var(--color-blush);
  --ink: var(--color-charcoal);

  background: var(--color-blush);
  color: var(--color-charcoal);
}

/* A charcoal band inside a Speedway page. White is replaced by the brand's light grey here. */
.theme-charcoal {
  --ground: var(--color-charcoal);
  --ink: var(--color-blush);
  --white: var(--color-paper);
  --muted: var(--color-muted-on-charcoal);
  --line: var(--color-line-on-charcoal-band);

  background: var(--color-charcoal);
  color: var(--color-blush);
}