@import "tailwindcss";

@plugin "tailwindcss-animate";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:where(.dark, .dark *));

:root {
  /* Neutral: Zinc - Clean, Professional, International Style */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  
  /* Brand: Deep Indigo */
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  
  /* Destructive: Subtle Red */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  /* Borders & UI */
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  
  --radius: 0.5rem;

  /* Chart / Data Visualization Colors */
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  
  /* Sidebar Specific */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  /* Dark Mode: Deep Zinc Base */
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  
  /* Brand Dark: Adjusted for contrast */
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;

  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));
  
  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  /* Material Design 3 Surface 令牌映射（备课模块使用）*/
  --color-surface: hsl(var(--card));
  --color-on-surface: hsl(var(--foreground));
  --color-on-surface-variant: hsl(var(--muted-foreground));
  --color-surface-container-lowest: hsl(var(--background));
  --color-surface-container-low: hsl(var(--muted));
  --color-surface-container: hsl(var(--secondary));
  --color-surface-container-high: hsl(var(--accent));
  --color-surface-container-highest: hsl(var(--muted-foreground));
  --color-outline-variant: hsl(var(--border));
  --color-outline: hsl(var(--border));
  --color-error: hsl(var(--destructive));
  --color-tertiary: hsl(var(--chart-3));
  --color-tertiary-container: hsl(var(--chart-3));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  
  @keyframes accordion-down {
    from { height: 0; }
    to { height: var(--radix-accordion-content-height); }
  }
  @keyframes accordion-up {
    from { height: var(--radix-accordion-content-height); }
    to { height: 0; }
  }
}

/* Reduced Motion */
@layer base {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Base Styles */
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground h-screen overflow-hidden;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* ---- 备课画布：锚点与连线透明度规则 ---- */
/* 范围锚定文本背景：默认透明（opacity 0），选中关联节点时显示（opacity 0.3） */
.range-anchor {
  background-color: var(--node-color, #1976d2);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 2px;
  cursor: pointer;
  padding: 0 1px;
}
.range-anchor.active {
  opacity: 0.3;
}
.range-anchor:hover {
  opacity: 0.5;
}

/* 点锚定占位符：默认半透明（opacity 0.3），选中关联节点时不透明（opacity 1） */
.point-anchor {
  background-color: var(--node-color, #1976d2);
  color: #fff;
  opacity: 0.3;
  transition: opacity 0.2s ease;
  border-radius: 50%;
  cursor: pointer;
  padding: 0 4px;
  margin: 0 1px;
  font-size: 0.85em;
  font-weight: 600;
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  line-height: 1.2;
  user-select: none;
}
.point-anchor.active {
  opacity: 1;
}
.point-anchor:hover {
  opacity: 0.8;
}

/* 锚点连线：默认 10% 透明度，选中关联节点时完整显示 */
.anchor-edge {
  opacity: 0.1;
  transition: opacity 0.2s ease;
}
.anchor-edge.active {
  opacity: 1;
}

/* 正文节点光标指示器闪烁 */
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}