@import "tailwindcss";

/* ========================================
   VARIABLES CSS BASE (tema dark/light)
   ======================================== */
/* Light mode (default when no .dark class) */
:root {
  --bg: 245 245 248;
  --fg: 20 20 22;
  --muted: 110 110 120;
  --accent: 18 108 242;
  --card: 255 255 255 / 0.6;
  --border: 0 0 0 / 0.08;
  --glass-blur: 14px;

  /* Scrollbar */
  --sb-size: 10px;
  --sb-thumb: rgba(255, 127, 187, 0.65);
  --sb-thumb-hover: rgba(255, 127, 187, 0.82);
  --sb-thumb-active: rgba(255, 110, 178, 0.95);
  --sb-track: rgba(0,0,0,0.06);
}

/* Dark mode */
:root.dark {
  --bg: 15 15 18;
  --fg: 235 235 240;
  --muted: 180 180 190;
  --accent: 80 160 255;
  --card: 28 28 34 / 0.55;
  --border: 255 255 255 / 0.12;
  --sb-thumb: rgba(255, 159, 203, 0.55);
  --sb-thumb-hover: rgba(255, 159, 203, 0.75);
  --sb-thumb-active: rgba(255, 127, 187, 0.9);
  --sb-track: rgba(255,255,255,0.05);
}

/* ========================================
   TAILWIND THEME (colores custom)
   ======================================== */
@theme {
  /* Colores base usando CSS variables */
  --color-background: rgb(var(--bg));
  --color-foreground: rgb(var(--fg));
  --color-muted: rgb(var(--muted));
  --color-accent: rgb(var(--accent));
  --color-card: rgba(var(--card));
  --color-border: rgba(var(--border));

  /* Colores pink/magenta (accent del diseño) */
  --color-pink-50: #fff0f6;
  --color-pink-100: #ffe0ed;
  --color-pink-200: #ffcfe4;
  --color-pink-300: #ff9fc7;
  --color-pink-400: #ff7fbf;
  --color-pink-500: #ff4da6;
  --color-pink-600: #ff2e86;
  --color-pink-700: #e01a6e;
  --color-pink-800: #b8155a;
  --color-pink-900: #99174d;

  /* Border radius custom */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;

  /* Animations */
  --animate-fade-in: fade-in 0.15s ease;
  --animate-slide-in: slide-in 0.2s ease;
  --animate-slide-out: slide-out 0.2s ease;

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes slide-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
  }
}

/* ========================================
   BASE STYLES
   ======================================== */
* { box-sizing: border-box; }
html, body, #app { height: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
}
body {
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
button { cursor: pointer; }
a { color: inherit; }

/* ========================================
   GLASSMORPHISM UTILITIES
   ======================================== */
@utility glass {
  backdrop-filter: blur(var(--glass-blur));
  background: rgba(var(--card));
}

@utility glass-border {
  border: 1px solid rgba(var(--border));
}

@utility glass-card {
  backdrop-filter: blur(var(--glass-blur));
  background: rgba(var(--card));
  border: 1px solid rgba(var(--border));
  border-radius: var(--radius-lg);
}

@utility glass-panel {
  backdrop-filter: blur(var(--glass-blur));
  background: linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ========================================
   CUSTOM SCROLLBARS
   ======================================== */
/* Firefox */
html, body, .scroll-custom {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}

/* WebKit */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.scroll-custom::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.scroll-custom::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.scroll-custom::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  box-shadow: 0 0 10px rgba(255, 46, 134, 0.15);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.scroll-custom::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
  background-clip: content-box;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
.scroll-custom::-webkit-scrollbar-thumb:active {
  background: var(--sb-thumb-active);
  background-clip: content-box;
}
