/* ============================================================
   FitDog Floripa — Colors & Typography
   "Conceito em cuidados caninos"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  /* ---------- BRAND COLORS (sourced from the FitDog Floripa logo) ---------- */
  --fd-teal:           #00B0B0;   /* primary — the heart outline + "DOG" wordmark */
  --fd-teal-deep:      #008C8C;   /* hover / pressed states, darker accents */
  --fd-teal-soft:      #B8E8E8;   /* tints, secondary backgrounds */
  --fd-teal-mist:      #E6F6F6;   /* subtle wash backgrounds */

  --fd-yellow:         #F0C060;   /* golden retriever — warm accent */
  --fd-yellow-deep:    #D9A648;   /* darker golden, used sparingly */
  --fd-yellow-soft:    #FAE6BD;   /* sandy tint — Floripa beach vibe */

  --fd-pink:           #F4A6B8;   /* the dog's pink ribbon — feminine accent */
  --fd-pink-soft:      #FCE3E9;

  --fd-ink:            #1A1A1A;   /* "FIT" black, headings */
  --fd-charcoal:       #3D3D3D;   /* body copy on light */

  /* ---------- NEUTRALS ---------- */
  --fd-white:          #FFFFFF;
  --fd-paper:          #FAFAF7;   /* off-white page background, slightly warm */
  --fd-bone:           #F2EFE9;   /* subdued card / divider background */
  --fd-stone-100:      #EDEDEA;
  --fd-stone-200:      #D8D6D1;
  --fd-stone-400:      #9A9893;
  --fd-stone-600:      #5C5A55;

  /* ---------- SEMANTIC ---------- */
  --fd-success:        #5BB07A;   /* "vacina ok" — vet-friendly green */
  --fd-warning:        #E89A3D;
  --fd-danger:         #D85959;
  --fd-info:           var(--fd-teal);

  /* ---------- FOREGROUND / BACKGROUND ROLES ---------- */
  --fg-1: var(--fd-ink);          /* primary text */
  --fg-2: var(--fd-charcoal);     /* secondary text */
  --fg-3: var(--fd-stone-600);    /* tertiary / captions */
  --fg-onTeal: var(--fd-white);
  --fg-onYellow: var(--fd-ink);

  --bg-page: var(--fd-paper);
  --bg-card: var(--fd-white);
  --bg-muted: var(--fd-bone);
  --bg-feature: var(--fd-teal-mist);

  /* ---------- TYPOGRAPHY ---------- */
  /* Display: Fredoka — friendly, rounded, geometric. Closest free match to the
     chunky rounded sans used in the FITDOG wordmark. Substituted from a likely
     custom logotype — flag for review. */
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  /* Body: Nunito — humanist, rounded, very readable in PT. */
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Sizes — friendly scale, slightly larger body for warm/inviting feel */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-hero:  88px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* used for "CONCEITO EM CUIDADOS CANINOS" tagline */

  /* Weights */
  --w-regular:  400;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

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

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.06);
  --shadow-sm: 0 2px 6px rgba(26,26,26,0.08);
  --shadow-md: 0 6px 18px rgba(26,26,26,0.10);
  --shadow-lg: 0 12px 32px rgba(26,26,26,0.14);
  --shadow-teal: 0 8px 24px rgba(0,176,176,0.28);

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

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fd-h1, h1.fd, .fd-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fd-ink);
}

.fd-hero {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-hero);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--fd-ink);
  text-wrap: balance;
}

.fd-h2, h2.fd {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.fd-h3, h3.fd {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
}

.fd-h4 {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
}

.fd-eyebrow, .fd-tagline {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fd-teal-deep);
}

.fd-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.fd-lead {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.fd-caption {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.fd-button {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
}

/* Brand wordmark inline (e.g. running text) */
.fd-mark {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
}
.fd-mark .fit  { color: var(--fd-ink); }
.fd-mark .dog  { color: var(--fd-teal); }