/* ==========================================================================
   Bazzo Pet Care — Design Tokens
   Colors, type, spacing, shadow, radius
   ========================================================================== */

/* ---------- Webfonts ---------- */

@font-face {
  font-family: 'Commissioner';
  src: url('fonts/Commissioner-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('fonts/Commissioner-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('fonts/Commissioner-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('fonts/Commissioner-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('fonts/Commissioner-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('fonts/Commissioner-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('fonts/Commissioner-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('fonts/Commissioner-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('fonts/Commissioner-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Commissioner Flair — soft humanist variant for accents and friendly copy */
@font-face {
  font-family: 'Commissioner Flair';
  src: url('fonts/Commissioner_Flair-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner Flair';
  src: url('fonts/Commissioner_Flair-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner Flair';
  src: url('fonts/Commissioner_Flair-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner Flair';
  src: url('fonts/Commissioner_Flair-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Medula One — tall condensed display, used in the wordmark */
@font-face {
  font-family: 'Medula One';
  src: url('fonts/MedulaOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* === Brand colors (named after the three logo variants — Brazilian flora) === */
  --bz-mucuna:        #49392A; /* deep brown — primary brand color */
  --bz-mucuna-deep:   #3A2D20; /* darker shade for hover/press */
  --bz-mucuna-soft:   #6B5949; /* softened brown for secondary text */

  --bz-baguacu:       #EDE4DB; /* warm cream — primary background */
  --bz-baguacu-deep:  #DFD2C2; /* deeper cream for surfaces/hovers */
  --bz-baguacu-soft:  #F5EFE7; /* lightest cream */

  --bz-plumeria:      #FFFFFF; /* off-white — high-contrast surface */

  /* === Accents — earthy, sustainability-coded — used sparingly === */
  --bz-leaf:          #5C6B3D; /* muted olive/leaf green */
  --bz-leaf-deep:     #3F4A29;
  --bz-clay:          #B5754A; /* warm terracotta */
  --bz-sun:           #D9A24E; /* aged-gold accent */

  /* === Semantic — fg/bg layers === */
  --bg:               var(--bz-baguacu);
  --bg-elevated:      var(--bz-baguacu-soft);
  --bg-inverse:       var(--bz-mucuna);
  --bg-deep:          var(--bz-baguacu-deep);

  --fg:               var(--bz-mucuna);
  --fg-soft:          var(--bz-mucuna-soft);
  --fg-muted:         #8A7868;
  --fg-inverse:       var(--bz-baguacu);

  --border:           rgba(73, 57, 42, 0.18); /* mucuna @ 18% */
  --border-strong:    rgba(73, 57, 42, 0.32);
  --border-inverse:   rgba(237, 228, 219, 0.22);

  /* === Status === */
  --success:          #5C6B3D;
  --warning:          #D9A24E;
  --danger:           #B54A3F;
  --info:             #6B7B8A;

  /* === Typography === */
  --font-display:     'Medula One', 'Bebas Neue', 'Oswald', sans-serif; /* wordmark, hero */
  --font-sans:        'Commissioner', 'Inter', system-ui, -apple-system, sans-serif; /* UI, body */
  --font-flair:       'Commissioner Flair', 'Commissioner', sans-serif; /* friendly, accent copy */
  --font-mono:        ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale — body baseline 16px */
  --fs-xs:            12px;
  --fs-sm:            14px;
  --fs-base:          16px;
  --fs-md:            18px;
  --fs-lg:            22px;
  --fs-xl:            28px;
  --fs-2xl:           36px;
  --fs-3xl:           48px;
  --fs-4xl:           64px;
  --fs-display:       96px;

  --lh-tight:         1.05;
  --lh-snug:          1.2;
  --lh-base:          1.5;
  --lh-relaxed:       1.65;

  --tracking-tight:   -0.01em;
  --tracking-base:    0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.16em; /* used for PET CARE under the wordmark */

  /* === Spacing — 4px grid === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* === Radii — soft, never sharp === */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 9999px;

  /* === Shadows — warm, low-key === */
  --shadow-1: 0 1px 2px rgba(73, 57, 42, 0.08);
  --shadow-2: 0 4px 12px rgba(73, 57, 42, 0.10);
  --shadow-3: 0 12px 32px rgba(73, 57, 42, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* === Motion === */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
}

/* ---------- Element baselines ---------- */

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

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-3);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}

p {
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-soft);
}

.flair {
  font-family: var(--font-flair);
  font-weight: 500;
  font-style: italic;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }