/* =====================================================================
   Palette options for review — two families, three strengths each.
   A ("ים תיכוני") is the default in styles.css; every block below only
   overrides colour tokens. Switch with the floating picker, or add
   ?palette=a2|a3|b|b2|b3 to any URL.
   Once a palette is chosen, move its values into :root in styles.css
   and delete this file + palette-picker.js.
   ===================================================================== */

/* ---------- Family A: sea turquoise, coral, sun ---------- */

/* A2 — A בהיר: the same hues, lighter and more luminous */
html[data-palette="a2"] {
  --page: #FBFDFD;
  --primary: #3FD9D6;
  --primary-hover: #2CCBC8;
  --primary-strong: #0FA3A4;
  --primary-ink: #08797B;
  --on-primary: #064543;
  --primary-tint: #EEFBFB;
  --primary-tint-2: #D6F6F5;
  --primary-border: #A8EDEB;
  --primary-shadow: rgba(40, 200, 196, .55);

  --accent: #FF7A88;
  --accent-deep: #E02D47;
  --accent-hover: #C9223B;
  --on-accent: #4A0A14;
  --accent-tint: #FFF2F4;

  --highlight: #FFD45C;
  --highlight-tint: #FFF8E3;
  --highlight-ink: #9A6A00;

  --sale: #E02D47;
  --sale-soft: #FF5A6E;
  --sale-tint: #FFF2F4;

  --on-photo: #8FF3F1;
}

/* A3 — A פסטל: the same hues, soft pastel */
html[data-palette="a3"] {
  --page: #FCFEFE;
  --primary: #7FE3E0;
  --primary-hover: #66DAD6;
  --primary-strong: #0FA3A4;
  --primary-ink: #08797B;
  --on-primary: #0A4A48;
  --primary-tint: #F1FCFC;
  --primary-tint-2: #DDF7F6;
  --primary-border: #B5EEEC;
  --primary-shadow: rgba(90, 210, 206, .5);

  --accent: #FF9AA6;
  --accent-deep: #E02D47;
  --accent-hover: #C9223B;
  --on-accent: #5A1220;
  --accent-tint: #FFF4F6;

  --highlight: #FFE08A;
  --highlight-tint: #FFF9E8;
  --highlight-ink: #9A6A00;

  --sale: #E02D47;
  --sale-soft: #FF5A6E;
  --sale-tint: #FFF4F6;

  --on-photo: #A9F3F1;
}

/* ---------- Family B: process cyan, magenta, yellow ---------- */

/* B — צבעי הדפוס */
html[data-palette="b"] {
  --page: #FAFBFC;
  --primary: #00AEEF;
  --primary-hover: #0099D6;
  --primary-strong: #0A8FC4;
  --primary-ink: #0072A8;
  --on-primary: #062A3D;
  --primary-tint: #E6F6FD;
  --primary-tint-2: #C9ECFB;
  --primary-border: #8ED5F4;
  --primary-shadow: rgba(0, 140, 200, .6);

  --accent: #EC008C;
  --accent-deep: #CC0077;
  --accent-hover: #B0006A;
  --on-accent: #FFFFFF;
  --accent-tint: #FDE7F3;

  --highlight: #FFE11A;
  --highlight-tint: #FFF9D9;
  --highlight-ink: #806300;

  --on-photo: #7FD8FF;
}

/* B2 — B בהיר: lighter cyan and pink-magenta */
html[data-palette="b2"] {
  --page: #FBFDFE;
  --primary: #33C3F5;
  --primary-hover: #1DB6EC;
  --primary-strong: #0A8FC4;
  --primary-ink: #0072A8;
  --on-primary: #05324A;
  --primary-tint: #EBF8FE;
  --primary-tint-2: #D0F0FC;
  --primary-border: #9EDDF7;
  --primary-shadow: rgba(20, 170, 230, .5);

  --accent: #FF3DA8;
  --accent-deep: #CC0077;
  --accent-hover: #B0006A;
  --on-accent: #FFFFFF;
  --accent-tint: #FFEAF5;

  --highlight: #FFEA4D;
  --highlight-tint: #FFFADF;
  --highlight-ink: #806300;

  --sale: #CC0077;
  --sale-soft: #FF3DA8;
  --sale-tint: #FFEAF5;

  --on-photo: #8FE0FF;
}

/* B3 — B פסטל: sky blue, candy pink, lemon */
html[data-palette="b3"] {
  --page: #FCFDFE;
  --primary: #7DD6F8;
  --primary-hover: #62CCF5;
  --primary-strong: #0A8FC4;
  --primary-ink: #0072A8;
  --on-primary: #06364E;
  --primary-tint: #EEF9FE;
  --primary-tint-2: #DAF2FD;
  --primary-border: #B3E6FA;
  --primary-shadow: rgba(80, 190, 240, .5);

  --accent: #FF8CCB;
  --accent-deep: #CC0077;
  --accent-hover: #B0006A;
  --on-accent: #5A0634;
  --accent-tint: #FFF0F8;

  --highlight: #FFF07A;
  --highlight-tint: #FFFBE5;
  --highlight-ink: #806300;

  --sale: #CC0077;
  --sale-soft: #EC008C;
  --sale-tint: #FFF0F8;

  --on-photo: #A8E6FF;
}

/* ---------- Floating palette picker (review tool) ---------- */
.palette-picker { position: fixed; z-index: 60; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06); font-size: 13px; }
.palette-picker__label { padding-inline: 8px 4px; color: #6E7380; white-space: nowrap; }
.palette-picker__sep { width: 1px; height: 22px; background: #E6E8EC; margin-inline: 4px; flex: none; }
.palette-picker button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 6px; border-radius: 999px; font-weight: 600; color: #23262F; white-space: nowrap; }
.palette-picker button:hover { background: #F3F5F7; }
.palette-picker button[aria-pressed="true"] { background: #23262F; color: #fff; }
.palette-picker__dots { display: inline-flex; }
.palette-picker__dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; margin-inline-start: -5px; }
.palette-picker__dots i:first-child { margin-inline-start: 0; }
@media (max-width: 767px) {
  .palette-picker { bottom: 74px; max-width: calc(100vw - 24px); overflow-x: auto; }
  .palette-picker__label, .palette-picker__name { display: none; }
  .palette-picker button { padding: 0 8px; }
}