/* =========================================================
   K9FLOW BY MUNEE — BRAND SYSTEM
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root {
  /* Core colors */
  --k9-lime: #C7F464;
  --munee-blue: #004AAD;
  --ink: #101827;
  --white: #FFFFFF;

  /* Supporting neutrals */
  --off-white: #F8FAFC;
  --gray-100: #EEF2F7;
  --gray-200: #E5E7EB;
  --gray-500: #7A8799;
  --gray-700: #4C596C;

  /* Functional aliases */
  --color-primary: var(--k9-lime);
  --color-secondary: var(--munee-blue);
  --color-background-dark: var(--ink);
  --color-background-light: var(--off-white);
  --color-text-dark: var(--ink);
  --color-text-light: var(--white);
  --color-muted-dark: rgba(255, 255, 255, 0.68);
  --color-muted-light: var(--gray-700);
  --color-border-dark: rgba(255, 255, 255, 0.12);
  --color-border-light: #D8E0EB;

  /* Typography */
  --font-brand: "MADE Waffle Soft", "Waffle Soft", "Manrope", sans-serif;
  --font-ui: "Manrope", Arial, sans-serif;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(2rem, 4vw, 3rem);
  --text-display: clamp(3rem, 6vw, 5.25rem);

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 18px 42px rgba(0, 0, 0, 0.14);
  --shadow-strong: 0 30px 85px rgba(0, 0, 0, 0.22);

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 280ms ease;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-ui);
  color: var(--color-text-dark);
  background: var(--color-background-light);
}

h1,
h2,
h3,
.brand-type {
  font-family: var(--font-brand);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.04em;
}

/* ---------- Brand usage ---------- */
.bg-k9 {
  background: var(--k9-lime);
  color: var(--ink);
}

.bg-munee {
  background: var(--munee-blue);
  color: var(--white);
}

.bg-ink {
  background: var(--ink);
  color: var(--white);
}

.text-k9 {
  color: var(--k9-lime);
}

.text-munee {
  color: var(--munee-blue);
}

/* ---------- Buttons ---------- */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.35rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--k9-lime);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: var(--weight-extrabold);
  text-decoration: none;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.button-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.35rem;
  border: 1px solid var(--munee-blue);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--munee-blue);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

/* ---------- Cards ---------- */
.card-dark {
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.card-blue {
  background: var(--munee-blue);
  color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.card-light {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

/* ---------- Accent treatments ---------- */
.k9-underline {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.k9-underline::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.03em;
  right: -0.03em;
  bottom: 0.07em;
  height: 0.15em;
  border-radius: var(--radius-pill);
  background: var(--k9-lime);
  transform: rotate(-1deg);
}

.k9-highlight {
  color: var(--k9-lime);
}

/* ---------- Recommended hierarchy ----------
   Waffle Soft:
   - Logo
   - H1
   - H2
   - Short impact headlines

   Manrope:
   - Navigation
   - Body copy
   - Buttons
   - Forms
   - Captions
   - Interface labels

   Color balance guideline:
   - 60% neutral / dark base
   - 25% K9 Lime
   - 15% Munee Blue
   --------------------------------------------------------- */