:root {
  --color-primary: var(--primary-color, #72c393);
  --color-secondary: var(--dark-accent-color, #2e7d62);
  --color-success: var(--ok, #3ddc97);
  --color-warning: var(--warn, #ffcc66);
  --color-error: var(--danger, #e55353);
  --color-neutral: var(--neutral-text-color, #333);
  --color-neutral-50: #f8faf9;
  --color-neutral-100: #eef4f1;
  --color-neutral-200: #d8e2dd;
  --color-neutral-700: #344054;
  --color-neutral-900: #101828;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
  --shadow-lg: 0 18px 42px rgba(16, 24, 40, 0.12);
  --motion-fast: 120ms ease;
}

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d2d8df);
  border-radius: var(--radius-sm);
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  position: absolute;
  top: var(--space-md);
  transform: translateY(-200%);
  z-index: 1000;
}

.skip-link:focus-visible {
  transform: translateY(0);
}