/* Design tokens.
   Swap values here when the design system changes; components use only these variables. */
:root {
  /* brand / semantic */
  --c-primary: #008CFF;
  --c-primary-pressed: #0068FF;
  --c-primary-tint: rgba(0, 140, 255, 0.10);
  --c-danger: #EF3A3A;
  --c-danger-system: #FF3B30;
  --c-danger-tint: rgba(235, 88, 40, 0.10);
  --c-warning: #F6C446;
  --c-success: #56C865;

  /* surfaces & text (light) */
  --c-bg: #F7F7F7;
  --c-bg-alt: #F1F1F1;
  --c-surface: #FFFFFF;
  --c-fill-secondary: #EAEAEB;
  --c-fill-segment: rgba(118, 118, 128, 0.12);
  --c-separator: rgba(171, 171, 176, 0.30);
  --c-text: #343137;
  --c-text-secondary: #747481;
  --c-text-on-accent: #FFFFFF;
  --c-overlay: rgba(0, 0, 0, 0.50);
  --c-handle: #DADADA;

  /* typography */
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --fw-semibold: 590;
  --ls-tight: -0.4px;
  --ls-normal: -0.2px;

  --t-title2: 590 19px/23px var(--font);
  --t-headline: 590 17px/22px var(--font);
  --t-body: 400 15px/20px var(--font);
  --t-body-strong: 590 15px/20px var(--font);
  --t-footnote: 400 13px/18px var(--font);
  --t-footnote-strong: 590 13px/18px var(--font);

  /* radii, spacing, elevation */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 16px;
  --r-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --h-button: 48px;
  --h-nav: 44px;
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 4px 18px rgba(0, 0, 0, 0.24);
  --shadow-toast: 0 8px 16px rgba(0, 0, 0, 0.25);
  /* bottom safe area */
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom-min, 0px));
}