/* Picklepark design tokens · direction B "Parks Department" · v0.1, Oct 2026
   Contrast ratios are WCAG 2.x, measured against the surface noted.
   Light is the default theme. Dark applies with the OS setting or [data-theme="dark"]. */

:root {
  /* ---------- Color: brand ---------- */
  --pp-green:        #1F5A3D; /* sign panels, primary buttons, links. White on it 8.1 · on paper 7.4 · on white 8.1 */
  --pp-on-green:     #FFFFFF;
  --pp-marigold:     #F2B33D; /* accent: winner ribbon, highlights. Never text. Ink on it 8.6 */
  --pp-on-marigold:  #17251D;

  /* ---------- Color: neutrals ---------- */
  --pp-paper:        #F7F5EE; /* page background */
  --pp-surface:      #FFFFFF; /* cards, sheets */
  --pp-sunken:       #E3E0D5; /* chips, placeholders, dividers. Ink on it 12.1 */
  --pp-ink:          #17251D; /* body text. 15.9 on white · 14.6 on paper */
  --pp-ink-muted:    #5C6660; /* secondary text. 6.0 on white · 5.5 on paper */
  --pp-control-edge: #8A928C; /* input and checkbox borders. 3.2 on white (UI minimum 3.0) */

  /* ---------- Color: status (always paired with a shape or word) ---------- */
  --pp-live:         #B5420F; /* "Playing now" chip bg + white dot. White on it 5.6 */
  --pp-on-live:      #FFFFFF;
  --pp-win-bg:       var(--pp-marigold); /* "★ Won" ribbon */
  --pp-on-win:       var(--pp-on-marigold);
  --pp-final-bg:     var(--pp-sunken); /* "✓ Final" chip */
  --pp-on-final:     var(--pp-ink);
  --pp-loss:         var(--pp-ink-muted); /* losing team row text, with an "L" */
  --pp-warning-bg:   #FFF1CC; /* "▲ Waiting on score" */
  --pp-warning:      #7A4F00; /* 6.4 on warning bg · 7.1 on white */
  --pp-error:        #B42318; /* "! Check score". 6.6 on white · 6.0 on paper · white on it 6.6 */
  --pp-on-error:     #FFFFFF;

  /* ---------- Type: system fonts only in the app ---------- */
  --pp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pp-text-score-xl: 900 3.5rem/1 var(--pp-font);   /* score entry screen */
  --pp-text-score:    800 2rem/1 var(--pp-font);   /* scores in lists and cards */
  --pp-text-h1:       800 1.625rem/1.2 var(--pp-font); /* tournament name */
  --pp-text-h2:       800 1.3125rem/1.25 var(--pp-font);/* section headings */
  --pp-text-body:     400 1.0625rem/1.45 var(--pp-font);/* running text: 17, not 16, for sun and older eyes */
  --pp-text-strong:   700 1.0625rem/1.45 var(--pp-font);/* team names */
  --pp-text-small:    500 0.9375rem/1.4 var(--pp-font); /* dates, court numbers, help text */
  --pp-text-label:    700 0.8125rem/1 var(--pp-font);   /* chips and eyebrow labels; smallest size anywhere */
  --pp-label-tracking: 0.06em;
  --pp-numerals: tabular-nums;                    /* font-variant-numeric on every score and record */

  /* ---------- Space (4 px base) ---------- */
  --pp-space-1: 4px;
  --pp-space-2: 8px;
  --pp-space-3: 12px;
  --pp-space-4: 16px;
  --pp-space-5: 24px;
  --pp-space-6: 32px;
  --pp-space-7: 48px;

  /* ---------- Shape ---------- */
  --pp-radius-sm:   8px;   /* inputs, sponsor slot */
  --pp-radius-md:   14px;  /* cards, panels, the sign */
  --pp-radius-pill: 999px; /* status chips */
  --pp-sign-ring:   2px;   /* inset white rule on sign-style headers */
  --pp-tap-min:     48px;  /* minimum height of anything tappable */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pp-green:        #7FD6A2; /* becomes mint: dark ink on it 10.2 · as text on bg 10.2 */
    --pp-on-green:     #0F1A14;
    --pp-marigold:     #F2B33D;
    --pp-on-marigold:  #0F1A14; /* 9.6 */
    --pp-paper:        #0F1A14;
    --pp-surface:      #17251D;
    --pp-sunken:       #2A3A31; /* ink on it 9.8 */
    --pp-ink:          #ECE8DA; /* 14.5 on bg · 13.0 on surface */
    --pp-ink-muted:    #A3ADA6; /* 7.7 on bg · 6.9 on surface */
    --pp-control-edge: #6B776F; /* 3.4 on surface */
    --pp-live:         #FF9A6B;
    --pp-on-live:      #0F1A14; /* 8.6 */
    --pp-warning-bg:   #2A3A31;
    --pp-warning:      #F2C46D; /* 9.8 on surface */
    --pp-error:        #FF8A80; /* 7.0 on surface */
    --pp-on-error:     #0F1A14;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pp-green: #7FD6A2; --pp-on-green: #0F1A14; --pp-marigold: #F2B33D; --pp-on-marigold: #0F1A14;
  --pp-paper: #0F1A14; --pp-surface: #17251D; --pp-sunken: #2A3A31; --pp-ink: #ECE8DA; --pp-ink-muted: #A3ADA6;
  --pp-control-edge: #6B776F; --pp-live: #FF9A6B; --pp-on-live: #0F1A14; --pp-warning-bg: #2A3A31;
  --pp-warning: #F2C46D; --pp-error: #FF8A80; --pp-on-error: #0F1A14;
  color-scheme: dark;
}