/* CINTA Global Design System (single source of truth) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,700&display=swap');

:root {
  --background: #fdf8f8;
  --surface: #ffffff;
  --surface-low: #f7f3f2;
  --surface-mid: #f1edec;
  --surface-high: #e5e2e1;
  --ink: #1c1b1b;
  --muted: #5f5e5e;
  --line: #d8d0cf;

  --pink: #ffd1db;
  --pink-deep: #78555d;
  --cream: #f3dfce;
  --taupe: #e8d5c4;
  --gold: #b69a4a;
  --white: #ffffff;

  --serif: "Noto Serif", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

html, body {
  font-family: var(--sans);
}

/* Alias tokens for pages that still use Tailwind semantic color classes */
.bg-background { background-color: var(--background) !important; }
.bg-surface { background-color: var(--surface) !important; }
.bg-surface-low,
.bg-surface-container-low { background-color: var(--surface-low) !important; }
.bg-surface-mid,
.bg-surface-container,
.bg-surface-container-high,
.bg-surface-container-highest { background-color: var(--surface-mid) !important; }
.bg-primary,
.bg-surface-tint { background-color: var(--pink-deep) !important; }
.bg-on-surface { background-color: var(--ink) !important; }
.bg-primary-container,
.bg-secondary-container,
.bg-secondary-fixed,
.bg-primary-fixed { background-color: var(--pink) !important; }

.text-on-background,
.text-on-surface { color: var(--ink) !important; }
.text-on-surface-variant { color: var(--muted) !important; }
.text-primary,
.text-surface-tint { color: var(--pink-deep) !important; }
.text-surface { color: var(--surface) !important; }
.text-on-primary,
.text-white,
.text-surface-bright { color: var(--white) !important; }
.text-on-primary-container { color: var(--ink) !important; }

.border-outline,
.border-outline-variant { border-color: var(--line) !important; }
.border-primary { border-color: var(--pink-deep) !important; }
.ring-primary { --tw-ring-color: var(--pink-deep) !important; }
.ring-outline-variant { --tw-ring-color: var(--line) !important; }

.font-headline,
.font-display,
.font-serif { font-family: var(--serif) !important; }
.font-body,
.font-label,
.font-sans { font-family: var(--sans) !important; }

/* Common CTA consistency */
.btn:hover,
.quick-add:hover,
button:hover {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Tailwind slash opacity classes used in pages */
.text-on-surface\/40 { color: color-mix(in srgb, var(--ink) 40%, transparent) !important; }
.bg-white\/20 { background-color: color-mix(in srgb, #ffffff 20%, transparent) !important; }

/* Hardcoded legacy class names to normalize with Home V2 tokens */
.bg-\[\#FAF7F4\] { background-color: var(--background) !important; }

/* Product card heart buttons */
button.material-symbols-outlined[data-icon="favorite"],
.material-symbols-outlined[data-icon="favorite"] {
  color: var(--pink-deep) !important;
}
.wishlist .material-symbols-outlined {
  color: var(--pink-deep) !important;
}

/* Shared gradient CTA token */
.silk-gradient {
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink) 100%) !important;
}

/* Force CTA hover consistency across legacy pages */
.hover\:bg-primary:hover,
.hover\:bg-on-surface\/90:hover,
button[class*="bg-on-surface"]:hover,
.quick-add:hover,
.silk-gradient:hover {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
  color: var(--ink) !important;
}