/*
  Drop Shot design tokens.
  Concept: a US hard-court tournament seen from the academy's office. The court
  from above for the match view, the night panel for anything live or final,
  program stock for everything else, and the coach's legal pad for messages.
  See docs/design.md. Load after the Google Fonts link and before dropshot.css.
*/
:root {
  /* Program stock */
  --ds-paper-0: #ffffff;
  --ds-paper-1: #f3f4f0;
  --ds-paper-2: #e7e9e3;
  --ds-rule-1: #d6dad3;
  --ds-rule-2: #a6aea9;

  /* Navy ink */
  --ds-ink-1: #13213a;
  --ds-ink-2: #3a4760;
  --ds-ink-3: #5b6680;

  /* Night panel */
  --ds-night-1: #12203a;
  --ds-night-2: #0c172c;
  --ds-night-3: #070f1e;
  --ds-night-edge: rgba(238, 241, 246, 0.12);
  --ds-chalk-1: #eef1f6;
  --ds-chalk-2: #a9b5c9;
  --ds-ball: #d8f03c;
  --ds-ball-deep: #9fb320;

  /* Courts */
  --ds-court: #2f5f9e;
  --ds-surround: #3b7656;
  --ds-line: #f4f6f2;
  --ds-net: #10192b;
  --ds-clay: #b9582a;
  --ds-grass: #4c8636;
  --ds-indoor: #5a4d8a;

  /* Results */
  --ds-win: #1d6b47;
  --ds-loss: #b0322a;
  --ds-you: #eef8c4;

  /* The legal pad */
  --ds-pad: #fbf3c2;
  --ds-pad-rule: #9fb7d9;
  --ds-pad-margin: #d6655b;
  --ds-pad-ink: #22408c;

  /* Type */
  --ds-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ds-font-hand: 'Caveat', 'Bradley Hand', cursive;
  --ds-fs-hero: clamp(2.5rem, 6vw, 4rem);
  --ds-fs-h1: clamp(2rem, 4.5vw, 3rem);
  --ds-fs-h2: 1.5rem;
  --ds-fs-h3: 1.1rem;
  --ds-fs-body: 1rem;
  --ds-fs-data: 0.94rem;
  --ds-fs-small: 0.82rem;
  --ds-fs-label: 0.75rem;
  --ds-lh-body: 1.5;

  /* Space */
  --ds-s1: 4px;
  --ds-s2: 8px;
  --ds-s3: 12px;
  --ds-s4: 16px;
  --ds-s5: 24px;
  --ds-s6: 32px;
  --ds-s7: 48px;
  --ds-s8: 64px;

  /* Shape and depth */
  --ds-r-1: 2px;
  --ds-shadow-paper: 0 1px 0 rgba(19, 33, 58, 0.05), 0 2px 8px rgba(19, 33, 58, 0.08);
  --ds-shadow-pad: 0 1px 1px rgba(19, 33, 58, 0.12), 0 8px 18px rgba(19, 33, 58, 0.14);

  /* Layout */
  --ds-page-max: 1240px;
  --ds-gutter: 16px;

  --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 768px) {
  :root { --ds-gutter: 24px; }
}

@media (min-width: 1200px) {
  :root { --ds-gutter: 32px; }
}