@tailwind base;
@tailwind components;
@tailwind utilities;

/*
 * parent-portal 设计令牌三层模型
 * 依据：02-architecture-design.md §9 设计令牌三层（复用 packages/ui-tokens）
 *       project_rules §3.10 设计令牌规范
 *
 * Layer 1 Primitive：原始色板/字号/间距/阴影（业务代码不直接引用）
 * Layer 2 Semantic：语义令牌（light/dark），业务代码唯一引用入口
 * Layer 3 Tailwind Theme：@theme inline 暴露为 bg, text, font 等类
 */

:root {
  /* ===== Layer 1 Primitive ===== */
  /* 色板（HSL，避免 #hex 字面量，project_rules §3.10）*/
  --color-paper-50: 40 20% 98%;
  --color-paper-100: 40 18% 96%;
  --color-ink-900: 25 3% 15%;
  --color-ink-600: 30 5% 45%;
  --color-ink-300: 30 10% 75%;
  --color-accent-600: 220 60% 35%;
  --color-accent-100: 220 60% 95%;
  --color-success-600: 142 60% 35%;
  --color-warning-600: 38 80% 45%;
  --color-danger-600: 0 70% 45%;

  /* 字号（禁止 font-size: Npx，project_rules §3.10）*/
  --font-size-1: 0.75rem;
  --font-size-2: 0.875rem;
  --font-size-3: 1rem;
  --font-size-4: 1.125rem;
  --font-size-5: 1.25rem;
  --font-size-6: 1.5rem;
  --font-size-7: 1.875rem;
  --font-size-8: 2.25rem;
  --font-size-9: 3rem;

  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-loose: 1.75;

  /* 间距 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* 圆角 */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* 阴影（使用 rgba 旧语法，避免 cssnano-simple 无法解析 rgb(/ 语法）*/
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* ===== Layer 2 Semantic（light）===== */
  --paper: var(--color-paper-50);
  --paper-elevated: var(--color-paper-100);
  --ink: var(--color-ink-900);
  --ink-muted: var(--color-ink-600);
  --ink-subtle: var(--color-ink-300);
  --accent: var(--color-accent-600);
  --accent-soft: var(--color-accent-100);
  --success: var(--color-success-600);
  --warning: var(--color-warning-600);
  --danger: var(--color-danger-600);
  --rule: 30 10% 90%;

  /* 字体（禁止硬编码字体名，project_rules §3.10）*/
  --font-serif: var(--font-fraunces), Georgia, serif;
  --font-sans: var(--font-inter), system-ui, sans-serif;
  --font-mono: var(--font-jetbrains-mono), monospace;
}

[data-theme="dark"] {
  /* ===== Layer 2 Semantic（dark）===== */
  --paper: 220 15% 12%;
  --paper-elevated: 220 15% 16%;
  --ink: 40 20% 95%;
  --ink-muted: 40 10% 65%;
  --ink-subtle: 40 5% 45%;
  --accent: 220 70% 60%;
  --accent-soft: 220 70% 20%;
  --success: 142 60% 50%;
  --warning: 38 80% 55%;
  --danger: 0 70% 55%;
  --rule: 220 10% 25%;
}

/* ===== 全局基础样式 ===== */
html,
body {
  background: hsl(var(--paper));
  color: hsl(var(--ink));
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 纸感分隔线（复用 teacher-portal 风格）*/
.rule {
  border-top: 1px solid hsl(var(--rule));
}

.rule-thin {
  border-top: 2px solid hsl(var(--rule));
}

.mark-left {
  border-left: 2px solid hsl(var(--rule));
  padding-left: 12px;
}

/* 可访问性：聚焦轮廓（WCAG 2.2 AA）*/
:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}

/* 跳转到主内容链接（a11y）*/
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: hsl(var(--accent));
  color: hsl(var(--paper));
  padding: 8px 16px;
  z-index: 100;
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
  top: 0;
}

/* 屏幕阅读器专用文本（a11y，WCAG 2.2 AA）*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 安全的 col-span-2（替代 Tailwind col-span-2，避免 cssnano-simple 无法解析 grid-column: span 2 / span 2 语法）*/
.col-span-2-safe {
  grid-column: span 2;
}

/* 骨架屏动画 */
@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.skeleton {
  background: hsl(var(--rule));
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* 滚动条样式（Webkit）*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--paper));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--ink-subtle));
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--ink-muted));
}

/* 禁用动画（用户偏好）*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
