/* =========================================================
   CIELITO — 6-Palette token system (v5.5)
   3 style families x 2 genders = 6 palettes.
   Apply via data-palette="<style>-<gender>" on a card root.

   Tokens every template + Cinema reads:
     --pal-primary   main brand / heading color
     --pal-primary-2 secondary heading / accent text
     --pal-bg        card background base color
     --pal-bg-2      gradient secondary background
     --pal-bg-3      gradient tertiary background (horizon)
     --pal-surface   inner card / cream surface
     --pal-text      body text color
     --pal-text-soft muted body text
     --pal-accent    gold / metallic accent (lines, icons, CTA)
     --pal-accent-ink contrast text on accent fills
     --pal-papel-1..5 papel-picado flag colors
     --pal-border    floral cut-out border color
   ========================================================= */

/* ---------- Default (modern-boy / neutral) ---------- */
:root,
[data-palette="modern-boy"] {
  --pal-primary:    #2c6fb8;
  --pal-primary-2:  #4a82b6;
  --pal-bg:         #c9e0f4;
  --pal-bg-2:       #e9f1f9;
  --pal-bg-3:       #f4dca5;
  --pal-surface:    #fdf8ec;
  --pal-text:       #2d4761;
  --pal-text-soft:  #5a6b80;
  --pal-accent:     #c9a878;
  --pal-accent-ink: #ffffff;
  --pal-papel-1:    #2c6fb8;
  --pal-papel-2:    #e89f7a;
  --pal-papel-3:    #f4dca5;
  --pal-papel-4:    #7ec0e8;
  --pal-papel-5:    #c9a878;
  --pal-border:     #ffffff;
  --pal-hill-1:     #d8e6c8;
  --pal-hill-2:     #c8d8a8;
}

/* ---------- PASTELS ---------- */
[data-palette="pastel-boy"] {
  --pal-primary:    #5b8bbf;
  --pal-primary-2:  #7aa6cf;
  --pal-bg:         #cfe0ee;
  --pal-bg-2:       #e8f0f7;
  --pal-bg-3:       #fdf8ec;
  --pal-surface:    #fdf8ec;
  --pal-text:       #3a5570;
  --pal-text-soft:  #6a7d92;
  --pal-accent:     #c4912b;
  --pal-accent-ink: #ffffff;
  --pal-papel-1:    #cfe0ee;
  --pal-papel-2:    #b9d2e8;
  --pal-papel-3:    #fdf8ec;
  --pal-papel-4:    #e6d3a8;
  --pal-papel-5:    #c4912b;
  --pal-border:     #ffffff;
  --pal-hill-1:     #d8e6e2;
  --pal-hill-2:     #c4dcd8;
}
[data-palette="pastel-girl"] {
  --pal-primary:    #c87a86;
  --pal-primary-2:  #d99aa3;
  --pal-bg:         #f4d3d8;
  --pal-bg-2:       #fbeaec;
  --pal-bg-3:       #fdf8ec;
  --pal-surface:    #fdf8ec;
  --pal-text:       #6a4550;
  --pal-text-soft:  #8d6e76;
  --pal-accent:     #c4912b;
  --pal-accent-ink: #ffffff;
  --pal-papel-1:    #f4d3d8;
  --pal-papel-2:    #efc1c8;
  --pal-papel-3:    #fdf8ec;
  --pal-papel-4:    #e6d3a8;
  --pal-papel-5:    #c4912b;
  --pal-border:     #ffffff;
  --pal-hill-1:     #f0dde2;
  --pal-hill-2:     #e8cdd4;
}

/* ---------- MODERN (Pinterest terracotta / cobalt) ---------- */
[data-palette="modern-boy"] {
  /* same as :root default above */
}
[data-palette="modern-girl"] {
  --pal-primary:    #b46a55;
  --pal-primary-2:  #c4836f;
  --pal-bg:         #e8c4b8;
  --pal-bg-2:       #f3ddd3;
  --pal-bg-3:       #fdf8ec;
  --pal-surface:    #fdf8ec;
  --pal-text:       #5e3d33;
  --pal-text-soft:  #87645a;
  --pal-accent:     #c9a878;
  --pal-accent-ink: #ffffff;
  --pal-papel-1:    #b46a55;
  --pal-papel-2:    #e8c4b8;
  --pal-papel-3:    #fdf8ec;
  --pal-papel-4:    #d99a82;
  --pal-papel-5:    #c9a878;
  --pal-border:     #ffffff;
  --pal-hill-1:     #e3cdb0;
  --pal-hill-2:     #d8bd9e;
}

