/* ==========================================================================
   Cuas Veterinaria — Brand Tokens (canónico consolidado)
   Generado: 2026-05-05
   Fuente: _inspect/VET_LP/design-system/colors_and_type.css (versión más
   completa), complementada con variables de ATV_LP y TY.
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — Epilogue (variable font cubre 100–900)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Epilogue static weights — fallback para entornos que no soporten variable fonts */
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/brand/fonts/Epilogue-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   @font-face — Avenir (pesos individuales)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Avenir';
  src: url('/brand/fonts/Avenir-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('/brand/fonts/Avenir-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('/brand/fonts/Avenir-BookOblique.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('/brand/fonts/Avenir-Roman.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('/brand/fonts/Avenir-Oblique.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   :root — Design tokens Cuas
   -------------------------------------------------------------------------- */
:root {
  /* ---------- Brand Palette ---------- */
  --cuas-purple:        #65519a;   /* PRIMARY — the logo color, anchor of the brand */
  --cuas-purple-ink:    #3d3060;   /* Dark purple — body headings on light surfaces */
  --cuas-purple-soft:   #a99bd1;   /* Tint for gradients, hover-backgrounds */
  --cuas-purple-wash:   #ede8f6;   /* Very light purple tint for cards/surfaces */

  --cuas-pink:          #fe7aac;   /* Secondary — playful accent, CTAs */
  --cuas-pink-soft:     #fde8ef;   /* Light pink tint */
  --cuas-yellow:        #f7b41b;   /* Secondary — sunny, warm highlight */
  --cuas-orange:        #ff7c00;   /* Secondary — warning, high-energy CTA */
  --cuas-sky:           #8cb8f7;   /* Secondary — calm, trust */
  --cuas-bone:          #f9f8f3;   /* Secondary — warm paper/bone neutral */

  /* ---------- Neutrals ---------- */
  --cuas-ink:           #181321;   /* Near-black, body text */
  --cuas-ink-2:         #3a3348;   /* Secondary text */
  --cuas-ink-3:         #6b6578;   /* Tertiary / captions */
  --cuas-ink-4:         #a7a2b0;   /* Placeholder / disabled */

  --cuas-line:          #e7e3ee;   /* Hairline borders */
  --cuas-line-2:        #f0edf5;   /* Subtle dividers */
  --cuas-surface:       #ffffff;   /* Card / surface */
  --cuas-bg:            #faf8fb;   /* Page background (warm off-white) */
  --cuas-bg-wash:       #f5f1f9;   /* Section background */

  /* ---------- Semantic (mapped to secondary palette) ---------- */
  --cuas-success:       #8cb8f7;   /* reuses sky */
  --cuas-warning:       #f7b41b;   /* reuses yellow */
  --cuas-danger:        #ff7c00;   /* reuses orange */
  --cuas-info:          #fe7aac;   /* reuses pink */

  /* ---------- Foreground / background semantic ---------- */
  --fg-1:        var(--cuas-ink);
  --fg-2:        var(--cuas-ink-2);
  --fg-3:        var(--cuas-ink-3);
  --fg-brand:    var(--cuas-purple);
  --bg-1:        var(--cuas-bg);
  --bg-2:        var(--cuas-bg-wash);
  --bg-surface:  var(--cuas-surface);

  /* ---------- Typography families ---------- */
  --font-display: 'Epilogue', system-ui, sans-serif;   /* Headlines, titles */
  --font-body:    'Avenir', 'Nunito', system-ui, sans-serif; /* Body copy, UI */
  --font-ui:      'Epilogue', system-ui, sans-serif;   /* UI labels, buttons */

  /* ---------- Type scale — 16px root ---------- */
  --t-display-xl: clamp(48px, 6vw, 88px);  /* Hero */
  --t-display-l:  clamp(40px, 4.5vw, 64px);
  --t-h1: 44px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 20px;
  --t-body-lg: 18px;
  --t-body: 16px;
  --t-body-sm: 14px;
  --t-caption: 12px;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.05;
  --lh-display: 1.1;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* ---------- Letter spacing ---------- */
  --ls-tight:   -0.02em;
  --ls-display: -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.06em;   /* small caps / eyebrows */

  /* ---------- Radii ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:    0 1px 2px rgba(24, 19, 33, 0.05);
  --shadow-sm:    0 2px 6px rgba(61, 48, 96, 0.06), 0 1px 2px rgba(61, 48, 96, 0.04);
  --shadow-md:    0 8px 20px rgba(61, 48, 96, 0.09), 0 2px 4px rgba(61, 48, 96, 0.05);
  --shadow-lg:    0 18px 40px rgba(61, 48, 96, 0.14), 0 4px 10px rgba(61, 48, 96, 0.06);
  --shadow-brand: 0 12px 28px rgba(101, 81, 154, 0.28);
  --shadow-pink:  0 12px 28px rgba(254, 122, 172, 0.35);

  /* ---------- Spacing ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---------- Layout ---------- */
  --block-pad: clamp(48px, 6vw, 80px);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-med:     240ms;
  --dur-slow:    380ms;
}

/* --------------------------------------------------------------------------
   Reset minimal
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}