/* ============================================================
   AMOURETTE PAPER — Global Style Tokens (Ivory & Rose-Gold)
   ============================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── CSS RESET & CORE VARIABLES ── */
:root {
  /* Color Tokens */
  --bg-primary:      #FCFAF7; /* Ivory Cream */
  --bg-card:         #FFFFFF; /* Pure Alabaster */
  --text-primary:    #2F221E; /* Espresso Dark */
  --text-secondary:  #6E5A56; /* Cocoa Muted */
  
  --rose-gold:       #C88A94; /* Brushed Rose Gold */
  --rose-gold-dark:  #A6636D; /* Deep Rose-Gold highlight */
  --rose-gold-light: #F7EDE9; /* Soft pink-ivory aura */
  --border-color:    rgba(200, 138, 148, 0.15); /* Elegant thin separator */

  /* Typography */
  --font-serif:      'Cormorant Garamond', Georgia, serif;
  --font-sans:       'Montserrat', sans-serif;

  /* Layout Standards */
  --radius-sm:       8px;
  --radius-md:       16px;
  --radius-lg:       28px;
  --radius-full:     9999px;
  
  --transition:      all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm:       0 4px 20px rgba(47, 34, 30, 0.03);
  --shadow-md:       0 10px 30px rgba(47, 34, 30, 0.06);
  --shadow-lg:       0 20px 50px rgba(47, 34, 30, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* ── SELECTIONS ── */
::selection {
  background-color: var(--rose-gold-light);
  color: var(--rose-gold-dark);
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  outline: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--rose-gold);
  color: var(--bg-card);
  box-shadow: 0 8px 24px rgba(200, 138, 148, 0.25);
}

.btn-primary:hover {
  background: var(--rose-gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(200, 138, 148, 0.35);
}

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

.btn-primary:disabled {
  background: #E5DFDA !important;
  color: #A09690 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--rose-gold-light);
  border-color: rgba(200, 138, 148, 0.25);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--border-color);
}

.btn-ghost:hover {
  background: rgba(200, 138, 148, 0.05);
  color: var(--text-primary);
  border-color: var(--rose-gold);
}

.btn-sm {
  padding: 10px 24px;
  font-size: 0.72rem;
}

/* Logout button style */
.btn-signout {
  background: rgba(166, 99, 109, 0.08);
  color: #A6636D;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-signout:hover {
  background: #A6636D;
  color: #FFFFFF;
}

/* ── ANIMATIONS ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── TOAST OVERLAY OVERRIDES ── */
.toastify {
  padding: 12px 24px;
  color: #fff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0,0,0,0.12), 0 10px 36px -3px rgba(0,0,0,0.1) !important;
  background: var(--rose-gold-dark) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--rose-gold);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rose-gold-dark);
}

/* Confetti styling for heart double-tap */
.floating-heart-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 3rem;
  animation: heartPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  z-index: 10;
  pointer-events: none;
}

@keyframes heartPop {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.9; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 0; }
}