/* ============================================================
   Rare Botany — customization layer
   Edit THIS file to rebrand the template. Nothing else needs to change.
   Loaded before the inline <style> in index.html.
   ============================================================ */
:root{
  /* ---- Core palette ---------------------------------------- */
  --porcelain:#F7F4F1;      /* page background */
  --porcelain-2:#EFEAE5;    /* alternate section / surface */
  --ink:#1F2A26;            /* body + heading text, primary buttons */

  /* ---- Accents (pastel) ------------------------------------ */
  --blush:#EFD8D5;
  --sage:#B9C7B4;
  --sage-ink:#587355;       /* sage as small TEXT on porcelain/white (AA 4.8:1); fills keep --sage */
  --lilac:#D8D3E8;
  --kraft:#C8B6A0;

  /* ---- Accent "hot" variants ------------------------------
     Used ONLY by the signature blurred blobs behind the products.
     They sit under ~60px of blur and wash out to the pastels above,
     so they must stay more saturated than their pastel counterparts. */
  --blush-hot:#F0BDB6;
  --sage-hot:#9FB89A;
  --lilac-hot:#C4BCE4;
  --kraft-hot:#D9BE9A;

  /* ---- Ink tints (derived from --ink) ----------------------
     If you change --ink, update these four to match its RGB. */
  --ink-60:rgba(31,42,38,.70);   /* secondary text (5.3:1 on porcelain) */
  --ink-40:rgba(31,42,38,.68);   /* muted text, captions (4.8:1 on porcelain-2, the alternate surface) */
  --ink-12:rgba(31,42,38,.12);   /* borders, rules */
  --ink-06:rgba(31,42,38,.06);   /* hairlines, subtle fills */
  --porcelain-55:rgba(247,244,241,.55); /* muted text on --ink surfaces (5.1:1) */

  /* ---- Typography ------------------------------------------
     Change the Google Fonts <link> in index.html <head> to match. */
  --display:"Fraunces",Georgia,serif;                  /* headings */
  --sans:"Inter",system-ui,-apple-system,sans-serif;   /* body */
  --mono:"IBM Plex Mono",ui-monospace,monospace;       /* eyebrows, data, INCI */

  /* ---- Layout ---------------------------------------------- */
  --gut:clamp(20px,5vw,64px);  /* page gutter (responsive) */
  --maxw:1240px;               /* max content width */
  --r:18px;                    /* base corner radius */
}