/* ============================================================
   REGARDEN — Brand tokens & shared component styles
   Primary direction: "Herbarium" — Modern Botanical Apothecary
   ============================================================ */

:root {
  /* — Core palette (warm, botanical, deliberately NOT eco-green) — */
  --bone:      #F3ECDD;  /* warm paper, primary ground            */
  --bone-2:    #EADFC9;  /* deeper paper / panels                 */
  --bone-3:    #E0D2B6;  /* tertiary paper                        */
  --ink:       #20251E;  /* near-black botanical ink, primary type*/
  --ink-soft:  #4A4D40;  /* muted ink for secondary copy          */
  --clay:      #BC6044;  /* terracotta — signature accent         */
  --clay-deep: #97462F;  /* deep terracotta                       */
  --orchid:    #7B5670;  /* muted plum — premium emotional hero   */
  --orchid-dp: #59384F;  /* deep plum                             */
  --honey:     #C2913B;  /* honey-ochre — nutrition / warmth      */
  --honey-dp:  #9A6F23;
  --sage:      #94A07E;  /* supporting muted green (subordinate)  */
  --sage-dp:   #6E7A58;
  --line:      rgba(32,37,30,0.16);

  /* — Type — */
  --f-display: "Bodoni Moda", "Times New Roman", serif;
  --f-serif:   "Cormorant Garamond", Georgia, serif;
  --f-sans:    "Hanken Grotesk", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* — Wordmark (tweakable: family / weight / tracking) — */
  --f-wordmark: "Hanken Grotesk", system-ui, sans-serif;
  --wm-weight:  800;
  --wm-track:   0.06em;
}

/* ---------- Reset within artboards ---------- */
.rg * { box-sizing: border-box; }
.rg {
  font-family: var(--f-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rg p { margin: 0; }

/* ---------- Wordmark ---------- */
.rg-wordmark {
  font-family: var(--f-wordmark);
  font-weight: var(--wm-weight);
  letter-spacing: var(--wm-track);
  line-height: 0.9;
  text-transform: uppercase;
  font-style: normal;
}
.rg-wordmark .tm {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: super;
}
/* RE·GARDEN editorial split */
.rg-split .re { color: var(--clay); }
.rg-split .dot { display: inline-block; transform: translateY(-0.06em); padding: 0 0.06em; }

/* ---------- Mono micro-labels ---------- */
.rg-mono {
  font-family: var(--f-mono);
  font-weight: 500;
  text-transform: uppercase;
}
.rg-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Hairline rules ---------- */
.rg-rule { height: 1px; background: var(--ink); opacity: 0.85; }
.rg-rule-thin { height: 1px; background: var(--line); }

/* ============================================================
   THE MARK — abstract petal-rosette "specimen seal"
   Built from clean CSS leaf primitives, rotated about a center.
   No illustrative SVG.
   ============================================================ */
.rg-rosette {
  position: relative;
  display: inline-block;
}
.rg-rosette .petal {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 0 100% 0 100%;
  background: currentColor;
  transform-origin: 0% 0%;
}
/* seed dot at center */
.rg-rosette .core {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  background: var(--bone);
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Apothecary seal ring (text-around-a-circle is faked with a bordered ring
   + straight micro-caps top & bottom — keeps it simple and legible) */
.rg-seal {
  position: relative;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rg-seal::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.45;
}

/* ---------- Concentric "living system" dot mark (Direction B) ---------- */
.rg-cells {
  border-radius: 50%;
  background:
    radial-gradient(circle, currentColor 22%, transparent 23%) center/100% 100% no-repeat;
  position: relative;
}

/* ---------- Trust badge row ---------- */
.rg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.rg-badge {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.rg-badge-dot { color: var(--line); }

/* ---------- Swatch ---------- */
.rg-swatch { border-radius: 3px; }

/* ---------- Striped placeholder for imagery ---------- */
.rg-photo {
  background:
    repeating-linear-gradient(135deg, rgba(32,37,30,0.05) 0 8px, rgba(32,37,30,0) 8px 16px),
    var(--bone-2);
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Crop / registration marks for label panels ---------- */
.rg-crop { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.rg-crop::before, .rg-crop::after { content:""; position:absolute; background: var(--ink-soft); opacity:.55; }
.rg-crop::before { width: 1px; height: 100%; }
.rg-crop::after  { height: 1px; width: 100%; }
.rg-crop.tl { top:-22px; left:-22px; }
.rg-crop.tr { top:-22px; right:-22px; }
.rg-crop.bl { bottom:-22px; left:-22px; }
.rg-crop.br { bottom:-22px; right:-22px; }

/* ---------- Tweak-driven global toggles ---------- */
.mark-open .rg-seal { border-color: transparent !important; }
.mark-open .rg-seal::after { display: none; }
.no-frames .rg-crop { display: none; }