/**
 * How the botanical motifs are painted.
 *
 * Shared rather than living in the guest stylesheet, because the admin console
 * draws the same motifs in its template gallery. Two copies drifted apart the
 * moment the gallery was added — the console rendered every flower as a black
 * outline, since only the guest page had ever been given the fills.
 *
 * The shapes themselves come from /shared/botanicals.js.
 */

/* ── botanical palette ──
   Defaults so a motif is never invisible; each template overrides what it
   needs. The petal ramp runs dark at the outside to pale at the middle, which
   is what gives a flat vector bloom its depth. */
:root {
  --bot-petal: var(--rose-deep, #A8506A);
  --bot-petal-1: var(--rose, #C9748A);
  --bot-petal-2: #DA8FA1;
  --bot-petal-3: #E8AEBB;
  --bot-petal-edge: transparent;
  --bot-leaf: #7E9A72;
  --bot-stem: #6C8A62;
  --bot-core: #C9A24A;
  --bot-fruit: #4C5833;
}

.bot-petal { fill: var(--bot-petal); stroke: var(--bot-petal-edge); stroke-width: .8; }
.bot-petal--1 { fill: var(--bot-petal-1); }
.bot-petal--2 { fill: var(--bot-petal-2); }
.bot-petal--3 { fill: var(--bot-petal-3); }
.bot-petal--back { fill: var(--bot-petal); fill-opacity: .7; }
.bot-core { fill: var(--bot-core); }
.bot-coil { fill: none; stroke: var(--bot-petal); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.bot-leaf { fill: var(--bot-leaf); }
.bot-vein { fill: none; stroke: var(--paper); stroke-width: .9; opacity: .45; }
.bot-stem { fill: none; stroke: var(--bot-stem); stroke-width: 2.2; stroke-linecap: round; }
.bot-stem--thick { stroke-width: 3.6; stroke: var(--bot-stem); }
.bot-fruit { fill: var(--bot-fruit); }