/* ==========================================================================
   VETTY — BRAND TOKENS & FONTS  (source: "Vetty — Branding" PDF, arnold street.)
   Loaded on every page BEFORE header.css / footer.css / page CSS.
   On the front page functions.php inlines brand.min.css ahead of home.min.css.
   ========================================================================== */

/* --- Self-hosted brand fonts (latin subset, OFL) ------------------------- */
/* Archivo is a single variable file (wght 100–900) — covers 300 / 600 / 800 */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("assets/fonts/archivo-latin-wght.woff2") format("woff2-variations"),
       url("assets/fonts/archivo-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif — "the aside": one phrase, never a whole headline */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/fonts/instrument-serif-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Brand colours ----------------------------------------------------- */
  --maroon-950: #2b0709;
  --maroon-800: #5e0710;
  --maroon-600: #8b1020;
  --maroon-400: #c04b57;
  --rose-300:   #c6878b;
  --rose-100:   #f7e4e1;
  --cream-50:   #fff8f0;
  --sand-100:   #f2e7dc;
  --ink-900:    #1a1614;
  --ink-500:    #525353;
  --ink-200:    #dcd8d6;
  --white:      #ffffff;

  /* --- Semantic roles ------------------------------------------------------ */
  --color-primary:      var(--maroon-800); /* buttons, wordmark, accents       */
  --color-heading:      var(--maroon-950); /* section headlines                */
  --color-kicker:       var(--maroon-600); /* uppercase kickers, links         */
  --color-text:         var(--ink-900);    /* body copy                        */
  --color-text-muted:   var(--ink-500);    /* secondary / meta copy            */
  --color-border:       var(--ink-200);
  --color-surface-tint: var(--rose-100);   /* soft pink panels                 */
  --color-surface-warm: var(--sand-100);   /* photo backdrops                  */
  --color-surface:      var(--white);
  --color-focus:        var(--maroon-600);

  /* --- Typography ---------------------------------------------------------- */
  --font-sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fw-body:    300;  /* Archivo 300 — Support / Body    */
  --fw-ui:      600;  /* Archivo 600 — kickers, buttons  */
  --fw-display: 800;  /* Archivo 800 — Display / Headline */
  --kicker-tracking: 0.14em;

  /* --- Legacy aliases (Anima export vars used across the theme CSS) ------- */
  --x-1: var(--maroon-800);
  --x-4: var(--rose-300);
  --x-6: var(--white);
}

/* --- Base ------------------------------------------------------------------ */
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  color: var(--color-text);
  background-color: var(--color-surface);
}

/* WordPress' standard hidden-until-focused text (skip link etc.) — style.css isn't
   loaded on the front page, so it lives here to work everywhere. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  z-index: 100000;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  clip: auto;
  clip-path: none;
  background: var(--white);
  color: var(--color-primary);
  font-weight: var(--fw-ui);
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgb(43 7 9 / 15%);
}

/* Instrument Serif — "the aside". Brand rule: a standalone phrase only, never mixed
   into an Archivo headline. Used on: home CTA "We're here for you and your pet."
   and About "Our Mission" / "Our Vision". Add class="brand-aside" to a standalone element. */
.brand-aside {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

/* Uppercase kicker utility (Archivo 600, +0.14em) */
.brand-kicker {
  font-family: var(--font-sans);
  font-weight: var(--fw-ui);
  text-transform: uppercase;
  letter-spacing: var(--kicker-tracking);
  color: var(--color-kicker);
}