/* Blue Oasis Vet — design tokens & base styles
   Palette derived from official logo (blue mark + green flora) and
   verified brand evidence. Calm, clean, clinical-but-warm. */

:root {
  /* Brand colours (derived from logo) */
  --oasis: #1f7fb8;          /* primary clinic blue */
  --oasis-ink: #114a73;      /* deep blue, headers */
  --oasis-deep: #0c3a5c;     /* darkest, surfaces */
  --leaf: #5aab3f;           /* green from logo flora */
  --leaf-deep: #3f8a26;

  /* Neutrals */
  --ink: #0f1a24;
  --slate: #4a5b68;
  --mute: #7b8a95;
  --line: #e3ecf2;
  --line-soft: #eef4f8;

  /* Surfaces */
  --paper: #ffffff;
  --paper-warm: #f6fafc;     /* page bg */
  --sky: #e6f1f8;            /* soft band tint */
  --sky-2: #d6e7f2;
  --sand: #f5f0e6;           /* warm contrast band */

  /* States */
  --alert: #c9362d;
  --alert-deep: #9c241d;
  --success: #2e8b6f;

  /* Type */
  --f-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --f-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Radii / shadows */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15,26,36,.04), 0 8px 24px -12px rgba(15,26,36,.10);
  --shadow-soft: 0 1px 2px rgba(15,26,36,.04);

  /* Spacing rhythm */
  --pad: clamp(20px, 4vw, 56px);
  --max: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper-warm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--oasis); }

button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* Headings */
.h-display {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.02;
  color: var(--oasis-deep);
}
.h-sans {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oasis);
}
.eyebrow.dim { color: var(--mute); }
.lede { font-size: 17px; line-height: 1.55; color: var(--slate); }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

section { padding: clamp(56px, 8vw, 112px) 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--oasis);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(31,127,184,.55);
}
.btn-primary:hover { background: var(--oasis-ink); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--oasis-deep);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--oasis); color: var(--oasis); }
.btn-emergency {
  background: var(--alert);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(201,54,45,.55);
}
.btn-emergency:hover { background: var(--alert-deep); color: #fff; }
.btn-leaf {
  background: var(--leaf);
  color: #fff;
}
.btn-leaf:hover { background: var(--leaf-deep); color: #fff; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* Card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow-card); }
.card-link:hover { border-color: rgba(31,127,184,.4); transform: translateY(-2px); }

/* Tag / pill */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 500;
  background: var(--sky); color: var(--oasis-ink);
  letter-spacing: 0.01em;
}
.tag.leaf { background: rgba(90,171,63,.12); color: var(--leaf-deep); }
.tag.alert { background: rgba(201,54,45,.10); color: var(--alert-deep); }
.tag.soft { background: var(--line-soft); color: var(--slate); }

/* Striped placeholder used for map */
.striped {
  background: repeating-linear-gradient(135deg,
    var(--sky) 0 10px, var(--paper-warm) 10px 20px);
}

/* Heartbeat divider — echoes logo ECG line */
.ecg {
  display: block;
  width: 100%;
  height: 28px;
  color: var(--oasis);
}

/* Status dot */
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--success); display: inline-block; }
.dot.alert { background: var(--alert); }
.pulse { box-shadow: 0 0 0 0 currentColor; animation: pulse 1.8s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,54,45,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(201,54,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,54,45,0); }
}

/* Page transitions */
.page-enter {
  animation: pageIn .35s ease both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Layout helpers */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-12 { gap: 48px; }
.center { align-items: center; } .between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; }

/* Subtle photo treatment */
.photo {
  background: var(--sky);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Focus ring */
:focus-visible { outline: 2px solid var(--oasis); outline-offset: 3px; border-radius: 6px; }

/* Mobile bottom bar reserve */
@media (max-width: 720px) {
  body { padding-bottom: 64px; }
}

/* Scroll smoothing */
html { scroll-behavior: smooth; }