/* Cat Ears English Lab design system — Phase 1 foundation. */
:root {
  --ce-color-canvas: #f5f3ef;
  --ce-color-surface: #ffffff;
  --ce-color-ink: #1f2937;
  --ce-color-muted: #6b7280;
  --ce-color-border: #d0ccc7;
  --ce-color-accent: #c9a56b;
  --ce-color-success: #0f7a5f;
  --ce-color-danger: #b42318;
  --ce-color-focus: #1d4ed8;
  --ce-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  --ce-font-display: Georgia, "Noto Serif SC", "Songti SC", serif;
  --ce-space-1: 0.25rem;
  --ce-space-2: 0.5rem;
  --ce-space-3: 0.75rem;
  --ce-space-4: 1rem;
  --ce-space-6: 1.5rem;
  --ce-space-8: 2rem;
  --ce-radius-sm: 0.375rem;
  --ce-radius-md: 0.5rem;
  --ce-radius-pill: 999px;
  --ce-shadow-card: 10px 12px 0 rgb(31 41 55 / 0.05);
  --ce-content-max: 90rem;
  --ce-touch-target: 2.75rem;
}

html { color-scheme: light; }

body[data-ce-design-system="v1"] {
  background: var(--ce-color-canvas);
  color: var(--ce-color-ink);
  font-family: var(--ce-font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[data-ce-design-system="v1"] :where(button, input, select, textarea) {
  font: inherit;
}

body[data-ce-design-system="v1"] :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ce-color-focus);
  outline-offset: 3px;
}

body[data-ce-design-system="v1"] :where(button, [role="button"], input, select) {
  min-height: var(--ce-touch-target);
}

body[data-ce-design-system="v1"] ::selection {
  background: #f2dfb9;
  color: var(--ce-color-ink);
}

.ce-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ce-skip-link {
  position: fixed;
  top: var(--ce-space-3);
  left: var(--ce-space-3);
  z-index: 100000;
  padding: var(--ce-space-3) var(--ce-space-4);
  border: 2px solid var(--ce-color-ink);
  border-radius: var(--ce-radius-sm);
  background: var(--ce-color-surface);
  color: var(--ce-color-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px rgb(31 41 55 / 0.18);
  transform: translateY(calc(-100% - 2rem));
  transition: transform 120ms ease-out;
}

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

@media (prefers-reduced-motion: reduce) {
  body[data-ce-design-system="v1"] *,
  body[data-ce-design-system="v1"] *::before,
  body[data-ce-design-system="v1"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  body[data-ce-design-system="v1"] :where(a, button, input, select, textarea):focus-visible {
    outline-color: Highlight;
  }
}