/* section: tokens | purpose: global design variables */
:root{
  /* section: theme | purpose: core colors */
  --bg: #ebebeb;
  --green: #234c31;
  --row: #e2e4e4;
  --beige: #ebdeca;
  --shadow: rgba(0,0,0,0.18);

  /* section: text | purpose: base + muted text */
  --text: #111;
  --muted: rgba(0,0,0,0.55);

  /* section: layout | purpose: radius + spacing */
  --radius: 14px;
  --radiusPill: 999px;
  --pagePad: 14px;
  --maxW: 900px;

  /* section: header | purpose: title sizing */
  --titleSize: 58px;

  /* section: logo | purpose: ANY logo sizing */
  --anyLogoH: 22px;
  --anyLogoMB: 4px;
  --titleTracking: -0.04em;

  /* section: pills | purpose: pill sizing */
  --pillH: 36px;
  --pillFont: 14px;
  --pillPadX: 12px;

  /* section: rows | purpose: group + row typography */
  --groupLabelFont: 12px;
  --rowFont: 14px;

  /* section: indicator | purpose: selection dot */
  --dotSize: 10px;
}

/* section: responsive tokens | purpose: compact mobile density */
@media (max-width: 430px){
  :root{
    --pagePad: 3px;

    /* section: header | purpose: mobile title sizing */
    --titleSize: 30px;

    /* section: logo | purpose: mobile ANY logo */
    --anyLogoH: 12px;
    --anyLogoMB: 1px;

    /* section: pills | purpose: compact pills */
    --pillH: 20px;
    --pillFont: 9.5px;
    --pillPadX: 5px;

    /* section: rows | purpose: compact typography */
    --groupLabelFont: 7.5px;
    --rowFont: 10px;

    /* section: layout | purpose: compact radius + shadow */
    --radius: 7px;
    --shadow: rgba(0,0,0,0.10);

    /* section: indicator | purpose: compact dot */
    --dotSize: 6px;
  }
}

/* section: responsive tokens | purpose: wide layout */
@media (min-width: 900px){
  :root{
    --pagePad: 24px;
    --titleSize: 72px;

    --pillH: 40px;
    --pillFont: 14px;
    --rowFont: 14px;
  }
}