@import "tailwindcss";

/* 自定义主题色 — MediaLingo 品牌色 */
@theme {
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-accent: #f59e0b;
  --color-surface: #0f172a;
  --color-surface-light: #1e293b;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
}

/* 基础样式 */
body {
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "Noto Sans JP", sans-serif;
}

/* 键盘焦点指示器 — WCAG 2.1 AA 2.4.7 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 页面渐入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* 代码块 */
pre {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}
code {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
  font-size: 0.9em;
}

/* 列表 */
ul, ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}
li {
  margin: 0.5rem 0;
}

/* ruby 注音 */
rt {
  font-size: 0.6em;
  color: #94a3b8;
}