/* ── Fontes self-hosted (Plus Jakarta Sans + Sora) ───────────────────── */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/PlusJakartaSans-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/PlusJakartaSans-Light.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PlusJakartaSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/PlusJakartaSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/PlusJakartaSans-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Sora-Light.ttf') format('truetype'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Sora-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Sora-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Sora-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Sora-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Sora-ExtraBold.ttf') format('truetype'); }

:root {
  /* ── Cores Principais (Moringa Brand) ───────────────────────────────── */
  --c-primary: #4EB036;
  --c-primary-dark: #3d9a2c;
  --c-primary-light: #7DD664;
  --c-primary-glow: rgba(140, 198, 63, 0.25);

  --c-secondary: #0D2137;
  --c-secondary-dark: #05111F;
  --c-secondary-light: #1A3A5A;

  --c-accent: #FF8E2B;
  --c-accent-dark: #E86A2C;
  --c-accent-light: #FFA657;
  --c-accent-glow: rgba(255, 142, 43, 0.25);

  /* ── Cores de Interface ──────────────────────────────────────────────── */
  --c-surface: #F8FAFC;
  --c-surface-2: #F1F5F9;
  --c-white: #FFFFFF;
  --c-danger: #EF4444;
  --c-danger-glow: rgba(239, 68, 68, 0.2);
  --c-success: #10B981;
  --c-warning: #F59E0B;
  --c-info: #3B82F6;

  /* ── Tipografia ──────────────────────────────────────────────────────── */
  --font-main: 'Plus Jakarta Sans', sans-serif;
  --font-title: 'Sora', sans-serif;

  /* ── Espaçamento ─────────────────────────────────────────────────────── */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;

  /* ── Raio de Borda (sistema único) ───────────────────────────────────── */
  --r-xs: 6px;    /* badges inline, chips */
  --r-sm: 10px;   /* inputs, small controls */
  --r-md: 14px;   /* botões, cards compactos */
  --r-lg: 20px;   /* cards padrão */
  --r-xl: 28px;   /* cards principais, modals */
  --r-2xl: 36px;  /* hero panels, banners grandes */
  --r-full: 9999px;

  /* ── Sombras ─────────────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(13, 33, 55, 0.06);
  --shadow-sm:   0 2px 8px rgba(13, 33, 55, 0.08);
  --shadow-md:   0 4px 16px rgba(13, 33, 55, 0.10);
  --shadow-lg:   0 8px 32px rgba(13, 33, 55, 0.12);
  --shadow-xl:   0 16px 48px rgba(13, 33, 55, 0.14);
  --shadow-2xl:  0 24px 64px rgba(13, 33, 55, 0.18);

  /* Sombras coloridas por contexto */
  --shadow-green:  0 4px 20px rgba(140, 198, 63, 0.28);
  --shadow-green-lg: 0 8px 32px rgba(140, 198, 63, 0.35);
  --shadow-blue:   0 4px 20px rgba(46, 119, 174, 0.25);
  --shadow-orange: 0 4px 20px rgba(255, 142, 43, 0.28);
  --shadow-navy:   0 4px 20px rgba(13, 33, 55, 0.30);

  /* ── Glassmorphism (sistema completo) ────────────────────────────────── */
  --glass-white:        rgba(255, 255, 255, 0.80);
  --glass-white-soft:   rgba(255, 255, 255, 0.60);
  --glass-white-ultra:  rgba(255, 255, 255, 0.92);
  --glass-navy:         rgba(13, 33, 55, 0.72);
  --glass-navy-soft:    rgba(13, 33, 55, 0.55);
  --glass-green:        rgba(140, 198, 63, 0.15);
  --glass-border:       rgba(255, 255, 255, 0.45);
  --glass-border-dark:  rgba(255, 255, 255, 0.12);
  --glass-border-subtle: rgba(13, 33, 55, 0.08);
  --glass-blur:         blur(16px);   /* @kind other */
  --glass-blur-sm:      blur(8px);    /* @kind other */
  --glass-blur-lg:      blur(24px);   /* @kind other */

  /* ── Gradientes ──────────────────────────────────────────────────────── */
  --gradient-hero:      linear-gradient(135deg, #0D2137 0%, #1A3A5A 50%, #0E3B6E 100%);  /* @kind color */
  --gradient-green:     linear-gradient(135deg, #4EB036 0%, #3d9a2c 100%);  /* @kind color */
  --gradient-green-h:   linear-gradient(90deg, #4EB036 0%, #7DD664 100%);  /* @kind color */
  --gradient-surface:   linear-gradient(135deg, #F8FAFC 0%, #EDF2F7 100%);  /* @kind color */
  --gradient-card:      linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.90) 100%);  /* @kind color */
  --gradient-orange:    linear-gradient(135deg, #FF8E2B 0%, #E86A2C 100%);  /* @kind color */
  --gradient-danger:    linear-gradient(135deg, #EF4444 0%, #DC2626 100%);  /* @kind color */

  /* ── Transições ──────────────────────────────────────────────────────── */
  --transition-fast:    150ms ease-out;   /* @kind other */
  --transition-base:    220ms ease-out;   /* @kind other */
  --transition-slow:    350ms ease-out;   /* @kind other */
  --transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);   /* @kind other */
}

/* ── Utilitários Glass ───────────────────────────────────────────────────── */

/* Card padrão com glass */
.glass-card {
  background: var(--glass-white);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-xl);
}

/* Card glass mais suave (listas, itens secundários) */
.glass-card-soft {
  background: var(--glass-white-soft);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-lg);
}

/* Panel escuro (hero sections, dark overlays) */
.glass-panel-dark {
  background: var(--glass-navy);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-dark);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-xl);
}

/* Panel ultra-opaco (navbar, bottom bar) */
.glass-panel-ultra {
  background: var(--glass-white-ultra);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border-bottom: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-sm);
}

/* Legado — mantido para não quebrar código existente */
.glass-panel {
  background: var(--glass-white);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-xl);
}

/* ── Utilitários Gradient ────────────────────────────────────────────────── */

.moringa-gradient {
  background: var(--gradient-hero);
}

.moringa-green-gradient {
  background: var(--gradient-green);
}

.moringa-card-gradient {
  background: var(--gradient-card);
}

/* ── Shimmer skeleton ────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* ── Micro-interações ────────────────────────────────────────────────────── */

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hover-glow-green {
  transition: box-shadow var(--transition-base);
}
.hover-glow-green:hover {
  box-shadow: var(--shadow-green);
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .skeleton-shimmer {
    animation: none;
    background: #f1f5f9;
  }
}

/* ── Scrollbar personalizada ─────────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }