/*
  Panenka design tokens.
  Concept: an English football club's matchday seen from the manager's office. The pitch from
  above for the live match and the formation, the floodlit scoreboard for anything live or final,
  programme stock for everything else, and the manager's whiteboard for the team. See docs/design.md.
  Load after the Google Fonts link and before panenka.css.
*/
:root {
  /* Programme stock */
  --pk-paper-0: #fffdf7;
  --pk-paper-1: #f5f0e1;
  --pk-paper-2: #e9e2cd;
  --pk-rule-1: #d9d0b6;
  --pk-rule-2: #a99e7f;

  /* Dark green ink */
  --pk-ink-1: #14261c;
  --pk-ink-2: #3c5245;
  --pk-ink-3: #66796d;

  /* The scoreboard */
  --pk-night-1: #10221a;
  --pk-night-2: #0a1711;
  --pk-night-3: #050d09;
  --pk-night-edge: rgba(234, 242, 236, 0.12);
  --pk-chalk-1: #eaf2ec;
  --pk-chalk-2: #9fb5a6;
  --pk-led: #ffb21e;
  --pk-led-deep: #b37a00;

  /* The pitch */
  --pk-grass-1: #2f7d3b;
  --pk-grass-2: #38904a;
  --pk-line: #f4f8f2;

  /* Results and cards */
  --pk-win: #1d6b47;
  --pk-draw: #8a7a3c;
  --pk-loss: #b0322a;
  --pk-yellow: #f4c20d;
  --pk-red: #d0261d;
  --pk-you: #fff1b8;

  /* The whiteboard */
  --pk-board: #f7f8f6;
  --pk-board-edge: #c9cdc8;
  --pk-marker: #1d3fa8;
  --pk-marker-2: #c02626;

  /* Type */
  --pk-font: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --pk-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --pk-font-marker: 'Kalam', 'Comic Sans MS', cursive;
  --pk-fs-hero: clamp(2.5rem, 6vw, 4rem);
  --pk-fs-h1: clamp(2rem, 4.5vw, 3rem);
  --pk-fs-h2: 1.55rem;
  --pk-fs-h3: 1.15rem;
  --pk-fs-body: 1rem;
  --pk-fs-data: 0.94rem;
  --pk-fs-small: 0.84rem;
  --pk-fs-label: 0.75rem;
  --pk-lh-body: 1.5;

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

  /* Shape and depth */
  --pk-r-1: 2px;
  --pk-shadow-paper: 0 1px 0 rgba(20, 38, 28, 0.05), 0 2px 8px rgba(20, 38, 28, 0.08);
  --pk-shadow-raised: 0 1px 1px rgba(20, 38, 28, 0.12), 0 8px 18px rgba(20, 38, 28, 0.14);

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

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

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

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