/* ---- THE LOOK OF THE SHOP: change colours, fonts and the hero photo here, nowhere else ----
   site.css only uses these tokens. The e-mails and PDF invoice take their accent colour from
   brand.go (a test checks that it equals --accent below). Fonts: put a .ttf in static/vendor,
   declare it with @font-face, and name it in --font-heading / --font-body. */

@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap; src: url(/static/vendor/oswald-500.ttf) format("truetype"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url(/static/vendor/oswald-700.ttf) format("truetype"); }

:root[data-skin="racing"] {
  /* typography */
  --font-heading: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-transform: uppercase;
  --heading-spacing: .03em;
  --font-scale: 1;
  --heading-scale: 1;
  --space: 1;

  /* colours */
  --accent: #e10600;
  /* --accent-ink is the accent for text and thin lines: /theme.css lightens the owner's accent until it
     reaches 4.5:1 against the page background (WCAG AA). This default already passes for the brand red. */
  --accent-ink: #e73733;
  /* --mask-ink is the opaque colour of the mask gradients that carve the card border; only its alpha counts. */
  --mask-ink: #000;
  --accent-hover: #ff2a1f;
  --on-accent: #fff;
  --success: #1f9d55;
  --on-success: #fff;
  --muted: #7b8495;
  --page-bg: #0b0b0d;
  --card-bg: #15151a;
  --card-bg-alt: #1b1b21;
  --border: #2a2a32;
  --text: #e8e8ea;
  --heading: #fff;

  /* hero banner on the home page */
  --hero-image: url("/static/img/corvette.jpg");
  --hero-text: #fff;
  --hero-text-soft: #ddd;
  --hero-shade-top: rgba(0, 0, 0, .15);
  --hero-shade-bottom: rgba(0, 0, 0, .85);

  /* shape and effects */
  --radius: .25rem;
  --glow: 0 10px 30px -10px rgba(225, 6, 0, .55);
  --finder-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);

  /* map our tokens onto Pico CSS */
  --pico-font-family: var(--font-body);
  --pico-primary: var(--accent);
  --pico-primary-hover: var(--accent-hover);
  --pico-primary-background: var(--accent);
  --pico-primary-hover-background: var(--accent-hover);
  --pico-primary-inverse: var(--on-accent);
  --pico-primary-underline: color-mix(in srgb, var(--accent) 40%, transparent);
  --pico-background-color: var(--page-bg);
  --pico-card-background-color: var(--card-bg);
  --pico-card-sectioning-background-color: var(--card-bg-alt);
  --pico-muted-border-color: var(--border);
  --pico-color: var(--text);
  --pico-muted-color: var(--muted);
  --pico-h1-color: var(--heading);
  --pico-h2-color: var(--heading);
  --pico-h3-color: var(--heading);
  --pico-border-radius: var(--radius);
}