/* ==========================================================================
   Design tokens — extracted from the Penpot file "Garmin Padel Score"
   Boards: "Padel Score - Mobile" (440×6569) and "Padel Score - Desktop" (1440×6569)
   Values were measured from the Penpot export; see web/README.md for provenance.
   This file is the single source of truth: dot-grid.js reads the --dot-* tokens.
   ========================================================================== */

:root {
  /* Colour ---------------------------------------------------------------- */
  --bg: #f6f6f6;           /* page background                              */
  --surface: #ffffff;      /* brand plate                                  */
  --ink: #23262f;          /* headings, borders, body copy                 */
  --brand: #ed71a6;        /* header hatch stripes                         */
  --dot: #c9cdd4;          /* background dot grid                          */

  /* Typography ------------------------------------------------------------ */
  --font-display: "Jersey 10", "Trebuchet MS", sans-serif;
  --font-sub: "Jersey 15", "Trebuchet MS", sans-serif;
  --fs-wordmark: 48px;
  --fs-subtitle: 30px;
  --fs-label: 30px;
  --fs-body: 24px;
  --lh-body: 1.2083;       /* design line box: 29px at 24px                */

  /* Layout ---------------------------------------------------------------- */
  --page-width: 440px;     /* mobile board width                           */
  --gutter: 16px;
  --content-width: 408px;  /* page width − 2 gutters                       */
  --header-height: 208px;
  /* Header art, measured from the Penpot "Header" board (identical on both
     the mobile and the desktop board): hatch band 384 × 208 anchored to the
     page's left edge; plate 389 × 104 at x = 25, y = 52, so the plate
     overhangs the hatch by 30px. */
  --hatch-width: 384px;
  --hatch-height: 208px;
  --stripe-width: 3.5px;   /* 5px measured horizontally on a −45° diagonal */
  --stripe-period: 14.14px;/* 20px horizontal pitch                         */
  --plate-width: 389px;
  --plate-height: 104px;
  --plate-offset-x: 9px;   /* on top of the 16px gutter → x = 25            */
  --plate-inset-x: 20px;   /* logo starts at x = 49                         */
  --plate-gap: 24px;       /* text starts at x = 137                        */
  --plate-offset-y: 52px;
  --label-height: 52px;
  --step-gap: 100px;       /* vertical gap between step sections           */
  --intro-gap: 42px;       /* gap under the "How to Use" bar               */

  /* Border / shadow of the hand-drawn boxes, measured from the Penpot shapes
     (strokes are "inner", shadows are drop-shadows with blur 0). */
  --line: #000000;
  --label-border: 2px;
  --label-inset: 22px;     /* + 2px border = the design's 24px text inset   */
  --label-shadow: 4px 4px 0 var(--line);
  --label-shadow-wide: 8px 8px 0 var(--line);   /* "How to Use" bar        */
  --label-rotation: 0deg;
  --plate-border: 4px;
  --plate-shadow: 16px 16px 0 var(--line);

  /* Dot grid -------------------------------------------------------------- */
  --dot-pitch: 52px;       /* measured on the desktop board                */
  --dot-size: 3px;
  --dot-color: rgba(201, 205, 212, 0.9);
  --dot-influence: 160px;  /* pointer radius (canvas only)                 */
  --dot-push: 10px;         /* max displacement (canvas only)               */
}