/* ============================================================
   VELISSE DESIGN SYSTEM — Colors & Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  /* Brand Core */
  --color-rose-gold:        #E8B4B8;
  --color-soft-pink:        #F2C4CE;
  --color-peach:            #F9DDD0;
  --color-rose-deep:        #D4888E;
  --color-rose-darker:      #B86870;

  /* Brand Gradient */
  --gradient-brand:         linear-gradient(135deg, #E8B4B8 0%, #F2C4CE 50%, #F9DDD0 100%);
  --gradient-brand-h:       linear-gradient(90deg, #E8B4B8 0%, #F2C4CE 50%, #F9DDD0 100%);
  --gradient-brand-btn:     linear-gradient(135deg, #D4888E 0%, #E8B4B8 60%, #F2C4CE 100%);
  --gradient-hero-overlay:  linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);

  /* Backgrounds */
  --color-bg:               #FFFFFF;
  --color-bg-warm:          #FFF8F8;
  --color-bg-section:       #FFF3F4;
  --color-surface:          #FFFFFF;

  /* Text */
  --color-text-primary:     #2D2D2D;
  --color-text-secondary:   #888888;
  --color-text-muted:       #BBBBBB;
  --color-text-on-brand:    #FFFFFF;
  --color-text-price:       #2D2D2D;
  --color-text-original:    #AAAAAA;

  /* Accent / Semantic */
  --color-accent:           #E85D75;
  --color-sale-badge:       #E85D75;
  --color-sale-badge-bg:    #FFE8EC;
  --color-success:          #5CB85C;
  --color-warning:          #F0AD4E;

  /* Borders & Dividers */
  --color-border:           #F0E8EA;
  --color-border-input:     #E8D8DA;

  /* Wishlist */
  --color-heart-active:     #E85D75;
  --color-heart-inactive:   #CCCCCC;

  /* Navigation */
  --color-nav-active:       #E8B4B8;
  --color-nav-inactive:     #888888;
  --color-nav-bg:           rgba(255,255,255,0.95);

  /* Shadows (as variables for reference) */
  --shadow-card:            0 4px 16px rgba(232,180,184,0.18);
  --shadow-card-hover:      0 8px 28px rgba(232,180,184,0.38);
  --shadow-header:          0 2px 12px rgba(0,0,0,0.08);
  --shadow-btn:             0 4px 14px rgba(212,136,142,0.4);
  --shadow-btn-hover:       0 8px 24px rgba(232,180,184,0.55);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  /* Font Families */
  --font-display:   'Playfair Display', Georgia, serif;
  --font-body:      'Poppins', -apple-system, sans-serif;

  /* Font Sizes (mobile-first px) */
  --text-xs:        11px;
  --text-sm:        12px;
  --text-base:      14px;
  --text-md:        15px;
  --text-lg:        16px;
  --text-xl:        18px;
  --text-2xl:       22px;
  --text-3xl:       28px;
  --text-4xl:       34px;
  --text-5xl:       42px;

  /* Font Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter Spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

/* Brand wordmark / logo text */
.t-logo {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-primary);
  text-transform: uppercase;
}

/* Section / page display heading */
.t-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

/* Card / hero overlay heading */
.t-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* Section title (Poppins) */
.t-h3, h3 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* Subsection label */
.t-h4, h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* Body text */
.t-body, p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Small / caption */
.t-caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

/* Label (button text, nav label) */
.t-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Price */
.t-price {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-price);
}

/* Price original / strikethrough */
.t-price-original {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-original);
  text-decoration: line-through;
}

/* Discount % */
.t-discount {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

/* ============================================================
   SPACING & RADIUS TOKENS
   ============================================================ */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 50px;
  --radius-full: 9999px;
}