/* ---------------------------------------------------------------------------
   Design tokens — ME Plastic Surgery
   Transcribed verbatim from the live site's inlined theme CSS (18 Aug 2026).
   Values are the SPEC. Do not invent new ones; if a value is missing, measure
   it from the .orig files rather than guessing.

   CLAUDE.md documents only --color-1..6 and two font families. The live site
   actually ships 45 tokens. The full set is below.
   --------------------------------------------------------------------------- */

:root {
  /* --- Brand ------------------------------------------------------------- */
  --color-1: #b09259;              /* gold — primary accent, links, buttons   */
  --color-hover-10: #cca762;       /* gold, lighter — hover state             */

  /* --- Neutrals ---------------------------------------------------------- */
  --color-2: #000000fe;            /* near-black — body text (note: 8-digit)  */
  --color-3: #fff;                 /* white                                   */
  --color-4: #ddd;                 /* light border                            */
  --color-5: #121212;              /* off-black — dark sections               */
  --color-6: #ccc;                 /* mid border                              */
  --color-7: #f4f4f4;              /* light background                        */
  --color-8: #999;                 /* muted text                              */
  --color-9: #bbb;                 /* muted text, lighter                     */
  --color-10: #7f7f7f;             /* body copy grey — the default <p> colour */
  --color-13: #f7f7f7;             /* light background, alt                   */

  /* --- Accents (used sparingly) ------------------------------------------ */
  --color-11: rgba(214, 149, 125, 1);
  --color-12: rgba(149, 149, 149, 1);

  /* --- Backgrounds ------------------------------------------------------- */
  --background-color-1: #999;
  --background-color-2: rgba(0, 0, 0, .6);   /* image overlay scrim          */
  --background-color-3: #fff;

  /* --- Border shorthands (caret / triangle helpers) ----------------------- */
  --border-color-1: transparent transparent transparent #fff;
  --border-color-2: transparent transparent transparent #cca762;

  /* --- Typefaces ---------------------------------------------------------- */
  --font-family-1: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-2: "Poiret One", "Century Gothic", "Questrial", sans-serif;

  /* --- Type scale --------------------------------------------------------
     Named as the source names them. The ordering is NOT monotonic — these are
     historical names, not a scale. Sorted by computed size in the comments.  */
  --font8:    .6em;      /*  9.6px */
  --font7:    .75em;     /* 12px   */
  --font2c:   .8em;      /* 12.8px */
  --font1:    1em;       /* 16px  — button text                              */
  --font1-0:  1.125em;   /* 18px  — body copy                                */
  --font1-1:  1.25em;    /* 20px   */
  --font1-2:  1.33em;    /* 21.3px */
  --font2:    1.438em;   /* 23px   */
  --font2-1:  1.563em;   /* 25px   */
  --font2-2:  1.875em;   /* 30px   */
  --font3:    2em;       /* 32px   */
  --font4:    2.5em;     /* 40px   */
  --font4-1:  2.6em;     /* 41.6px */
  --font4-2:  2.625em;   /* 42px   */
  --font9:    2.75em;    /* 44px   */
  --font5:    2.813em;   /* 45px   */
  --font0-2:  3.375em;   /* 54px   */
  --font6:    3.75em;    /* 60px   */
  --font0-1:  4.688em;   /* 75px   */
  --font0-02: 5em;       /* 80px   */
  --font0-01: 6.25em;    /* 100px — section display headings                 */
  --font0:    8.75em;    /* 140px — hero display                             */

  /* --- Layout ------------------------------------------------------------- */
  --main-width-container: 1743px;  /* content max-width                       */
  --big-width-container: 1920px;   /* full-bleed max-width                    */

  /* --- Motion -------------------------------------------------------------
     The source applies `all .3s ease-out` almost everywhere. Kept as a token
     so it can be tuned in one place and disabled for reduced-motion.        */
  --transition-base: .3s ease-out;
}

/* Respect the OS "reduce motion" setting. The original site does not do this;
   it is a correctness fix, not a design change, and is invisible otherwise. */
@media (prefers-reduced-motion: reduce) {
  :root { --transition-base: 0s; }
}