/* ============================================================
   Keylee's Cleaning Service — Base Stylesheet
   Design language: Foxterra-inspired warm editorial
   ============================================================ */

/* Reset
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

img, picture, video { max-width: 100%; display: block; height: auto; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }


/* Design tokens
   ----------------------------------------------------------- */
:root {
  /* Color */
  --bg:          #F5EFE6;   /* warm cream — primary background */
  --surface:     #FCFAF5;   /* near-white cream — cards, sections */
  --surface-2:   #EEE6D8;   /* slightly deeper cream — alt sections */
  --ink:         #1A1A1A;   /* near-black — primary text */
  --ink-soft:    #5C5550;   /* warm gray — secondary text */
  --ink-muted:   #8A827A;   /* muted — meta, captions */
  --accent:      #B85540;   /* terracotta — primary CTA */
  --accent-deep: #9A4030;   /* deeper terracotta — hover */
  --sage:        #7A8B70;   /* sage — trust accent */
  --sage-deep:   #5E6F55;   /* deeper sage — hover */
  --gold:        #C9A961;   /* warm gold — highlight */
  --sand:        #E6DDD0;   /* warm border / divider */
  --sand-deep:   #D4C9B6;   /* stronger divider */

  /* Type */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui:      'Outfit', 'Inter', -apple-system, sans-serif;

  /* Sizing — fluid */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.27vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.36vw, 1.41rem);
  --step-2:  clamp(1.44rem, 1.34rem + 0.50vw, 1.76rem);
  --step-3:  clamp(1.73rem, 1.58rem + 0.74vw, 2.20rem);
  --step-4:  clamp(2.07rem, 1.86rem + 1.07vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.18rem + 1.55vw, 3.43rem);
  --step-6:  clamp(2.99rem, 2.55rem + 2.21vw, 4.29rem);
  --step-7:  clamp(3.58rem, 2.97rem + 3.10vw, 5.36rem);

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  /* Layout */
  --container:    72rem;
  --container-sm: 48rem;
  --radius-s:     6px;
  --radius-m:     12px;
  --radius-l:     24px;
  --radius-pill:  999px;

  /* Motion */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur:    280ms;

  /* Shadow */
  --shadow-s: 0 1px 2px rgba(26, 26, 26, 0.04), 0 2px 8px rgba(26, 26, 26, 0.04);
  --shadow-m: 0 4px 12px rgba(26, 26, 26, 0.06), 0 12px 32px rgba(26, 26, 26, 0.08);
  --shadow-l: 0 12px 32px rgba(26, 26, 26, 0.10), 0 32px 64px rgba(26, 26, 26, 0.12);
}


/* Typography
   ----------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }

p { color: var(--ink-soft); max-width: 60ch; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--accent);
  display: inline-block;
  margin-bottom: var(--space-m);
}

.eyebrow--sage { color: var(--sage-deep); }

.display-serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
}


/* Accessibility — focus + motion
   ----------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Layout primitives
   ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.container--sm { max-width: var(--container-sm); }

.section {
  padding-block: var(--space-3xl);
}

.section--tight { padding-block: var(--space-2xl); }

.section--cream { background: var(--surface); }
.section--sand  { background: var(--surface-2); }
.section--ink   { background: var(--ink); color: var(--surface); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--surface); }
.section--ink p  { color: rgba(252, 250, 245, 0.78); }