/* ============================================================
   VetPro — base.css
   Sections: 1. Variables  2. Reset  3. Utilities  4. Buttons
   ============================================================ */

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
  /* Brand */
  --clr-primary:      #EE1F29;
  --clr-primary-dk:   #c41920;
  --clr-secondary:    #20C1F5;
  --clr-secondary-dk: #14a3d4;
  --clr-secondary-lt: #e0f6fe;

  /* Surfaces */
  --clr-bg:      #f7f8fa;
  --clr-surface: #ffffff;
  --clr-border:  #e2e4e8;

  /* Text */
  --clr-text:  #1e2028;
  --clr-muted: #6b7280;

  /* Semantic */
  --clr-success: #16a34a;
  --clr-warning: #ca8a04;
  --clr-error:   #dc2626;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-w:     1160px;
  --radius:    6px;
  --radius-lg: 12px;

  /* Effects */
  --shadow:    0 2px 8px rgba(0,0,0,.07);
  --shadow-md: 0 4px 20px rgba(0,0,0,.11);
  --ease:      200ms ease;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
}

img    { display: block; max-width: 100%; height: auto; }
a      { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; }

:focus-visible { outline: 3px solid var(--clr-secondary); outline-offset: 2px; }

/* ── 3. UTILITIES ─────────────────────────────────────────── */
.container { width: 90%; max-width: var(--max-w); margin-inline: auto; }

/* ── 4. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--ease), color var(--ease),
              box-shadow var(--ease), transform var(--ease);
}
.btn:active { transform: scale(.96); }

.btn--primary       { background: var(--clr-primary); color: #fff; }
.btn--primary:hover { background: var(--clr-primary-dk); box-shadow: 0 4px 14px rgba(238,31,41,.3); }

.btn--secondary       { background: var(--clr-secondary); color: #fff; }
.btn--secondary:hover { background: var(--clr-secondary-dk); }

.btn--outline       { border: 2px solid var(--clr-text); color: var(--clr-text); }
.btn--outline:hover { background: var(--clr-text); color: #fff; }

.btn--ghost       { border: 1px solid var(--clr-border); color: var(--clr-text); }
.btn--ghost:hover { border-color: var(--clr-secondary); color: var(--clr-secondary-dk); }

.btn--danger       { background: var(--clr-error); color: #fff; }
.btn--danger:hover { background: #b91c1c; }

.btn--sm { padding: 6px 14px; font-size: .76rem; }
.btn--lg { padding: 14px 28px; font-size: .88rem; }

.btn--outline-white       { border: 2px solid rgba(255,255,255,.65); color: #fff; }
.btn--outline-white:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .hero__eyebrow, .hero__title, .hero__sub, .hero__ctas,
  .hero__badge-col { opacity: 1; animation: none; }
  .hero__bg { animation-play-state: paused !important; }
}