/* Font */
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Variable.ttf');
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-VariableItalic.ttf');
  font-style: italic;
  font-display: swap;
}
html {
  font-family: 'Satoshi', sans-serif;
}

/* Theme */
:root {
  --background: 210 33% 99%;
  --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: 200 29% 45%;
  --primary-foreground: 0 0% 92.5%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95%;
  --muted-foreground: 240 3.8% 28.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 72.22% 50.59%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 88%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --radius: 0.5rem;
}
.dark {
  --background: 240 20.54% 5.2%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 195 95% 85%;
  --primary-foreground: 240 3.7% 15.9%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 5.9% 12%;
  --muted-foreground: 240 5% 74.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% 19.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
}
:root {
  --un-default-border-color: hsl(var(--border) / 1);
}
html.dark {
  color-scheme: dark;
}

/* 适配深色模式 */
.dark .memos-container {
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}

/* 优化卡片样式 */
.memo-card {
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.memo-card:hover {
  transform: translateY(-2px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  #memos {
    padding: 0 1rem;
  }
}

/* Global */
a {
  transition: color 0.2s ease;
  &:hover {
    color: hsl(var(--primary) / var(--un-text-opacity, 1));
  }
}