@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
/* ================================
   Dating App Theme Tokens
   Primary framework: Tailwind
   Purpose: Static design handoff
================================ */
/* ---------- CORE BRAND COLORS ---------- */
:root {
  /* Base / body text */
  --font-base: "Ubuntu", sans-serif;
  /* Headings / brand */
  --font-heading: "Ubuntu", sans-serif;
  /* ===============================
     Core Brand Colors
  =============================== */
  --color-primary: #006FE3; /* Main actions, links */
  --color-secondary: #FF5C8A; /* Matches, hearts */
  --color-accent: #FFC83D; /* Premium, boost */
  /* ===============================
     Primary Color Shades
  =============================== */
  --color-primary-50: #E6F1FF;
  --color-primary-100: #CCE4FF;
  --color-primary-200: #99C9FF;
  --color-primary-300: #66ADFF;
  --color-primary-400: #3392FF;
  --color-primary-500: #006FE3; /* base */
  --color-primary-600: #0059B6;
  --color-primary-700: #004389;
  --color-primary-800: #002D5C;
  --color-primary-900: #00172F;
  /* ===============================
     Secondary Color Shades
  =============================== */
  --color-secondary-50: #FFE8EF;
  --color-secondary-100: #FFD1DF;
  --color-secondary-200: #FFA3BF;
  --color-secondary-300: #FF759F;
  --color-secondary-400: #FF5C8A;
  --color-secondary-500: #FF3F75;
  --color-secondary-600: #E63666;
  --color-secondary-700: #B82B51;
  --color-secondary-800: #8A203D;
  --color-secondary-900: #5C1428;
  /* ===============================
     Accent Color Shades
  =============================== */
  --color-accent-50: #FFF8E1;
  --color-accent-100: #FFECB3;
  --color-accent-200: #FFE082;
  --color-accent-300: #FFD54F;
  --color-accent-400: #FFC83D;
  --color-accent-500: #FFB300;
  --color-accent-600: #E6A100;
  --color-accent-700: #B37D00;
  --color-accent-800: #805900;
  --color-accent-900: #4D3500;
  /* Backgrounds */
  --bg-page: #F6F9FF; /* App background */
  --bg-card: #FFFFFF; /* Cards, modals */
  --bg-soft: #EEF4FF; /* Soft sections */
  /* Text */
  --text-primary: #0F172A; /* Headings */
  --text-secondary: #475569; /* Descriptions */
  --text-muted: #94A3B8; /* Labels */
  /* Borders & Dividers */
  --border-default: #E2E8F0;
  /* Status */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  /* Radius (aligns with Tailwind) */
  --radius-sm: 0.375rem; /* rounded-md */
  --radius-md: 0.5rem; /* rounded-lg */
  --radius-lg: 0.75rem; /* rounded-xl */
  --radius-xl: 1rem; /* rounded-2xl */
  /* Shadows (soft & romantic) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
}

:root[data-theme=dark] {
  --bg-page: #0B1220;
  --bg-card: #111827;
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --border-default: #1F2937;
}

body {
  font-family: var(--font-base);
  color: var(--text-primary);
  background-color: var(--bg-page);
}

h1, h2, h3 {
  font-family: var(--font-heading);
}

:root[data-theme=light] {
  --bg-page: #ffffff;
  --bg-card: #f9fafb;
  --text-primary: #0f172a;
  --text-secondary: #475569;
}

:root[data-theme=dark] {
  --bg-page: #0b1220;
  --bg-card: #111827;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
}

/* Base styles */
body {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* Form input styles */
.label-text {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.375rem;
}

.input-field {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  outline: none;
  transition: all 0.2s;
}

.input-field:focus {
  background-color: white;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 111, 227, 0.2);
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-up {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes scale-up {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes reveal-down {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-fade-in {
  animation: fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up {
  animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-up {
  animation: scale-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-reveal-down {
  animation: reveal-down 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays */
.stagger-1 {
  animation-delay: 0.1s;
}

.stagger-2 {
  animation-delay: 0.15s;
}

.stagger-3 {
  animation-delay: 0.2s;
}

.stagger-4 {
  animation-delay: 0.25s;
}

.stagger-5 {
  animation-delay: 0.3s;
}

.stagger-6 {
  animation-delay: 0.35s;
}

.stagger-7 {
  animation-delay: 0.4s;
}

.stagger-8 {
  animation-delay: 0.45s;
}

/* Hover effects */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
}

.hover-scale {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.active-ring:active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7c3aed;
}

/* ===============================
   Button Base
=================================*/
.btn {
  width: 100%;
  padding: 16px 16px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* ===============================
   Primary Button
=================================*/
.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Hover */
.btn-primary:hover {
  background-color: var(--color-secondary);
  transform: translateY(-2px);
}

/* Active */
.btn-primary:active {
  transform: translateY(0);
}

/* ===============================
   Button Content
=================================*/
.btn-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===============================
   Icon
=================================*/
.btn-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

/* Arrow move animation on hover */
.btn:hover .btn-icon {
  transform: translateX(4px);
}

.card {
  background-color: var(--bg-card);
  border-radius: 1rem;
  padding: 1rem;
}

/* ===============================
   Form Group
=================================*/
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===============================
   Label
=================================*/
.form-label {
  font-size: 14px;
  font-weight: 500;
  margin-left: 4px;
  color: #ffffff;
}

/* ===============================
   Input Wrapper
=================================*/
.form-control-group {
  position: relative;
  display: flex;
  align-items: center;
}

/* ===============================
   Icon
=================================*/
.form-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #ffffff;
  transition: color 0.3s ease;
}

/* Change icon color when input is focused */
.form-control-group:focus-within .form-icon {
  color: var(--color-primary);
}

/* ===============================
   Input
=================================*/
.form-input {
  width: 100%;
  height: 56px;
  padding: 0 16px 0 48px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: rgba(248, 250, 252, 0.5);
  font-weight: 500;
  outline: none;
  transition: all 0.3s ease;
}

/* Placeholder */
.form-input::placeholder {
  color: #cbd5e1;
}

/* Focus State */
.form-input:focus {
  background: #ffffff;
  border: 2px solid var(--color-primary-700);
}

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

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

/*# sourceMappingURL=custom-style.css.map */