carrotskin/src/app/globals.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
  --navbar-height: 64px; /* 与pt-16对应 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

/* Custom utility classes */
.text-balance {
  text-wrap: balance;
}

/* Custom component classes */
.btn-carrot {
  background-color: #f97316;
  color: white;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-carrot:hover {
  background-color: #ea580c;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.btn-carrot-outline {
  border: 2px solid #f97316;
  color: #f97316;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.btn-carrot-outline:hover {
  background-color: #f97316;
  color: white;
}

.card-minecraft {
  background-color: white;
  border: 2px solid #fed7aa;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.card-minecraft:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  .card-minecraft {
    background-color: #1f2937;
    border-color: #c2410c;
  }
}

.text-gradient {
  background: linear-gradient(to right, #fb923c, #f97316);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.bg-gradient-carrot {
  background: linear-gradient(to bottom right, #fb923c, #f97316, #ea580c);
}

/* 现代布局解决方案 */
@layer utilities {
  /* 全屏减去navbar高度 */
  .h-screen-nav {
    height: calc(100vh - var(--navbar-height));
  }
  
  /* 侧栏最大高度，确保底部按钮可见 */
  .sidebar-max-height {
    max-height: calc(100vh - var(--navbar-height) - 120px);
  }
  
  /* 首页hero section专用高度 */
  .min-h-screen-nav {
    min-height: calc(100vh - var(--navbar-height));
  }
}