/* ==========================================================================
   Recuerdi — new look "Crema" (WED-359): the part every app page shares.
   Linked only by the look middleware (src/server/look-gate.ts) where newLookOn() says so, after the shared controls
   and before nothing else: the area's own file (crema-<area>.css) follows it.
   - faces: Cormorant Garamond (the templates' own file), Nunito Sans, Great Vibes (only the "di" of the wordmark)
   - wordmark "RECUERdi" + seal "Rd" (markup from look.ts)
   - Recuerdi's overlays (RqDialog, the date and list popups, "¿Algo que mejorar?") carry the Crema tokens on their own
     root, so they look the same on every page, also on a gallery in the couple's theme.
   Crimson #5B1E32 for text, buttons, headings; Ice #B7D1EA only as a fill, never as text on light ground.
   ========================================================================== */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/site/fonts/cormorantgaramond-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(/site/fonts/cormorantgaramond-italic.woff2) format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/nunito-sans.woff2) format("woff2"); }
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/great-vibes.woff2) format("woff2"); }

/* ---------- Wordmark "RECUERdi" + seal "Rd" ---------- */
.wm-crema { display: inline-flex; align-items: center; gap: 10px; color: #5B1E32; line-height: 1; font-size: 1rem; letter-spacing: 0; font-style: normal; }
.wm-crema .mono { width: 34px; height: 34px; flex: none; }
.wm-crema .mono text { font-weight: 400; }
.wm-crema .mono__r { font-family: "Cormorant Garamond", Georgia, serif; font-size: 62px; fill: currentColor; }
.wm-crema .mono__d { font-family: "Great Vibes", cursive; font-size: 78px; fill: currentColor; }
.wm-crema .mono__ring, .wm-crema .mono__ring2 { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .55; }
.wm-crema .mono__ring2 { stroke-width: .6; }
.wm-crema .bm { display: inline-flex; align-items: baseline; line-height: 1; white-space: nowrap; }
.wm-crema .bm__caps { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 1.3em; }
.wm-crema .bm__script { font-family: "Great Vibes", cursive; font-weight: 400; font-size: 1.9em; line-height: 0; margin-left: -.06em; transform: translateY(.05em); text-transform: none; letter-spacing: 0; }
/* the small marks ("Hecho con Recuerdi", example bar) take the colour of the text around them */
.wm-crema--text { color: inherit; gap: 0; font-size: inherit; vertical-align: baseline; }
.wm-crema--text .bm__caps { font-size: 1.05em; letter-spacing: .08em; }
.wm-crema--text .bm__script { font-size: 1.6em; }
/* the old wordmark's dot and italic never show inside the new one */
.wordmark:has(.wm-crema) .dot { display: none; }

/* ---------- Crema tokens on Recuerdi's own overlays ---------- */
dialog.rq-dlg, .rq-dp__panel, .rq-sel__pop, dialog.rqfb, .rqfb-menu {
  --brand-accent: #5B1E32;
  --accent: #5B1E32; --accent-text: #5B1E32; --accent-hover: #4A1628; --accent-ink: #FFFFFF;
  --accent-soft: #EEF4FA;
  --paper: #FCF9F4; --paper-2: #F8F3EB; --paper-3: #F1EAE0; --ivory: #FFFDF9;
  --ink: #2A1A1E; --ink-2: #4E3C40; --ink-3: #6F5E60;
  --rule: rgba(91, 30, 50, .12); --rule-strong: rgba(91, 30, 50, .3);
  --danger: #8A2A1E;
  --ring: 0 0 0 3px rgba(91, 30, 50, .25);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-2: 6px; --radius-3: 12px;
  font-family: var(--font-ui);
}

/* RqDialog: serif title in crimson, buttons with the 8 px corners of Nítido */
.rq-dlg__in { background: #FFFDF9; font-family: var(--font-ui); }
.rq-dlg__t { color: #5B1E32; font-weight: 500; }
.rq-dlg__b { border-radius: 8px; font-weight: 700; }
.rq-dlg__b--ghost { color: #5B1E32; }
.rq-dlg__b--ghost:hover { background: #DCE8F4; border-color: #DCE8F4; }
.rq-dlg--danger .rq-dlg__b--main { background: #8A2A1E; color: #FFFFFF; }
@media (min-width: 561px) { .rq-dlg__in { border-radius: 12px; } }

/* lists and calendars: chosen entries on an ice fill with crimson text */
.rq-sel__opt[aria-selected="true"], .rq-sel__opt.is-active[aria-selected="true"] { background: #DCE8F4; color: #5B1E32; }
.rq-sel__opt.is-active { background: #F8F3EB; }
.rq-sel__search, .rq-sel__opt { border-radius: 6px; }
.rq-dp__title { color: #5B1E32; font-weight: 500; }

/* "¿Algo que mejorar?" */
dialog.rqfb h2 { font-family: var(--font-display); color: #5B1E32; font-weight: 500; }
.rqfb-menu { border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { dialog.rqfb[open] { animation: none; } }