/* ═══════════════════════════════════════════════════════════════════
   EDIT LABS — design tokens
   ═══════════════════════════════════════════════════════════════════
   Single source of truth. This block was previously copy-pasted into 57
   HTML files; a colour change is now a one-file edit.

   Palette (sampled from the brand assets in "Thamara Website"):
     orchid  #D7A0E5   lilac  #E7C0F1   chartreuse #EEFA95
     yellow  #F5F196   cream  #F5F1D1   brown      #8E6F50
     pink    #F3BDDF   espresso ≈#5C3A1E (logo wordmark)

   ── Why the token NAMES look wrong ──────────────────────────────────
   These names come from the dark green site this was forked from and are
   kept because ~1,500 var() references depend on them. Their VALUES are
   remapped; their ROLES are unchanged. Read them as roles, not colours:

     --bg-dark    page background        (body, hero)      136 fills
     --charcoal   chrome band            (footer, .ann)    104 fills
     --bg-card    card surface                             282 fills
     --cream*     INK — text and hairlines, not a surface  1,700+ uses
     --bg-deep    ink on an accent chip                     31 text uses
     --lime       accent / link / price text                914 text uses
     --green-primary  solid button fill, always with #FFF text
     --green-glow glow + highlight FILL                     117 fills

   Two tokens carry a dual role and were normalised in the markup rather
   than here: `background:var(--bg-deep)` became --charcoal (2 sites), and
   `color:var(--charcoal)` became --bg-deep (1 site).

   ── Contrast ───────────────────────────────────────────────────────
   The page is light, so every text token is checked against the page
   background #FDFAFB. Ratios noted inline. The old palette put light text
   on dark; the same tokens now put dark text on light, which is why the
   alpha overlays are espresso-based rather than white-based — a
   white-based overlay is invisible here.
   ─────────────────────────────────────────────────────────────────── */

:root{
  /* ── Surfaces ─────────────────────────────────────────────────── */
  --bg-dark:#FDFAFB;          /* page background */
  --bg-deep:#3D2415;          /* ink on accent chips (see note above) */
  --bg-mid:#F6F0DE;           /* warm cream band */
  --bg-card:#FFFFFF;          /* card surface */
  --bg-testimonial:#F2E4F8;   /* lilac band */
  --bg-light:#FBF6EA;         /* warm band */
  --bg-white:#FFFFFF;
  --charcoal:#E7C0F1;         /* chrome: footer + announcement bar (logo lilac) */
  --bg-darker:#DCAEE9;        /* deeper chrome */

  /* ── Ink ──────────────────────────────────────────────────────────
     --cream was the light text on a dark page. It is now the espresso
     text on a light page; the alphas step down from it. */
  --cream:#3D2415;                    /* primary text        13.1:1 */
  --cream-70:rgba(61,36,21,.84);      /* secondary text       8.9:1 */
  --cream-50:rgba(61,36,21,.78);      /* muted text           4.9:1 — AA body */
  --cream-30:rgba(61,36,21,.74);      /* tertiary / decorative       */
  --cream-15:rgba(61,36,21,.15);      /* borders                     */
  --cream-08:rgba(61,36,21,.09);      /* subtle borders              */
  --cream-06:rgba(61,36,21,.07);      /* hairline dividers   623 uses */
  --white:#FFF;

  /* ── Brand ────────────────────────────────────────────────────────
     Orchid at full strength (#D7A0E5) is ~1.9:1 on white — fine as a
     fill, unusable as text. --lime carries 914 text uses, so the brand
     is deepened for anything that has to be read. */
  --green-primary:#7A3E9E;    /* solid button fill; #FFF on it   7.6:1 */
  --green-sec:#9B59B6;        /* softer orchid                        */
  --green-dark:#4A2560;       /* deepest orchid                       */
  --green-glow:#EEFA95;       /* chartreuse — glow + highlight FILL    */
  --lime:#6B3589;             /* accent / link / price text      7.6:1 */
  --lime-dim:rgba(122,62,158,.10);
  --lime-hover:#66318A;
  --lime-border:rgba(122,62,158,.22);
  --mint:#EEFA95;

  /* ── Text roles ───────────────────────────────────────────────── */
  --text-dark-body:rgba(61,36,21,.80);   /* body copy            6.9:1 */
  --text-dark-label:#7A3E9E;             /* eyebrow labels             */
  --text-light-heading:#3D2415;
  --text-light-body:rgba(61,36,21,.78);

  /* ── Accents ──────────────────────────────────────────────────────
     --gold is read as text on cards (.ic h4, list bullets) AND used as a
     chip fill, so it is a mid amber rather than the pale label yellow. */
  --gold:#8F6210;             /* amber, readable as text         5.1:1 */
  --lavender:#D7A0E5;
  --peach:#F2C6A5;
  --sky:#A8D8EA;
  --rose:#F3BDDF;
  --lemon:#EAF6A2;
  --red:#C2334D;
  --green:#2F8F5B;            /* success only — not a brand colour     */

  /* ── Wordmark ─────────────────────────────────────────────────────
     "Edit" + "LABS." on the lilac chrome, mirroring the logo's two-tone
     split. Chartreuse on lilac is ~1.2:1 — true to the logo but illegible
     at 17px — so the accent half is a deepened olive instead. */
  --wordmark-a:#3D2415;       /* "Edit"                         10.4:1 on lilac */
  --wordmark-b:#EEFA95;       /* "LABS."  brand chartreuse, matches logo/vial — client-chosen; low contrast on lilac by design */

  /* ── Type + shape (unchanged) ─────────────────────────────────── */
  --heading:'Montserrat',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Plus Jakarta Sans',-apple-system,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --pill:50px;

  /* ── Aliases ──────────────────────────────────────────────────────
     /account/ and /admin/ shipped their own token vocabulary for the same
     visual system. Aliasing folds them onto the palette above without
     touching a single var() call in those files. */
  --bg:var(--bg-dark);
  --bg2:var(--bg-mid);
  --bg3:var(--bg-testimonial);
  --bg4:var(--bg-card);
  --card:var(--bg-card);
  --text:var(--cream);
  --border:var(--cream-15);
  --accent:var(--lime);
  --green-dim:var(--lime-dim);
  --green-hover:var(--lime-hover);
  --green-border:var(--lime-border);
  --red-dim:rgba(194,51,77,.10);
  --green-ok:#2F8F5B;
  --green-ok-dim:rgba(47,143,91,.10);
  --gold-dim:rgba(154,106,16,.10);
  --blue:#3A6FB0;
  --purple:#7A3E9E;
  --orange:#B4622A;
  --cyan:#1E7F8C;
  --sb:260px;
}