/* Local kit utilities — imports root design system tokens */
/* Merryweather Cleaning Services — Soft Modern Redesign
   Palette evolved from existing navy/pink toward warmer, softer tones.
   Imports: Fraunces (display serif), Inter (body sans).
*/

:root {
  /* ── PAPER + INK NEUTRALS ─────────────── */
  --paper:        #FAF6F1;   /* primary canvas — warm off-white */
  --paper-2:      #F2ECE3;   /* secondary surface, cards on paper */
  --paper-3:      #E8E0D2;   /* sectioned surfaces, hairlines */
  --ink:          #1F2533;   /* primary text, soft near-black slate */
  --ink-2:        #4A5160;   /* secondary text */
  --ink-3:        #7A8090;   /* tertiary, captions */
  --rule:         #E5DFD2;   /* default border */
  --rule-2:       #D5CCBC;   /* stronger border */

  /* ── BRAND ACCENTS ────────────────────── */
  --rose:         #C16380;   /* primary brand accent — softened pink */
  --rose-deep:    #9E4E68;   /* hover/press */
  --rose-tint:    #F4E4EA;   /* tinted surface */
  --rose-mist:    #FBF1F4;   /* lightest tint */

  --sage:         #7A8E7B;   /* secondary accent — calm sage */
  --sage-deep:    #5C6F5E;
  --sage-tint:    #E1E6DD;
  --sage-mist:    #F0F2EB;

  --sky:          #5C7E9E;   /* tertiary — soft slate-blue */
  --sky-tint:     #DCE5EE;

  /* ── SEMANTIC ─────────────────────────── */
  --success:      #5C8C6F;
  --warning:      #C49858;
  --error:        #B4575E;

  /* ── RADII ────────────────────────────── */
  --r-xs:  6px;
  --r-sm:  10px;
  --r:     14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;

  /* ── ELEVATION ────────────────────────── */
  --sh-1: 0 1px 2px rgba(31,37,51,0.04), 0 1px 3px rgba(31,37,51,0.06);
  --sh-2: 0 4px 14px rgba(31,37,51,0.06), 0 2px 6px rgba(31,37,51,0.04);
  --sh-3: 0 12px 32px rgba(31,37,51,0.08), 0 4px 10px rgba(31,37,51,0.05);
  --sh-4: 0 24px 60px rgba(31,37,51,0.12), 0 8px 18px rgba(31,37,51,0.06);

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

  /* ── MOTION ───────────────────────────── */
  --ease:      cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:    180ms;
  --d:         260ms;
  --d-slow:    420ms;

  /* ── TYPE FAMILIES ────────────────────── */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ── TYPE TOKENS (semantic) ──────────── */
  --t-eyebrow:        500 0.72rem/1.4 var(--font-body);
  --t-eyebrow-spacing: 0.18em;

  --t-h1:  600 clamp(2.4rem, 5.6vw, 4.4rem)/1.04 var(--font-display);
  --t-h2:  500 clamp(1.9rem, 3.6vw, 2.8rem)/1.1 var(--font-display);
  --t-h3:  500 clamp(1.4rem, 2.2vw, 1.7rem)/1.25 var(--font-display);
  --t-h4:  600 1.05rem/1.35 var(--font-body);

  --t-lead:    400 1.18rem/1.62 var(--font-body);
  --t-body:    400 1rem/1.65 var(--font-body);
  --t-small:   400 0.88rem/1.55 var(--font-body);
  --t-caption: 500 0.78rem/1.45 var(--font-body);

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-eyebrow:  0.18em;
}

/* ── BASE TYPE STYLES ────────────────────── */
body {
  font: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font: var(--t-h1); letter-spacing: var(--tracking-display); color: var(--ink); text-wrap: balance; }
h2, .h2 { font: var(--t-h2); letter-spacing: var(--tracking-display); color: var(--ink); text-wrap: balance; }
h3, .h3 { font: var(--t-h3); letter-spacing: var(--tracking-tight); color: var(--ink); }
h4, .h4 { font: var(--t-h4); color: var(--ink); }

.lead    { font: var(--t-lead);    color: var(--ink-2); text-wrap: pretty; }
.small   { font: var(--t-small);   color: var(--ink-2); }
.caption { font: var(--t-caption); color: var(--ink-3); }

.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rose);
}

/* Display tweaks: Fraunces optical sizing + soft italic for emphasis */
.display-italic { font-style: italic; font-feature-settings: 'ss01'; }
.display-softness { font-variation-settings: 'SOFT' 100, 'WONK' 1; }


* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.bg-paper-2 { background: var(--paper-2); }

.eyebrow {
  display: inline-block;
  font: 500 0.78rem/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
}
.eyebrow.sage { color: var(--sage-deep); }
.eyebrow.sky { color: #3F5E7E; }

.lead { font: 400 1.12rem/1.65 var(--font-body); color: var(--ink-2); text-wrap: pretty; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font: 600 0.94rem/1 var(--font-body);
  transition: all 220ms var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  cursor: pointer;
}
.btn svg { display: block; flex-shrink: 0; }
.btn-primary { background: var(--rose); color: #fff; box-shadow: 0 1px 2px rgba(193,99,128,0.3), 0 8px 20px -8px rgba(193,99,128,0.4); }
.btn-primary:hover { background: var(--rose-deep); transform: translateY(-1px); }
.btn-secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); }
.btn-secondary:hover { border-color: var(--ink-3); background: var(--paper-2); }

.chip {
  display: inline-block;
  padding: 5px 12px; border-radius: 100px;
  font: 500 0.75rem/1.4 var(--font-body);
  background: var(--rose-tint); color: var(--rose-deep);
}
.chip.sage { background: var(--sage-tint); color: var(--sage-deep); }
.chip.sky { background: var(--sky-tint); color: #3F5E7E; }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl, 20px);
  box-shadow: var(--sh-1, 0 1px 2px rgba(31,37,51,0.04));
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-2, 0 4px 12px rgba(31,37,51,0.06)); }