/* Cupertino — color tokens */
:root {
  /* Base */
  --black: #000000;
  --white: #ffffff;
  --gray-light: #f5f5f7;
  --near-black: #1d1d1f;

  /* Interactive (the only chromatic colors) */
  --blue: #0071e3;
  --blue-link: #0066cc;
  --blue-link-dark-bg: #2997ff;

  /* Text alphas (light backgrounds) */
  --black-80: rgba(0, 0, 0, 0.8);
  --black-48: rgba(0, 0, 0, 0.48);

  /* Dark surfaces */
  --surface-dark-1: #272729;
  --surface-dark-2: #262628;
  --surface-dark-3: #28282a;
  --surface-dark-4: #2a2a2d;
  --surface-dark-5: #242426;

  /* Button states */
  --button-active: #ededf2;
  --button-light: #fafafc;
  --overlay-media: rgba(210, 210, 215, 0.64);
  --white-32: rgba(255, 255, 255, 0.32);

  /* Semantic aliases */
  --bg-page-light: var(--gray-light);
  --bg-page-dark: var(--black);
  --text-heading: var(--near-black);
  --text-body: var(--black-80);
  --text-tertiary: var(--black-48);
  --text-on-dark: var(--white);
  --link-color: var(--blue-link);
  --link-color-on-dark: var(--blue-link-dark-bg);
  --cta-bg: var(--blue);
  --cta-text: var(--white);
  --surface-card-light: var(--gray-light);
  --surface-card-dark: var(--surface-dark-1);
  --nav-glass-bg: rgba(0, 0, 0, 0.8);
  --sk-focus-color: var(--blue);
  --sk-body-link-color: var(--blue-link);
}