/* ============================================
   VIVID CARTOON THEME - Base Design System
   活力卡通风 - 基础设计系统
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Primary Palette */
  --v-coral: #FF6B6B;
  --v-coral-light: #FF8E8E;
  --v-coral-dark: #E85555;
  --v-teal: #4ECDC4;
  --v-teal-light: #7EDDD7;
  --v-teal-dark: #38B2A9;
  --v-yellow: #FFE66D;
  --v-yellow-light: #FFF0A3;
  --v-purple: #A78BFA;
  --v-purple-light: #C4B5FD;
  --v-pink: #F472B6;
  --v-blue: #60A5FA;

  /* Neutrals - Warm tinted */
  --v-bg: #FFF9F5;
  --v-bg-card: #FFFFFF;
  --v-bg-section: #FFF3ED;
  --v-bg-section-alt: #F0FAF9;
  --v-bg-dark: #1A1B2E;
  --v-bg-dark-card: #252640;
  --v-text: #2D2D3F;
  --v-text-secondary: #7C7C8A;
  --v-text-muted: #B0B0BA;
  --v-border: #FFE0D0;
  --v-border-light: #FFF0E6;

  /* Functional */
  --v-success: #34D399;
  --v-warning: #FBBF24;
  --v-error: #F87171;
  --v-vip: #FFD700;
  --v-vip-gradient: linear-gradient(135deg, #FFD700, #FFA500);

  /* Shadows - Warm, playful */
  --v-shadow-sm: 0 2px 8px rgba(255, 107, 107, 0.08);
  --v-shadow-md: 0 4px 20px rgba(255, 107, 107, 0.12);
  --v-shadow-lg: 0 8px 40px rgba(255, 107, 107, 0.16);
  --v-shadow-hover: 0 8px 30px rgba(255, 107, 107, 0.22);

  /* Border Radius */
  --v-radius-xs: 6px;
  --v-radius-sm: 10px;
  --v-radius-md: 16px;
  --v-radius-lg: 20px;
  --v-radius-xl: 28px;
  --v-radius-pill: 9999px;

  /* Typography */
  --v-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* Spacing */
  --v-space-xs: 4px;
  --v-space-sm: 8px;
  --v-space-md: 16px;
  --v-space-lg: 24px;
  --v-space-xl: 32px;
  --v-space-2xl: 48px;
  --v-space-3xl: 64px;

  /* Container */
  --v-container: 1200px;

  /* Transitions */
  --v-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --v-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --v-duration-fast: 0.2s;
  --v-duration-normal: 0.3s;
  --v-duration-slow: 0.5s;
}

/* --- CSS Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--v-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--v-text);
  background-color: var(--v-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--v-coral);
  text-decoration: none;
  transition: color var(--v-duration-fast) var(--v-ease-smooth);
}

a:hover {
  color: var(--v-coral-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--v-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--v-coral-light);
  border-radius: var(--v-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--v-coral);
}

/* --- Selection --- */
::selection {
  background: rgba(255, 107, 107, 0.2);
  color: var(--v-text);
}

/* --- Typography --- */
h1, .v-h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--v-text);
}

h2, .v-h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--v-text);
}

h3, .v-h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--v-text);
}

h4, .v-h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--v-text);
}

/* --- Layout --- */
.v-container {
  max-width: var(--v-container);
  margin: 0 auto;
  padding: 0 var(--v-space-lg);
}

.v-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--v-space-md) * -0.5);
}

.v-row > * {
  padding: 0 calc(var(--v-space-md) * 0.5);
}

.v-col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.v-col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.v-col-3 { flex: 0 0 25%; max-width: 25%; }
.v-col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.v-col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.v-col-6 { flex: 0 0 50%; max-width: 50%; }
.v-col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.v-col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.v-col-9 { flex: 0 0 75%; max-width: 75%; }
.v-col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.v-col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.v-col-12 { flex: 0 0 100%; max-width: 100%; }

/* --- Flex Utilities --- */
.v-flex { display: flex; }
.v-flex-center { display: flex; align-items: center; justify-content: center; }
.v-flex-between { display: flex; align-items: center; justify-content: space-between; }
.v-flex-wrap { flex-wrap: wrap; }
.v-flex-col { flex-direction: column; }
.v-items-center { align-items: center; }
.v-justify-center { justify-content: center; }
.v-gap-xs { gap: var(--v-space-xs); }
.v-gap-sm { gap: var(--v-space-sm); }
.v-gap-md { gap: var(--v-space-md); }
.v-gap-lg { gap: var(--v-space-lg); }
.v-gap-xl { gap: var(--v-space-xl); }

/* --- Spacing Utilities --- */
.v-mt-sm { margin-top: var(--v-space-sm); }
.v-mt-md { margin-top: var(--v-space-md); }
.v-mt-lg { margin-top: var(--v-space-lg); }
.v-mt-xl { margin-top: var(--v-space-xl); }
.v-mt-2xl { margin-top: var(--v-space-2xl); }
.v-mb-sm { margin-bottom: var(--v-space-sm); }
.v-mb-md { margin-bottom: var(--v-space-md); }
.v-mb-lg { margin-bottom: var(--v-space-lg); }
.v-mb-xl { margin-bottom: var(--v-space-xl); }
.v-pt-lg { padding-top: var(--v-space-lg); }
.v-pt-xl { padding-top: var(--v-space-xl); }
.v-pt-2xl { padding-top: var(--v-space-2xl); }
.v-pb-lg { padding-bottom: var(--v-space-lg); }
.v-pb-xl { padding-bottom: var(--v-space-xl); }
.v-pb-2xl { padding-bottom: var(--v-space-2xl); }

/* --- Text Utilities --- */
.v-text-center { text-align: center; }
.v-text-right { text-align: right; }
.v-text-coral { color: var(--v-coral); }
.v-text-teal { color: var(--v-teal); }
.v-text-secondary { color: var(--v-text-secondary); }
.v-text-muted { color: var(--v-text-muted); }
.v-text-bold { font-weight: 700; }
.v-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v-text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Display Utilities --- */
.v-hidden { display: none !important; }
.hide { display: none !important; }
.v-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;
}

/* --- Section --- */
.v-section {
  padding: var(--v-space-2xl) 0;
}

.v-section--alt {
  background: var(--v-bg-section);
}

.v-section--alt2 {
  background: var(--v-bg-section-alt);
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .v-container {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  .v-container {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  .v-container {
    max-width: 100%;
    padding: 0 var(--v-space-md);
  }
  h1, .v-h1 { font-size: 22px; }
  h2, .v-h2 { font-size: 20px; }
}