/* TOKENS */
:root {
  /* Colors — light */
  --color-bg:            #F5F5F5;
  --color-base:          #FFFFFF;
  --color-text-primary:  #0A0A0A;
  --color-text-secondary: rgba(10, 10, 10, 0.64);
  --color-text-muted:    rgba(10, 10, 10, 0.48);
  --color-border:        rgba(10, 10, 10, 0.12);
  --color-btn:           #262626;
  --color-btn-text:      #FFFFFF;
  --color-placeholder:   #D9D9D9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #18181B;
    --color-base:          #27272A;
    --color-text-primary:  #FFFFFF;
    --color-text-secondary: rgba(255, 255, 255, 0.64);
    --color-text-muted:    rgba(255, 255, 255, 0.48);
    --color-border:        rgba(255, 255, 255, 0.12);
    --color-btn:           #F4F4F5;
    --color-btn-text:      #18181B;
    --color-placeholder:   #3F3F46;
  }
}

:root {

  /* Typography */
  --font-primary:   'Google Sans', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* Type scale */
  --text-h1:    48px;
  --text-h2:    36px;
  --text-h3:    28px;
  --text-h4:    20px;
  --text-p:     18px;
  --text-small: 14px;
  --text-label: 14px;

  /* Radius */
  --radius-card: 32px;
  --radius-tile: 16px;
  --radius-pill: 9999px;
  --radius-logo: 50%;

  /* Layout */
  --container-max: 1140px;
  --container-pad: 32px;

  /* Spacing */
  --gap-section: 80px;
  --gap-card:    16px;
}