:root {
  color-scheme: light;

  --td-color-action: #0a63ff;
  --td-color-action-hover: #004ed6;
  --td-color-action-soft: #dbe7ff;
  --td-color-canvas: #f2f4f3;
  --td-color-surface: #fbfcfa;
  --td-color-surface-quiet: #e5e9e7;
  --td-color-text: #202826;
  --td-color-text-muted: #52605b;
  --td-color-border: #ced5d1;
  --td-color-data-canvas: #091322;
  --td-color-data-text: #f4f7ff;
  --td-color-athlete-cyan: #28bff7;
  --td-color-athlete-mint: #32d98b;
  --td-color-athlete-amber: #f8b737;
  --td-color-athlete-coral: #ff5a6f;
  --td-color-success: #167a4b;
  --td-color-warning: #9a5a00;
  --td-color-danger: #b43746;

  --td-font-display: Manrope, "Noto Sans SC", "Noto Sans", system-ui, sans-serif;
  --td-font-body: Manrope, "Noto Sans SC", "Noto Sans", system-ui, sans-serif;

  --td-text-display: clamp(2.75rem, 6vw, 5.75rem);
  --td-text-headline: clamp(2rem, 4vw, 3.75rem);
  --td-text-title: clamp(1.35rem, 2vw, 1.75rem);
  --td-text-body: 1rem;
  --td-text-label: 0.8125rem;

  --td-leading-display: 0.98;
  --td-leading-headline: 1.05;
  --td-leading-body: 1.65;

  --td-space-1: 0.25rem;
  --td-space-2: 0.5rem;
  --td-space-3: 0.75rem;
  --td-space-4: 1rem;
  --td-space-6: 1.5rem;
  --td-space-8: 2rem;
  --td-space-12: 3rem;
  --td-space-18: 4.5rem;
  --td-space-24: 6rem;
  --td-space-section: clamp(4.5rem, 9vw, 8rem);

  --td-radius-control: 0.625rem;
  --td-radius-surface: 1.125rem;
  --td-radius-feature: 1.75rem;

  --td-shadow-menu: 0 16px 40px rgb(32 40 38 / 14%);
  --td-shadow-dialog: 0 24px 64px rgb(32 40 38 / 18%);
  --td-focus-ring: 0 0 0 3px rgb(10 99 255 / 28%);

  --td-container: 90rem;
  --td-reading-measure: 72ch;
  --td-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --td-duration-fast: 160ms;
  --td-duration-standard: 260ms;
  --td-z-header: 20;
  --td-z-dialog: 60;
}

html {
  font-family: var(--td-font-body);
  color: var(--td-color-text);
  background: var(--td-color-canvas);
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: inherit;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--td-color-action);
  outline-offset: 3px;
}

.brand-logo {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --td-duration-fast: 0ms;
    --td-duration-standard: 0ms;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}