/* ---------- FOLK (bold Mexican papel picado) ---------- */
[data-palette="folk-boy"] {
  --pal-primary:    #1d4f8f;
  --pal-primary-2:  #2c6fb8;
  --pal-bg:         #cfe0ee;
  --pal-bg-2:       #e9f1f9;
  --pal-bg-3:       #f4dca5;
  --pal-surface:    #fdf8ec;
  --pal-text:       #14365f;
  --pal-text-soft:  #45607f;
  --pal-accent:     #e8a93d;
  --pal-accent-ink: #ffffff;
  --pal-papel-1:    #d96a8c;
  --pal-papel-2:    #e89f7a;
  --pal-papel-3:    #fdf8ec;
  --pal-papel-4:    #e8a93d;
  --pal-papel-5:    #1d4f8f;
  --pal-border:     #ffffff;
  --pal-hill-1:     #d8e6c8;
  --pal-hill-2:     #c8d8a8;
}
[data-palette="folk-girl"] {
  --pal-primary:    #c43d6e;
  --pal-primary-2:  #d4628a;
  --pal-bg:         #f6d9e2;
  --pal-bg-2:       #fbe9ee;
  --pal-bg-3:       #f9e6c0;
  --pal-surface:    #fdf8ec;
  --pal-text:       #7a2748;
  --pal-text-soft:  #9d5573;
  --pal-accent:     #e8a93d;
  --pal-accent-ink: #ffffff;
  --pal-papel-1:    #c43d6e;
  --pal-papel-2:    #e89f7a;
  --pal-papel-3:    #f4d26a;
  --pal-papel-4:    #fdf8ec;
  --pal-papel-5:    #e8a93d;
  --pal-border:     #ffffff;
  --pal-hill-1:     #f2dccb;
  --pal-hill-2:     #ecd0bb;
}

/* =========================================================
   Papel-picado floral cut-out border (inline SVG component)
   Renders on .papel-border element; uses currentColor so the
   white floral lace tints to var(--pal-border) on the parent.
   ========================================================= */
.papel-border {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--pal-border, #ffffff);
  z-index: 3;
}
.papel-border svg {
  position: absolute;
  display: block;
}
.papel-border .pb-edge {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.10));
}
/* edge thickness scales with --pb-size (default 14px) */
.papel-border { --pb-size: 14px; --pb-corner: 30px; }
.papel-border .pb-top    { top: 0;    left: 0; width: 100%; height: var(--pb-size); }
.papel-border .pb-bottom { bottom: 0; left: 0; width: 100%; height: var(--pb-size); transform: scaleY(-1); }
.papel-border .pb-left   { top: 0;    left: 0; height: 100%; width: var(--pb-size); }
.papel-border .pb-right  { top: 0;    right: 0; height: 100%; width: var(--pb-size); transform: scaleX(-1); }

/* corner clusters — denser detail */
.papel-border .pb-corners { position: absolute; inset: 0; }
.papel-border .pb-c {
  position: absolute;
  width: var(--pb-corner);
  height: var(--pb-corner);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.10));
}
.papel-border .pb-c svg { width: 100%; height: 100%; display: block; }
.papel-border .pb-c--tl { top: 0; left: 0; }
.papel-border .pb-c--tr { top: 0; right: 0; transform: scaleX(-1); }
.papel-border .pb-c--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.papel-border .pb-c--br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* =========================================================
   Palette picker UI (try-live)
   ========================================================= */
.palette-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--color-border, #e7e1d6);
  border-radius: 14px;
  background: var(--color-surface, #fbf8f2);
}
.palette-picker__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.palette-picker__caption {
  flex: 0 0 42px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8a8276);
}
.seg {
  display: inline-flex;
  background: var(--color-bg, #f1ece2);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex: 1 1 auto;
}
.seg__btn {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  padding: 7px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted, #8a8276);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.seg__btn.is-active {
  background: #ffffff;
  color: var(--color-text, #2c2620);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.seg__btn:hover:not(.is-active) { color: var(--color-text, #2c2620); }
.palette-picker__swatches {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 2px;
  padding-left: 54px;
}
.palette-picker__swatches .sw {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.10);
}

/* =========================================================
   Floral border sizing on the Cielito card + try-live phone
   ========================================================= */
.invite[data-template="cielito"] .papel-border { --pb-size: 11px; --pb-corner: 26px; }
#previewInvite.invite[data-template="cielito"] .papel-border { --pb-size: 12px; --pb-corner: 28px; }

/* Floral border only renders inside the Cielito template */
.papel-border { display: none; }
.invite[data-template="cielito"] > .papel-border { display: block; }