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

@layer base {
  :root {
    --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%;
    --primary: 0 100% 50%;
    --primary-foreground: 0 0% 100%;
    --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: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 0 100% 50%;
    --radius: 0rem;
  }

  .dark {
    --background: 0 0% 7%;
    --foreground: 0 0% 98%;
    --card: 0 0% 7%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 15%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 0 100% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 0 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='none' stroke='%23333' stroke-width='0.25' stroke-opacity='0.2'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    font-family: var(--font-noto-sans-sc), sans-serif;
  }

  .font-mono {
    font-family: var(--font-space-mono), monospace;
  }
}

.grid-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='none' stroke='%23333' stroke-width='0.25' stroke-opacity='0.2'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

.red-section {
  background-color: hsla(var(--primary), 0.15);
  width: 25%;
  max-width: 300px;
}

.red-accent {
  position: relative;
}

.red-accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background-color: hsl(var(--primary));
}

/* 移除切角设计，改为纯矩形 */
.card-hover-effect {
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-hover-effect:hover {
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
  border-color: rgba(255, 0, 0, 0.3);
  transform: translateY(-2px);
}

.button-hover-effect {
  transition: all 0.3s ease;
}

.button-hover-effect:hover {
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
}

.diagonal-line {
  position: relative;
}

.diagonal-line::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background: repeating-linear-gradient(
    to right,
    hsl(var(--primary)) 0,
    hsl(var(--primary)) 10px,
    transparent 10px,
    transparent 20px
  );
  bottom: -10px;
  left: 0;
}

.nav-active {
  position: relative;
}

.nav-active::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 3px;
  width: 100%;
  background-color: hsl(var(--primary));
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 内容区域背景，确保文字可读性 */
.content-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1rem;
  border-radius: 0;
}