/* ==========================================================================
   Agência Pet — Core Design Tokens
   Marketing para Hospitais e Clínicas Veterinárias
   ========================================================================== */

/* ---------- Web fonts ---------- */
/* Primary: Plus Jakarta Sans — modern neutral sans, slightly friendly.
   Mono: JetBrains Mono (used sparingly for legal clause numbers / codes). */

:root {
  /* ------------------------------------------------------------------ */
  /* COLOR — Purple-led with teal accents, pulled from the mascot logo  */
  /* ------------------------------------------------------------------ */

  /* Primary — Pet Purple (the belly of the platypus) */
  --pet-purple-50:  #F5F0FB;
  --pet-purple-100: #E8DDF6;
  --pet-purple-200: #D2BBED;
  --pet-purple-300: #B491E0;
  --pet-purple-400: #9668D2;
  --pet-purple-500: #7A45C4;   /* brand primary */
  --pet-purple-600: #5E2BA8;   /* logo purple */
  --pet-purple-700: #4A208A;
  --pet-purple-800: #371766;
  --pet-purple-900: #260F47;

  /* Accent — Pet Teal (the head & outline of the platypus) */
  --pet-teal-50:   #E6F7F8;
  --pet-teal-100:  #C3ECEF;
  --pet-teal-200:  #8BD8DE;
  --pet-teal-300:  #4EC1CA;
  --pet-teal-400:  #22A8B3;
  --pet-teal-500:  #0B8D99;   /* brand accent */
  --pet-teal-600:  #006F7A;
  --pet-teal-700:  #00555E;

  /* Warm neutral — slightly warm to pair with the brand and feel "clinic-friendly" */
  --ink-950: #14101C;   /* near-black, purple-tinted */
  --ink-900: #201B2D;
  --ink-800: #2F2940;
  --ink-700: #4A4358;
  --ink-600: #6B6478;
  --ink-500: #8C8697;
  --ink-400: #B3AEBA;
  --ink-300: #D4D1DA;
  --ink-200: #E9E7ED;
  --ink-100: #F4F3F6;
  --ink-50:  #FAFAFB;
  --white:   #FFFFFF;

  /* Semantic (status) */
  --success-500: #2BB673;
  --success-50:  #E6F7EF;
  --warning-500: #E8A33B;
  --warning-50:  #FDF3E1;
  --danger-500:  #D44C4C;
  --danger-50:   #FBEAEA;
  --info-500:    var(--pet-teal-500);
  --info-50:     var(--pet-teal-50);

  /* ------------------------------------------------------------------ */
  /* SEMANTIC — foreground / background / border                        */
  /* ------------------------------------------------------------------ */
  --brand:         var(--pet-purple-600);
  --brand-hover:   var(--pet-purple-700);
  --brand-press:   var(--pet-purple-800);
  --brand-soft:    var(--pet-purple-50);
  --accent:        var(--pet-teal-500);
  --accent-soft:   var(--pet-teal-50);

  --fg-1: var(--ink-950);   /* primary text */
  --fg-2: var(--ink-700);   /* secondary text */
  --fg-3: var(--ink-500);   /* muted */
  --fg-on-brand: var(--white);

  --bg-1: var(--white);     /* page */
  --bg-2: var(--ink-50);    /* subtle panel */
  --bg-3: var(--ink-100);   /* card surface */
  --bg-brand: var(--pet-purple-600);
  --bg-brand-soft: var(--pet-purple-50);

  --border-1: var(--ink-200);   /* default */
  --border-2: var(--ink-300);   /* stronger */
  --border-brand: var(--pet-purple-200);

  /* ------------------------------------------------------------------ */
  /* TYPOGRAPHY                                                         */
  /* ------------------------------------------------------------------ */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: var(--font-sans);   /* display = heavier weight of the same family */

  /* Base size scale — 1.125 minor-second */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ------------------------------------------------------------------ */
  /* SPACING / RADII / SHADOWS / MOTION                                 */
  /* ------------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows — soft, cool, purple-tinted */
  --shadow-xs: 0 1px 2px rgba(38, 15, 71, 0.06);
  --shadow-sm: 0 2px 6px rgba(38, 15, 71, 0.06), 0 1px 2px rgba(38, 15, 71, 0.04);
  --shadow-md: 0 6px 16px rgba(38, 15, 71, 0.08), 0 2px 4px rgba(38, 15, 71, 0.04);
  --shadow-lg: 0 16px 40px rgba(38, 15, 71, 0.10), 0 4px 8px rgba(38, 15, 71, 0.04);
  --shadow-xl: 0 32px 64px rgba(38, 15, 71, 0.14);
  --shadow-brand: 0 12px 32px rgba(94, 43, 168, 0.28);
  --ring-focus: 0 0 0 3px rgba(122, 69, 196, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ---------- Semantic element roles (apply via class or composition) ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.eyebrow {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
}
.p, p {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
.p-lead {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.p-small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--ink-800);
}

/* Base reset helpers */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}