/* =====================================================================
   MOMENTS — brand system (umbrella brand: "Moments")
   One file with all shared colours, typography and spacing.
   "Moments for Her" uses the default theme below. A future
   "Moments for Him" only needs another [data-brand="him"] block
   overriding the --accent-* / --sheen-* values.
   ===================================================================== */

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/playfair-display.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/playfair-display-italic.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); }

:root {
  /* Neutrals (shared by all Moments sites) */
  --m-white: #FFFFFF;
  --m-ivory: #FBF8F7;
  --m-charcoal: #2B2B2B;
  --m-grey-700: #4A4A4A;
  --m-grey-500: #6E6E6E;
  --m-grey-200: #E7E3E2;
  --m-success: #2E6B47;
  --m-error: #A3122A;

  /* Typography */
  --m-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --m-font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --m-fs-xs: 0.78rem;
  --m-fs-sm: 0.9rem;
  --m-fs-base: 1rem;
  --m-fs-lg: 1.15rem;
  --m-fs-xl: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  --m-fs-2xl: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  --m-fs-hero: clamp(2.4rem, 1.4rem + 5vw, 4.6rem);

  /* Spacing, radius, shadow */
  --m-space-1: 0.25rem;
  --m-space-2: 0.5rem;
  --m-space-3: 0.75rem;
  --m-space-4: 1rem;
  --m-space-6: 1.5rem;
  --m-space-8: 2rem;
  --m-space-12: 3rem;
  --m-space-16: 4rem;
  --m-space-24: 6rem;
  --m-radius-sm: 8px;
  --m-radius: 16px;
  --m-radius-lg: 24px;
  --m-radius-pill: 999px;
  --m-container: 1180px;
  --m-shadow-sm: 0 2px 10px rgba(43, 43, 43, 0.06);
  --m-shadow: 0 10px 30px rgba(43, 43, 43, 0.08);

  /* ---- Theme: Moments for Her — dark metallic red (default) ---- */
  --accent-900: #5C0A14;   /* deepest */
  --accent-700: #7A0F1C;   /* main brand red */
  --accent-500: #9B1B30;   /* bright red */
  --accent-highlight: #B8364A; /* lighter metallic glint (still readable on white) */
  --accent-on: #FFFFFF;    /* text on accent backgrounds */
  --sheen-soft: rgba(155, 27, 48, 0.07);
  --sheen-softer: rgba(122, 15, 28, 0.04);
  --sheen-glint: rgba(255, 255, 255, 0.55);

  /* Metallic gradients built from the theme colours */
  --metal-text: linear-gradient(105deg, var(--accent-900) 0%, var(--accent-700) 30%, var(--accent-highlight) 46%, var(--accent-500) 54%, var(--accent-700) 70%, var(--accent-900) 100%);
  --metal-fill: linear-gradient(105deg, var(--accent-900) 0%, var(--accent-700) 35%, #A8283C 48%, var(--accent-700) 62%, var(--accent-900) 100%);
  --metal-line: linear-gradient(90deg, transparent 0%, var(--accent-900) 18%, var(--accent-highlight) 50%, var(--accent-900) 82%, transparent 100%);

  --m-shimmer-duration: 9s;
}

/* Example for the sister site (kept here so the system stays in one place):
:root[data-brand="him"] {
  --accent-900: #0F1E2E; --accent-700: #1B3147; --accent-500: #2C4A66; --accent-highlight: #5F7F9C;
  --sheen-soft: rgba(44, 74, 102, 0.07); --sheen-softer: rgba(27, 49, 71, 0.04);
}
*/