/* ============================================================================
   Aesthetica Plastic Surgery — Summer Offers — Design Tokens
   Direction: Light editorial, plum-led. A bright lavender-white canvas with a
   single deep aubergine accent (#3c313d), cool slate support, and crisp serif
   display type. Calm, modern, refined — distinct from Méridian (warm-black/clay)
   and Vespera (emerald-noir). Merriweather (display) + Raleway (body).
   Load this first; summer-offers.css consumes these custom properties.
   ============================================================================ */

:root {
  /* ---- Raw palette (client-supplied) ---------------------------------- */
  --color-1: #333;      /* charcoal */
  --color-2: #fff;      /* white    */
  --color-3: #8f999b;   /* slate    */
  --color-4: #3c313d;   /* PRIMARY — aubergine / plum */
  --color-5: #c8c2cc;   /* lavender-gray */
  --color-6: #000;      /* black    */

  /* ---- Color (named + derived) ---------------------------------------- */
  --plum:       #3c313d;   /* primary: buttons, dark bands, base headings */
  --plum-deep:  #2b2430;   /* hover / depth (derived) */
  --plum-accent:#6e5a7f;   /* readable purple-plum for emphasis text + image frames (reads clearly plum, not black) */
  --plum-tint:  #efecf1;   /* faint plum wash for soft fills (derived) */
  --canvas:     #ffffff;   /* primary background */
  --mist:       #c8c2cc;   /* lavender-gray — borders, alt surfaces */
  --mist-soft:  #ece9ef;   /* lifted lavender tint for alt bands (derived) */
  --slate:      #8f999b;   /* muted secondary text, hairlines */
  --charcoal:   #333333;
  --black:      #000000;
  --ink:        #211d23;   /* near-black, plum-tinted — primary body text */

  /* Semantic aliases */
  --bg:        var(--canvas);
  --bg-alt:    var(--mist-soft);
  --bg-dark:   var(--plum);
  --text:      var(--ink);
  --text-muted:var(--slate);
  --on-dark:   var(--canvas);
  --on-dark-dim: var(--mist);
  --accent:    var(--plum);
  --line:      rgba(143, 153, 155, 0.35);    /* slate hairline on light */
  --line-dark: rgba(255, 255, 255, 0.18);    /* hairline on plum */

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Merriweather", Georgia, "Times New Roman", serif;  /* sturdy, readable editorial serif */
  --font-body:    "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (1.250 major third, 18px base) */
  --fs-display: clamp(2.5rem, 1.5rem + 3.9vw, 4.6rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2vw, 3.1rem);
  --fs-h2:      clamp(1.7rem, 1.35rem + 1.4vw, 2.4rem);
  --fs-h3:      1.5rem;
  --fs-lead:    clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-label:   0.78rem;

  --lh-tight: 1.08;   /* display / headings */
  --lh-snug:  1.2;
  --lh-body:  1.7;
  --tracking-label: 0.2em;   /* uppercase eyebrows / labels */

  /* ---- Spacing (8px base) -------------------------------------------- */
  --sp-1: 0.25rem;  /*  4 */
  --sp-2: 0.5rem;   /*  8 */
  --sp-3: 1rem;     /* 16 */
  --sp-4: 1.5rem;   /* 24 */
  --sp-5: 2.5rem;   /* 40 */
  --sp-6: 4rem;     /* 64 */
  --sp-7: 6rem;     /* 96 */
  --sp-8: 8rem;     /* 128 */

  /* ---- Layout --------------------------------------------------------- */
  --content-max:  1240px;
  --content-wide: 1440px;
  --gutter:    clamp(1.25rem, 0.6rem + 2vw, 2.5rem);
  --section-y: clamp(4rem, 2.4rem + 6vw, 8rem);
  --banner-h:  2.75rem;

  /* ---- Shape (soft-but-crisp) ---------------------------------------- */
  --radius:     4px;     /* offer cards / inputs */
  --radius-btn: 2px;
  --radius-pill:999px;
  --rule-w:     56px;    /* width of the slate/plum "seam" divider */

  /* ---- Motion (slow, restrained) ------------------------------------- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 260ms;
  --dur:      560ms;
  --dur-slow: 820ms;

  /* ---- Shadow (soft, low) -------------------------------------------- */
  --shadow:   0 24px 60px -28px rgba(60, 49, 61, 0.35);
  --shadow-sm:0 12px 32px -20px rgba(60, 49, 61, 0.4);

  /* ---- Image grade (light plum duotone, applied via .media--graded) --- */
  --grade-plum:  linear-gradient(150deg, rgba(60,49,61,0.16), rgba(143,153,155,0.10));
  --grade-scrim: linear-gradient(180deg, rgba(60,49,61,0) 40%, rgba(60,49,61,0.55));
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}