/* =========================================================================
   Evie's Alterations — Core Design Tokens  (v2 — logo-led)
   Boutique alterations & tailoring studio · Pacific Northwest
   Built around the chosen logo: plum-purple #702471 + paired green,
   on a pale lavender ground, with delicate line-art + sparkle motifs.
   ========================================================================= */

/* --- Brand fonts ---------------------------------------------------------
   The brand uses commercial faces "Quartet BC" (display) and "Easy BC"
   (body). They are NOT web-hosted. Drop the licensed files into
   assets/fonts/ (woff2 preferred) and these @font-face blocks pick them up
   automatically — no other change needed. Until then, Jost + Mulish (loaded
   below from Google) stand in as close substitutes via the font stacks.
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

@font-face { font-family: 'Quartet BC'; font-weight: 300 600; font-style: normal;
  src: url('assets/fonts/QuartetBC.woff2') format('woff2'),
       url('assets/fonts/QuartetBC.woff')  format('woff'),
       url('assets/fonts/QuartetBC.otf')   format('opentype');
  font-display: swap; }
@font-face { font-family: 'Easy BC'; font-weight: 300 700; font-style: normal;
  src: url('assets/fonts/EasyBC.woff2') format('woff2'),
       url('assets/fonts/EasyBC.woff')  format('woff'),
       url('assets/fonts/EasyBC.otf')   format('opentype');
  font-display: swap; }

:root {
  /* ---------------------------------------------------------------------
     COLOR — Lavender paper grounds (the logo's own background tones)
     --------------------------------------------------------------------- */
  --paper:        #F8F7FF;  /* page default — matches the logo lockup bg   */
  --lavender:     #F2EFFa;  /* faint lavender ground                       */
  --lilac-wash:   #EFE7F4;  /* raised / alt sections                       */
  --lilac:        #E6D7EC;  /* soft purple fill, borders on light          */
  --lilac-deep:   #D7C2E0;  /* deeper lilac — dividers                     */

  /* ---------------------------------------------------------------------
     COLOR — Plum / purple (PRIMARY brand color — #702471)
     --------------------------------------------------------------------- */
  --purple:        #702471;  /* OFFICIAL primary — buttons, links, accents  */
  --purple-mid:    #8A3A8B;  /* hover / lighter                             */
  --orchid:        #A95DAA;  /* bright accent                               */
  --orchid-light:  #CE9FCF;  /* light accent                               */
  --plum:          #531A55;  /* deep plum — secondary dark                  */
  --plum-deep:     #3A1240;  /* deepest aubergine — dark grounds, footer    */
  --purple-tint:   #EFE2F0;  /* faint purple wash on light                  */

  /* ---------------------------------------------------------------------
     COLOR — Paired green (SECONDARY — eucalyptus/sage, harmonized)
     --------------------------------------------------------------------- */
  --green:        #3F6B52;  /* primary green — secondary actions, accents  */
  --green-mid:    #4F805F;  /* hover                                       */
  --green-deep:   #294736;  /* dark green ground (feature sections)        */
  --sage:         #8FA890;  /* soft sage accent / light                    */
  --sage-soft:    #B7C7B6;  /* lighter sage                                */
  --green-wash:   #E3ECE3;  /* faint green wash on light                   */

  /* ---------------------------------------------------------------------
     COLOR — Ink / neutrals (cool-warm, faint plum cast)
     --------------------------------------------------------------------- */
  --ink:          #2C2630;  /* primary text — plum-tinted near-black        */
  --ink-soft:     #564C5C;  /* secondary text                              */
  --muted:        #837A88;  /* captions / meta                             */
  --muted-light:  #A89FAC;  /* placeholder / disabled                      */

  /* ---------------------------------------------------------------------
     COLOR — Semantic roles
     --------------------------------------------------------------------- */
  --bg:            var(--paper);
  --bg-raised:     var(--lilac-wash);
  --bg-sunken:     var(--lavender);
  --bg-inverse:    var(--plum-deep);
  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  --text-subtle:   var(--muted);
  --text-inverse:  #F6EFF7;
  --text-on-dark-muted: #CDBBD0;
  --accent:        var(--purple);
  --accent-2:      var(--green);
  --border:        rgba(44, 38, 48, 0.12);
  --border-strong: rgba(44, 38, 48, 0.22);
  --border-purple: rgba(112, 36, 113, 0.20);
  --border-on-dark: rgba(246, 239, 247, 0.18);

  --success: #3F6B52;
  --error:   #9C4A5A;

  /* ---------------------------------------------------------------------
     TYPE — Families (real brand fonts first, substitutes as fallback)
     --------------------------------------------------------------------- */
  --font-display: 'Quartet BC', 'Jost', 'Century Gothic', sans-serif;
  --font-body:    'Easy BC', 'Mulish', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* TYPE — Fluid display scale (geometric, light, airy like the wordmark) */
  --fs-display:   clamp(3rem, 5.6vw, 5rem);
  --fs-h1:        clamp(2.4rem, 4.2vw, 3.6rem);
  --fs-h2:        clamp(1.9rem, 3vw, 2.6rem);
  --fs-h3:        clamp(1.35rem, 2vw, 1.7rem);
  --fs-lead:      clamp(1.2rem, 1.6vw, 1.45rem);

  /* TYPE — Body scale */
  --fs-body-lg:   1.1875rem;
  --fs-body:      1.0625rem;
  --fs-body-sm:   0.9375rem;
  --fs-caption:   0.8125rem;
  --fs-eyebrow:   0.75rem;

  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

  /* TYPE — Tracking (the logo is VERY wide-tracked in caps) */
  --track-logo:    0.34em;   /* "ALTERATIONS" treatment */
  --track-eyebrow: 0.26em;
  --track-caps:    0.16em;
  --track-tight:  -0.005em;

  --lh-display: 1.06; --lh-heading: 1.16; --lh-body: 1.65; --lh-tight: 1.3;

  /* SPACING — 4px base */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --measure: 66ch; --container: 1200px; --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 64px);

  /* RADII — soft, a touch more rounded to match the friendly line-art logo */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* ELEVATION — soft, cool plum-tinted shadows */
  --shadow-sm: 0 1px 2px rgba(58,18,64,0.06), 0 1px 3px rgba(58,18,64,0.05);
  --shadow-md: 0 2px 8px rgba(58,18,64,0.07), 0 8px 20px rgba(58,18,64,0.08);
  --shadow-lg: 0 8px 22px rgba(58,18,64,0.09), 0 22px 48px rgba(58,18,64,0.12);

  /* MOTION */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:140ms; --dur:240ms; --dur-slow:440ms;
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================= */
.t-eyebrow {
  font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--purple);
}
.t-display {
  font-family: var(--font-display); font-size: var(--fs-display); font-weight: 300;
  line-height: var(--lh-display); letter-spacing: var(--track-tight); color: var(--text);
}
.t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 300; line-height: var(--lh-heading); color: var(--text); }
.t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; line-height: var(--lh-heading); color: var(--text); }
.t-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-tight); color: var(--text); }
.t-lead { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; color: var(--text-muted); }
.t-body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); color: var(--text-muted); }
.t-body-sm { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-subtle); }
.t-caption { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-subtle); }

body.evie { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }