/* ==========================================================================
   Recuerdi — new look "Crema" (WED-359), area "gallery". Linked only by the look middleware (src/server/look-gate.ts).
   The couple's theme stays theirs: <html data-theme>, its paper, ink, ornament, title, meta line, the photo grid, its
   tile gaps and radii, the view tabs' colours and the guestbook's messages are never touched here.
   Recuerdi's own chrome on top of it turns Crema: the code gate and the upload card (cards in ivory with crimson
   titles and buttons), the header's buttons, filter chips, the upload dock, toast, banners, the hosts' tab bar,
   "Hecho con Recuerdi", the lightbox's controls and the example gallery's frame (/demo).
   Crema tokens are set on each chrome root, so its parts read Crema whatever the theme's tokens say.
   Contrast (WCAG AA): crimson #5B1E32 on ivory 12.9:1, white on crimson 12.9:1, crimson on ice-light #DCE8F4 9.4:1,
   ink-3 #6F5E60 on ivory 6.2:1.
   ========================================================================== */

/* ---------- Crema tokens on Recuerdi's chrome ---------- */
.gv-gate, .gv-upload .gv-card, .gv-upload .card, .rq-dock, .toast, .gv-unlock, .rq-verify, .dm-bar, .dm-plate, .dm-pop, .gv-gbpage .gv-card, .gv-gbpage .card, .note {
  --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);
  --champagne: #8FB0D1; --champagne-soft: #DCE8F4;
  --danger: #8A2A1E; --success: #3F6B3A;
  --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;
  --gv-meta-font: "Cormorant Garamond", Georgia, serif;
  --gv-orn: #5B1E32;
  /* the theme's button and field shapes give way to the corners of Nítido inside the chrome */
  --gv-r-btn: 8px; --gv-r-field: 6px; --gv-r-card: 12px;
  --gv-btn-font: "Nunito Sans", ui-sans-serif, system-ui, sans-serif; --gv-btn-style: normal; --gv-btn-case: none; --gv-btn-track: .01em; --gv-btn-size: 15px;
  --radius-2: 6px; --radius-3: 12px;
  font-family: var(--font-ui);
}

