/* ==========================================================================
   Theme: Zari
   Palette sampled from the dress-code photo: the wine sherwani, the champagne
   zari lehenga and the blush flowers of the venue.

   Semantic tokens (--bg, --text, --accent ...) are what components use.
   Scopes such as .on-wine re-point them, so a whole chapter changes colour
   without any component knowing.
   ========================================================================== */

[data-theme="zari"] {
  color-scheme: light;

  /* raw palette */
  --paper: #f7ede0;
  --paper-2: #efdcc4;
  --pearl: #fff8ee;
  --ink: #2b0b12;
  --wine: #5b2327;
  --wine-deep: #3a1218;
  --plum: #572432;
  --zari: #c9a06a;
  --zari-hi: #e6c888;
  --zari-ink: #7a5a26;
  --blush: #e8c4b4;
  --glow: #f6ca8f;

  /* semantic, on paper */
  --bg: var(--paper);
  --surface: var(--pearl);
  --text: var(--ink);
  --text-soft: #5f423f;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  --accent: var(--wine);
  --on-accent: #fbebd6;
  --focus: var(--wine);
  --name-ink: var(--wine);
  --ornament: var(--zari);
  --ornament-ink: var(--zari-ink);

  /* The two woven details of the stationery, as flat filled tiles.
     karai: the zari border of the wedding veshti and saree (28 x 16).
     scallop: the cut edge at the top of the card's back (48 x 24, deep wine). */
  --karai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'%3E%3Cg fill='%23c9a06a'%3E%3Crect width='28' height='2'/%3E%3Crect y='14' width='28' height='2'/%3E%3Cpath d='M14 3.5 21 8 14 12.5 7 8z'/%3E%3Ccircle cx='0' cy='8' r='1.6'/%3E%3Ccircle cx='28' cy='8' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath fill='%233a1218' d='M0 24A24 24 0 0 1 48 24z'/%3E%3C/svg%3E");

  /* signature settings read by JS and CSS */
  --gallery-transition: wipe;
  --gallery-interval: 5200ms;
}

/* a chapter on the deep wine of the sherwani */
.on-wine {
  --bg: var(--wine-deep);
  --surface: var(--wine);
  --text: #f4e3cb;
  --text-soft: #dcc5a6;
  --line: color-mix(in srgb, #f4e3cb 24%, transparent);
  --line-strong: color-mix(in srgb, #f4e3cb 45%, transparent);
  --accent: var(--zari-hi);
  --on-accent: var(--wine-deep);
  --focus: var(--zari-hi);
  --name-ink: #f4e3cb;
  --ornament: var(--zari-hi);
  --ornament-ink: var(--zari-hi);
  background: var(--bg);
  color: var(--text);
}

/* a chapter on deeper champagne; cards on it are pearl */
.on-champagne {
  --bg: var(--paper-2);
  --surface: var(--pearl);
  --line: color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--bg);
}

/* the printed card itself: pearl stock, wine ink, zari print */
.on-pearl {
  --bg: var(--pearl);
  --surface: var(--paper);
  --text: var(--ink);
  --text-soft: #5f423f;
  --accent: var(--wine);
  --on-accent: #fbebd6;
  --focus: var(--wine);
  --name-ink: var(--wine);
  --ornament: var(--zari);
  --ornament-ink: var(--zari-ink);
  background: var(--bg);
  color: var(--text);
}