/* section: tokens | purpose: global design variables */
:root{
  /* section: theme | purpose: core colors */
  --page-background-color: #ebebeb;
  --page-header-color: #234c31;
  --icons-color: #234c31;
  --table-header-column-color: rgba(232, 221, 198, 0.85);
  --table-field-column-color: #e2e4e4;
  --table-text-line-1-color: #111111;
  --table-text-line-2-color: rgba(0,0,0,0.55);

  /* section: theme aliases | purpose: preserve existing internal token names */
  --bg: var(--page-background-color);
  --green: var(--page-header-color);
  --icon: var(--icons-color);
  --row: var(--table-field-column-color);
  --beige: var(--table-header-column-color);
  --shadow: rgba(0,0,0,0.18);

  /* section: text | purpose: base + muted text */
  --text: var(--table-text-line-1-color);
  --muted: var(--table-text-line-2-color);

  /* 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;
}

:root[data-theme="dark"]{
  --page-background-color: #151716 !important;
  --page-header-color: #d4af37 !important;
  --icons-color: #f4f5f2 !important;
  --table-header-column-color: #394039 !important;
  --table-field-column-color: #242826 !important;
  --table-text-line-1-color: #f4f5f2 !important;
  --table-text-line-2-color: rgba(244,245,242,0.62) !important;
  --shadow: rgba(0,0,0,0.46) !important;
}

/* 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;
  }
}