/* ---------- the code gate and the upload card: Crema cards on the theme's page ---------- */
.gv-gate.gv-card, .gv-upload .gv-card, .gv-gbpage .gv-card { background: #FFFDF9; color: #2A1A1E; border: 1px solid rgba(91, 30, 50, .12); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(42, 26, 30, .04), 0 18px 36px -16px rgba(42, 26, 30, .16); }
.gv-gate h2 { font-family: "Cormorant Garamond", Georgia, serif; font-style: normal; font-weight: 500; color: #5B1E32; letter-spacing: -.01em; }
.gv-gate h2 em { font-style: italic; color: #5B1E32; }
.gv-gate p { color: #4E3C40; }
.gv-gate .gv-label, .gv-upload .gv-label, .gv-gbpage .gv-label { font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: .1em; color: #6F5E60; }
.gv-gate .gv-field, .gv-gate .input, .gv-upload .gv-field, .gv-upload .input, .gv-gbpage .gv-field, .gv-gbpage .input {
  border-radius: 6px; border: 1px solid rgba(91, 30, 50, .3); background: #FCF9F4; color: #2A1A1E; box-shadow: none; outline: none; }
.gv-gate .gv-field:focus, .gv-gate .input:focus, .gv-upload .gv-field:focus, .gv-upload .input:focus, .gv-gbpage .gv-field:focus, .gv-gbpage .input:focus { border-color: #5B1E32; box-shadow: 0 0 0 3px rgba(91, 30, 50, .25); }
.gv-gate .gv-field--code, .gv-gate .input { font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: .14em; }
.gv-gate .gv-field--code::placeholder, .gv-gate .input::placeholder { font-weight: 400; letter-spacing: 0; color: #6F5E60; }
.gv-gate .err { color: #8A2A1E; }
.gv-cta, .gv-gate .btn, .gv-upload .btn, .gv-gbpage .btn { border-radius: 8px; font-family: "Nunito Sans", system-ui, sans-serif; font-style: normal; text-transform: none; letter-spacing: .01em; font-weight: 700; }
.gv-cta, .gv-gate .btn:not(.btn--ghost), .gv-upload .btn:not(.btn--ghost), .gv-gbpage .btn:not(.btn--ghost) { --bg: #5B1E32; --fg: #FFFFFF; background: #5B1E32; border-color: #5B1E32; color: #FFFFFF; }
.gv-cta:hover, .gv-gate .btn:not(.btn--ghost):hover, .gv-upload .btn:not(.btn--ghost):hover, .gv-gbpage .btn:not(.btn--ghost):hover { background: #4A1628; border-color: #4A1628; }
.gv-upload .btn--ghost, .gv-gbpage .btn--ghost { --bg: transparent; --fg: #5B1E32; color: #5B1E32; border-color: rgba(91, 30, 50, .3); }
.gv-upload .btn--ghost:hover, .gv-gbpage .btn--ghost:hover { background: #DCE8F4; border-color: #DCE8F4; }
.gv-upload .btn:hover, .gv-gbpage .btn:hover, .gv-gate .btn:hover { transform: none; box-shadow: none; }
.gv-upload .link, .gv-gate .link, .gv-gbpage .link { color: #5B1E32; }
.gv-upload h2, .gv-upload h3, .gv-gbpage h2 { font-family: "Cormorant Garamond", Georgia, serif; color: #5B1E32; font-weight: 500; }
.gv-upload .meter, .rq-dock .meter { background: #F1EAE0; }
.gv-upload .meter i, .rq-dock .meter i { background: #5B1E32; }
.rq-resume, .rq-done { background: #EEF4FA; color: #4E3C40; }
.rq-resume b, .rq-done__heart { color: #5B1E32; }
.rq-done h2 { color: #5B1E32; font-weight: 500; }
.rq-done { border-radius: 12px; }
.rq-tile, .qi__th { border-radius: 6px; }
.rq-tile__mark { background: #5B1E32; color: #FFFFFF; }
.up__msg.is-ok { background: #EEF4FA; color: #5B1E32; }

/* "Disfruta la fiesta" before the album opens: Recuerdi's note, a soft ice card */
.gv-body .wait.card { background: #EEF4FA; color: #2A1A1E; border-color: transparent; border-radius: 12px; box-shadow: none; }
.gv-body .wait .wait__ico { color: #5B1E32; }
.gv-body .wait h2 { color: #5B1E32; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }
.gv-body .wait p { color: #4E3C40; font-family: "Nunito Sans", system-ui, sans-serif; }
.note { background: #EEF4FA; color: #5B1E32; border-radius: 12px; }

/* ---------- the header's buttons and the filter chips: Recuerdi's controls, in the theme's colours ----------
   Shapes and type are Crema (Nunito Sans, 8 px buttons, pill chips); the colours stay the theme's ink and rule, so
   they read on every paper, the dark bordeaux included. The main button ("Subir fotos") is always the template's own
   accent with its accent-ink (WED-411, David), on every template; test/wed411-subir-accent.test.ts keeps it so. */
.gv-btn { border-radius: 8px; font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif; font-style: normal; text-transform: none; letter-spacing: .01em; font-size: 14px; font-weight: 700; min-height: 40px; }
.gv-btn--icon { width: 40px; }
.gv-btn--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gv-btn--solid:hover { background: color-mix(in oklab, var(--accent) 86%, var(--accent-ink)); border-color: color-mix(in oklab, var(--accent) 86%, var(--accent-ink)); }
.gv-menu__list { border-radius: 12px; font-family: "Nunito Sans", system-ui, sans-serif; }
.gv-menu__list > a, .gv-menu__list > button { border-radius: 6px; }
.gv-tabs button { font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif; font-weight: 700; }
.gv-chip { font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif; font-weight: 600; min-height: 32px; }
.gv-chip[aria-pressed="true"] { background: #DCE8F4; border-color: #DCE8F4; color: #5B1E32; }
.gv-count { background: #5B1E32; color: #FFFFFF; font-family: "Nunito Sans", system-ui, sans-serif; }
.gv-chip[aria-pressed="true"] .gv-count { background: #5B1E32; color: #FFFFFF; }
.gv-preview { background: #DCE8F4; color: #5B1E32; font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 700; }
.gv-badge--review { background: #5B1E32; color: #FFFFFF; }
/* WED-408: the occasion templates (Viaje, Fiesta) are not crimson-and-ivory like the six classic ones, so (besides the
   main button, see above) the pressed filter chip, the counters and badges take the template's own accent and accent-ink (both at
   least 4.5:1 against each other, guarded in test/wed408-trip-party.test.ts). Hover mixes towards the ink, which keeps
   the contrast on light and dark templates. Keep this list equal to the occasion ids in src/modules/gallery/themes.ts. */
:is([data-theme="caribe"], [data-theme="montana"], [data-theme="road_trip"], [data-theme="ciudad"], [data-theme="girls_trip"], [data-theme="boys_trip"], [data-theme="confeti"], [data-theme="neon"], [data-theme="cocteles"], [data-theme="tropical"], [data-theme="halloween"], [data-theme="navidad"], [data-theme="ano_nuevo"], [data-theme="despedida"], [data-theme="carnaval"], [data-theme="amor_amistad"], [data-theme="salvia"], [data-theme="arena"], [data-theme="niebla"], [data-theme="terracota"], [data-theme="lavanda"], [data-theme="grafito"], [data-theme="comunion"]) .gv-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
:is([data-theme="caribe"], [data-theme="montana"], [data-theme="road_trip"], [data-theme="ciudad"], [data-theme="girls_trip"], [data-theme="boys_trip"], [data-theme="confeti"], [data-theme="neon"], [data-theme="cocteles"], [data-theme="tropical"], [data-theme="halloween"], [data-theme="navidad"], [data-theme="ano_nuevo"], [data-theme="despedida"], [data-theme="carnaval"], [data-theme="amor_amistad"], [data-theme="salvia"], [data-theme="arena"], [data-theme="niebla"], [data-theme="terracota"], [data-theme="lavanda"], [data-theme="grafito"], [data-theme="comunion"]) .gv-count, :is([data-theme="caribe"], [data-theme="montana"], [data-theme="road_trip"], [data-theme="ciudad"], [data-theme="girls_trip"], [data-theme="boys_trip"], [data-theme="confeti"], [data-theme="neon"], [data-theme="cocteles"], [data-theme="tropical"], [data-theme="halloween"], [data-theme="navidad"], [data-theme="ano_nuevo"], [data-theme="despedida"], [data-theme="carnaval"], [data-theme="amor_amistad"], [data-theme="salvia"], [data-theme="arena"], [data-theme="niebla"], [data-theme="terracota"], [data-theme="lavanda"], [data-theme="grafito"], [data-theme="comunion"]) .gv-badge--review { background: var(--accent); color: var(--accent-ink); }
:is([data-theme="caribe"], [data-theme="montana"], [data-theme="road_trip"], [data-theme="ciudad"], [data-theme="girls_trip"], [data-theme="boys_trip"], [data-theme="confeti"], [data-theme="neon"], [data-theme="cocteles"], [data-theme="tropical"], [data-theme="halloween"], [data-theme="navidad"], [data-theme="ano_nuevo"], [data-theme="despedida"], [data-theme="carnaval"], [data-theme="amor_amistad"], [data-theme="salvia"], [data-theme="arena"], [data-theme="niebla"], [data-theme="terracota"], [data-theme="lavanda"], [data-theme="grafito"], [data-theme="comunion"]) .gv-chip[aria-pressed="true"] .gv-count { background: var(--accent-ink); color: var(--accent); }
:is([data-theme="caribe"], [data-theme="montana"], [data-theme="road_trip"], [data-theme="ciudad"], [data-theme="girls_trip"], [data-theme="boys_trip"], [data-theme="confeti"], [data-theme="neon"], [data-theme="cocteles"], [data-theme="tropical"], [data-theme="halloween"], [data-theme="navidad"], [data-theme="ano_nuevo"], [data-theme="despedida"], [data-theme="carnaval"], [data-theme="amor_amistad"], [data-theme="salvia"], [data-theme="arena"], [data-theme="niebla"], [data-theme="terracota"], [data-theme="lavanda"], [data-theme="grafito"], [data-theme="comunion"]) .gv-preview { background: var(--accent); color: var(--accent-ink); }

/* ---------- banners ---------- */
.gv-unlock { background: #FFFDF9; color: #2A1A1E; border: 1px solid rgba(91, 30, 50, .12); border-radius: 12px; font-family: "Nunito Sans", system-ui, sans-serif; }
.gv-unlock b { background: #5B1E32; color: #FFFFFF; border-radius: 8px; font-weight: 700; }
.rq-verify { background: color-mix(in srgb, #FFFDF9 96%, transparent); border-color: rgba(91, 30, 50, .3); border-radius: 12px; }
.rq-verify__i { color: #5B1E32; }
.rq-verify__go { border-radius: 8px; background: #5B1E32; color: #FFFFFF; font-weight: 700; }
.rq-verify__go:hover { background: #4A1628; }

/* ---------- upload dock and toast ---------- */
.rq-dock { background: #FFFDF9; color: #2A1A1E; border: 1px solid rgba(91, 30, 50, .12); border-radius: 12px; }
.rq-dock__count { font-weight: 700; color: #5B1E32; }
.toast { background: #5B1E32; color: #FFFFFF; border-radius: 8px; font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 600; }
:is([data-theme="burdeos"], [data-theme="neon"], [data-theme="halloween"], [data-theme="navidad"], [data-theme="ano_nuevo"]) .toast { background: #FFFDF9; color: #5B1E32; }

/* ---------- lightbox: Recuerdi's controls on the dark stage ---------- */
.lb .btn, .lb2 .btn { border-radius: 8px; font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 600; }
.lb .btn.is-on, .lb2 .btn.is-on { --bg: #FFFDF9; --fg: #5B1E32; }

/* ---------- the hosts' tab bar on the gallery: the same crimson bar as in the panel ---------- */
.host-tabs { --tb-bg: #5B1E32; --tb-ink: #FFFDF9; border-radius: 20px; }
.host-tabs a { border-radius: 14px; font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif; font-weight: 600; }
.host-tabs a[aria-current="page"] { font-weight: 700; }

/* ---------- "Hecho con Recuerdi" ---------- */
.gv-foot { font-family: "Nunito Sans", system-ui, sans-serif; letter-spacing: .02em; }
.gv-foot a { color: var(--ink-2); }
.gv-foot .wm-crema { color: inherit; }

/* ---------- the example gallery's frame (/demo) ---------- */
.dm-bar { background: color-mix(in srgb, #FCF9F4 95%, transparent); color: #2A1A1E; box-shadow: 0 1px 0 rgba(91, 30, 50, .12); font-family: "Nunito Sans", system-ui, sans-serif; }
.dm-wm { font-family: inherit; color: #5B1E32; font-size: 16px; letter-spacing: 0; }
.dm-wm .wm-crema { color: #5B1E32; }
.dm-wm .wm-crema .bm__caps { font-size: 1.1em; }
.dm-back, .dm-back__l, .dm-back__ic { color: #4E3C40; }
.dm-back:hover { background: #EEF4FA; }
.dm-tag { color: #6F5E60; font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 700; }
.dm-sw { color: #6F5E60; font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 600; }
.dm-sw[aria-current="true"] { color: #5B1E32; }
.dm-sw[aria-current="true"] .dm-sw__o { border-color: #5B1E32; }
.dm-chip { background: #FFFDF9; border-color: rgba(91, 30, 50, .3); color: #2A1A1E; font-family: "Nunito Sans", system-ui, sans-serif; }
.dm-chip small, .dm-chev { color: #6F5E60; }
.dm-link { color: #4E3C40; font-family: "Nunito Sans", system-ui, sans-serif; text-decoration-color: rgba(91, 30, 50, .3); }
.dm-link:hover { color: #5B1E32; }
.dm-cta { border-radius: 8px; background: #5B1E32; color: #FFFFFF; font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 700; }
.dm-cta:hover { background: #4A1628; }
.dm-plate { background: color-mix(in srgb, #FFFDF9 92%, transparent); border-radius: 12px; box-shadow: 0 0 0 1px rgba(91, 30, 50, .12), 0 16px 36px -18px rgba(42, 26, 30, .45); }
.dm-pop { background: #FFFDF9; color: #2A1A1E; border-color: rgba(91, 30, 50, .12); border-radius: 12px; font-family: "Nunito Sans", system-ui, sans-serif; }
.dm-pop b { color: #5B1E32; }
:is(.dm-cta, .dm-link, .dm-tag, .dm-sw, .dm-chip, .dm-back):focus-visible { outline-color: #5B1E32; }
.dm-hint, .dm-foot { font-family: "Nunito Sans", system-ui, sans-serif; }
@media (min-width: 900px) {
  .dm-plate { border-radius: 14px; padding: 7px 22px 7px 7px; }
  .dm-plate:has(.dm-link[hidden]) { padding: 7px; }
  .dm-wm { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .gv-btn, .gv-chip, .dm-cta, .toast { transition: none; } }

/* the guestbook card ("Déjales un mensaje"): a Crema card like the code gate */
.gb.gv-card .gb__t, .gb.gv-card .gb__thanks { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; color: #5B1E32; letter-spacing: -.01em; }
.gb.gv-card .gb__t { font-size: clamp(1.7rem, 6vw, 2.2rem); }
.gb.gv-card .gb__lede, .gb.gv-card .gb__time { color: #4E3C40; }
.gb.gv-card .gv-chip { border-color: rgba(91, 30, 50, .3); color: #4E3C40; }
.gb.gv-card .gv-chip[aria-pressed="true"] { border-color: #DCE8F4; color: #5B1E32; }
.gb.gv-card .gv-chip:not([aria-pressed="true"]) .gb__ic { color: #6F5E60; }
.gb.gv-card .gv-chip:not([aria-pressed="true"]):hover { border-color: rgba(91, 30, 50, .5); color: #2A1A1E; }
.gb.gv-card .gv-chip:not([aria-pressed="true"]):hover .gb__ic { color: #5B1E32; }

/* Recuerdi's UI font on the gallery pages (all themes used Recuerdi's Geist here; the themes' own faces for names,
   date and section titles stay as they are) */
html[data-look="crema"] { --font-ui: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

/* the example's sheet "Prueba con tus propias fotos" (public/demo/trial.css): a Crema sheet */
.dm-sheet__card {
  --paper: #FFFDF9; --paper-2: #F8F3EB; --ivory: #FCF9F4; --ink: #2A1A1E; --ink-2: #4E3C40; --ink-3: #6F5E60;
  --rule: rgba(91, 30, 50, .12); --rule-strong: rgba(91, 30, 50, .3); --accent: #5B1E32; --accent-ink: #FFFFFF; --ring: #5B1E32;
  border-radius: 12px; font-family: "Nunito Sans", system-ui, sans-serif;
}
.dm-sheet__t { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; color: #5B1E32; }
.dm-input { border-radius: 6px; }
.dm-err { color: #8A2A1E; }
@media (max-width: 560px) { .dm-sheet__card { border-radius: 12px 12px 0 0; } }
.gv-gate .gv-facenote { color: #6B5559; }
/* WED-374: "Por rostro" in the Crema look. */
html[data-look="crema"] .gv-faces__card { background: #FFFDF9; border: 1px solid rgba(91, 30, 50, .12); border-radius: 12px; }
html[data-look="crema"] .gv-faces__card h3 { font-family: "Cormorant Garamond", Georgia, serif; font-style: normal; font-weight: 500; color: #5B1E32; }
html[data-look="crema"] .gv-faces__card p, html[data-look="crema"] .gv-faces__ok { color: #4E3C40; }
html[data-look="crema"] .gv-link { color: #5B1E32; }