/* Vesta Residential Services — base styles
   Hybrid: Lucas's restraint + HandyPro's navy/orange palette + Work Sans
*/

:root {
  /* Brand */
  --navy-900: #001a42;
  --navy-800: #002d69;
  --navy-700: #10438e;
  --navy-600: #12448f;
  --navy-300: #aec6ff;
  --navy-200: #d8e2ff;

  --orange-700: #994700;
  --orange-600: #c45a00;
  --orange-500: #fb7800;
  --orange-400: #ff8a1e;
  --orange-100: #ffdbc8;

  /* Surfaces */
  --bg: #f8f9ff;
  --bg-alt: #eef4ff;
  --bg-tonal: #e5eeff;
  --surface: #ffffff;
  --surface-2: #f4f7ff;

  /* Ink */
  --ink-900: #0c1626;
  --ink-700: #2a3548;
  --ink-500: #5a6275;
  --ink-400: #8088a0;
  --ink-300: #b3bbcd;

  /* Lines */
  --line: #dde3f0;
  --line-strong: #c3c9d8;

  /* States */
  --success: #1f7a4a;
  --success-bg: #e3f3ea;

  /* Radii — DESIGN.md says 0.5rem standard, 1.5rem for invitations */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadows — ambient, low */
  --shadow-1: 0 1px 2px rgba(12, 22, 38, 0.04), 0 1px 1px rgba(12, 22, 38, 0.03);
  --shadow-2: 0 4px 14px rgba(0, 26, 66, 0.06), 0 1px 2px rgba(0, 26, 66, 0.04);
  --shadow-3: 0 12px 32px rgba(0, 26, 66, 0.10);
  --shadow-cta: 0 6px 16px rgba(196, 90, 0, 0.22);
  --shadow-focus: 0 0 0 3px rgba(251, 120, 0, 0.28);

  /* Spacing — 8pt */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  /* Type */
  --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

/* Type scale */
.t-display {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.t-h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
.t-h2 { font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }
.t-h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.t-h4 { font-size: 18px; line-height: 1.3; font-weight: 600; }
.t-body-lg { font-size: 18px; line-height: 1.6; font-weight: 400; }
.t-body { font-size: 15px; line-height: 1.6; font-weight: 400; }
.t-small { font-size: 13px; line-height: 1.5; font-weight: 500; }
.t-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-500);
}
.t-num {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.muted { color: var(--ink-500); }
.ink-strong { color: var(--ink-900); }

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons — primary CTA solid orange, secondary outlined navy */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn-primary {
  background: var(--orange-500);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--orange-600); }

.btn-secondary {
  background: transparent;
  color: var(--navy-800);
  border: 2px solid var(--navy-800);
}
.btn-secondary:hover { background: var(--navy-200); }

.btn-ghost {
  background: transparent;
  color: var(--navy-700);
  padding: 10px 14px;
}
.btn-ghost:hover { background: var(--bg-alt); }

.btn-dark {
  background: var(--navy-800);
  color: #fff;
}
.btn-dark:hover { background: var(--navy-700); }

.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* Pills / chips */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-tonal);
  color: var(--navy-800);
  letter-spacing: 0.01em;
}
.pill-orange { background: var(--orange-100); color: var(--orange-700); }
.pill-success { background: var(--success-bg); color: var(--success); }
.pill-line { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-700); }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-elev { box-shadow: var(--shadow-2); }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: 0.01em;
}
.field-input {
  font-family: inherit;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-900);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field-input::placeholder { color: var(--ink-400); }
.field-input:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(16, 67, 142, 0.16);
}
.field-help { font-size: 12px; color: var(--ink-500); }

/* Divider */
.hr {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* Icons (inline svg helpers) */
.icon { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }

/* Page transitions */
.page-fade-enter {
  animation: fadeUp 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 120, 0, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(251, 120, 0, 0); }
}

/* Image placeholder — diagonal stripe pattern in navy with label */
.imgholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(16, 67, 142, 0.06) 0,
      rgba(16, 67, 142, 0.06) 12px,
      rgba(16, 67, 142, 0.10) 12px,
      rgba(16, 67, 142, 0.10) 24px),
    var(--bg-alt);
  border: 1px dashed var(--line-strong);
  color: var(--navy-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.imgholder-warm {
  background:
    repeating-linear-gradient(135deg,
      rgba(196, 90, 0, 0.06) 0,
      rgba(196, 90, 0, 0.06) 12px,
      rgba(196, 90, 0, 0.10) 12px,
      rgba(196, 90, 0, 0.10) 24px),
    #fff5ec;
  color: var(--orange-700);
  border-color: var(--orange-100);
}

/* Density toggles via [data-density] on body */
body[data-density="compact"] .card { border-radius: var(--r-md); }
body[data-density="compact"] .btn { padding: 10px 18px; }
body[data-density="spacious"] .btn { padding: 14px 26px; }

/* High-radius mode */
body[data-radius="soft"] {
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;
}
body[data-radius="sharp"] {
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
}

/* Accent override for tweaks (orange / navy / green) */
body[data-accent="navy"] {
  --orange-500: #002d69;
  --orange-600: #001a42;
  --orange-700: #002d69;
  --orange-100: #d8e2ff;
  --shadow-cta: 0 6px 16px rgba(0, 45, 105, 0.22);
  --shadow-focus: 0 0 0 3px rgba(0, 45, 105, 0.25);
}
body[data-accent="green"] {
  --orange-500: #0f7a4a;
  --orange-600: #0a5e38;
  --orange-700: #0a5e38;
  --orange-100: #d8efe1;
  --shadow-cta: 0 6px 16px rgba(15, 122, 74, 0.22);
}