/* globals.css */
/* Reset, :root design system variables, and base HTML element styles */
/* No component styles. No section styles. Foundation only. */

/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

ul,
ol {
  list-style: none;
}

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

/* ============================================================
   DESIGN SYSTEM — :root VARIABLES
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Colors — Base Palette
     ---------------------------------------------------------- */

  /* Page background — warm cream, near flat */
  --color-background:       #FFFCF2;
  --color-background-darker: #f8f4e8;
  --color-background-darker-alt: #dedcce;
  --color-background-alt:   #FFFCF2;   /* cards, slightly darker */

  /* Dark sections — CTA and Footer */
  --color-dark-section:     #442E1C;
  --color-dark-section-alt: #856950;      /* hover states on dark bg */

  /* Accent — deep forest green */
  --color-accent:           #9AD6AF;
  --color-accent-dark:      #12BFCE;   /* hover state */
  --color-accent-secondary: #4f3825;
  --color-accent-light:     rgb(178, 226, 193);      /* hover — goes lighter */

  /* Sage — secondary accent, used sparingly */
  --color-sage:             #788c5d;

  /* Text */
  --color-text-primary:     #e89467;
  --color-text-secondary:   #86573e;
  --color-text-muted:       #f5f1e6;
  --color-text-lighter:     #ffffff;
  --color-text-inverted:    #676044;   /* on dark sections */

  /* Borders */
  --color-border:           #e4e2db;
  --color-border-dark:      #d4d1c7;   /* hover border on cards */
  --color-border-inverted:  #faf9f533; /* on dark sections */

  /* Surface */
  --color-surface:          #f2efe8;

  /* States */
  --color-error:            #a84e2e;
  --color-success:          #48643c;

  /* Overlay */
  --color-overlay:          #19191580;

  /* Focus rings */
  --color-accent-focus-ring: #2a3d2840;
  --color-error-focus-ring:  #a84e2e33;

  /* ----------------------------------------------------------
     Hero gradient — only section with real gradient
     Left: cream, drifts toward sage on the right
     ---------------------------------------------------------- */

  --gradient-hero: linear-gradient(
    95deg,
    #FFFCF2 0%,
    #dedcce 150%
  );

    --gradient-dark-section: linear-gradient(
    95deg,
    #442E1C 0%,
    #442E1C 50%,
    #3b2717 150%
  );

  --gradient-services: linear-gradient(
    135deg,
    #FFFCF2 0%,
    #f1eee3 100%
  );

  --gradient-cta: linear-gradient(
    135deg,
    #F8B28C 0%,
    #dfa07f 50%,
    #e5a07b 100%
  );

  --gradient-reviews:linear-gradient(
    135deg,
    #eaa27b 0%,
    #e09d79 50%,
    #f5ae89 100%
  );

   --gradient-button: linear-gradient(
    135deg,
    #9AD6AF 0%,
    #a5e0ba 50%,
    #b0d7be 100%
  );

   --gradient-button-hover: linear-gradient(
    135deg,
    #92cba6 0%,
    #a1d9b5 50%,
    #a6cab4 100%
  );
  
  /* ----------------------------------------------------------
     Typography — Families
     ---------------------------------------------------------- */

  --font-heading: "Merriweather", serif;
  --font-body:    "EB Garamond", serif;
  --font-body-secondary:    "Roboto", sans-serif;
  --font-display: "Bebas Neue", serif;

  /* ----------------------------------------------------------
     Typography — Type Scale
     ---------------------------------------------------------- */

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --font-size-5xl:  3rem;       /* 48px */
  --font-size-6xl:  4rem;       /* 64px — hero headline */

  /* ----------------------------------------------------------
     Typography — Weights
     ---------------------------------------------------------- */
  --font-weight-slight:  100;
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ----------------------------------------------------------
     Typography — Line Heights
     ---------------------------------------------------------- */

  --line-height-tight: 1.2;
  --line-height-base:  1.5;
  --line-height-loose: 1.8;

  /* ----------------------------------------------------------
     Spacing
     ---------------------------------------------------------- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5: 1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-64: 16rem;
  --space-80: 20rem;
  --space-96: 24rem;
  --space-128: 32rem;

  /* ----------------------------------------------------------
     Border
     ---------------------------------------------------------- */

  --border-radius-sm:   4px;
  --border-radius-smd:  6px;
  --border-radius-md:   8px;
  --border-radius-lg:   16px;
  --border-radius-xl:   40px;
  --border-radius-full: 9999px;
  --border-width:       1.5px;

  /* ----------------------------------------------------------
     Shadows — warm tinted
     ---------------------------------------------------------- */

  --shadow-sm: 0 1px 3px #1919150f;
  --shadow-md: 0 4px 12px #19191514;
  --shadow-lg: 0 16px 18px #1919151a;
  --shadow-xl: 0 12px 32px #19191524;
  /* ----------------------------------------------------------
     Transitions
     ---------------------------------------------------------- */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* ----------------------------------------------------------
     Z-index Scale
     ---------------------------------------------------------- */

  --z-base:     0;
  --z-dropdown: 100;
  --z-drawer:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-overlay:  500;
}

/* ============================================================
   BASE HTML ELEMENT STYLES
   ============================================================ */

body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

p {
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

a {
  transition: color var(--transition-fast);
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ============================================================
   SKIP LINK — ACCESSIBILITY
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-accent);
  color: var(--color-text-inverted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-md);
  z-index: var(--z-toast);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ============================================================
   SCROLL LOCK — applied by navigation.js and modal.js
   ============================================================ */

body.scroll-locked {
  overflow: hidden;
}