/* ============================================================
   MORINGA HEALTH — Design Tokens
   Paleta: Teal #155B6E + Orange #F4A226 + Logo verde #2D7A4F
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

:root {

  /* --- CORES PRINCIPAIS --- */
  --c-primary:        #155B6E;   /* teal escuro — nav, headers, links */
  --c-primary-light:  #1A7A94;   /* teal médio — hover, gradientes */
  --c-primary-pale:   #E8F4F7;   /* teal muito claro — fundos de secção */

  --c-accent:         #F4A226;   /* orange — botões CTA, badges */
  --c-accent-dark:    #D4881C;   /* orange escuro — hover de CTA */
  --c-accent-pale:    #FEF3DC;   /* orange muito claro — fundo de alerta */

  --c-logo-green:     #2D7A4F;   /* verde moringa — só para o logotipo */
  --c-success:        #27AE60;   /* verde — confirmações, "disponível" */
  --c-success-pale:   #E8F8EF;
  --c-danger:         #C0392B;   /* vermelho — alertas, receita obrigatória */
  --c-danger-pale:    #FDECEA;
  --c-warning:        #F39C12;   /* amarelo — avisos intermédios */
  --c-warning-pale:   #FEF9EC;

  /* --- NEUTROS --- */
  --c-bg:             #FFFFFF;
  --c-surface:        #F5F7F9;   /* fundo de cards e páginas */
  --c-surface-2:      #EEF1F4;   /* fundo de inputs, chips */
  --c-border:         #E2E8EC;
  --c-border-dark:    #C8D2D8;

  --c-text:           #0F1F26;   /* texto principal */
  --c-text-muted:     #5A7480;   /* texto secundário */
  --c-text-disabled:  #A0B0B8;

  /* --- TIPOGRAFIA --- */
  --font-head:  'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body:  'Inter', 'Segoe UI', sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */

  /* --- RAIOS --- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* --- SOMBRAS --- */
  --shadow-xs:   0 1px 3px  rgba(15,31,38,.06);
  --shadow-sm:   0 2px 8px  rgba(15,31,38,.08);
  --shadow-md:   0 4px 16px rgba(15,31,38,.10);
  --shadow-lg:   0 8px 32px rgba(15,31,38,.12);
  --shadow-top:  0 -2px 12px rgba(15,31,38,.06);

  /* --- ESPAÇAMENTOS --- */
  --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;

  /* --- LAYOUT --- */
  --bottom-nav-h:  64px;
  --top-bar-h:     56px;
  --max-width:     480px;

  /* --- TRANSIÇÕES --- */
  --transition-fast:   120ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   350ms ease;

  /* --- Z-INDEX --- */
  --z-bottom-nav:  100;
  --z-top-bar:     100;
  --z-modal:       200;
  --z-toast:       300;
}

/* ============================================================
   RESET MÍNIMO
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--c-text);
  background: var(--c-surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   COMPONENTES REUTILIZÁVEIS
   ============================================================ */

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary  { background: var(--c-accent); color: #fff; }
.btn--primary:hover  { background: var(--c-accent-dark); }

.btn--teal     { background: var(--c-primary); color: #fff; }
.btn--teal:hover     { background: var(--c-primary-light); }

.btn--outline  { background: transparent; color: var(--c-primary); border: 1.5px solid var(--c-primary); }
.btn--outline:hover  { background: var(--c-primary-pale); }

.btn--ghost    { background: transparent; color: var(--c-text-muted); }
.btn--ghost:hover    { background: var(--c-surface-2); }

.btn--danger   { background: var(--c-danger); color: #fff; }

.btn--sm  { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--lg  { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn--full { width: 100%; }

/* --- Cards --- */
.card {
  background: var(--c-bg);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}
.badge--accent   { background: var(--c-accent-pale);   color: var(--c-accent-dark); }
.badge--success  { background: var(--c-success-pale);  color: var(--c-success); }
.badge--danger   { background: var(--c-danger-pale);   color: var(--c-danger); }
.badge--warning  { background: var(--c-warning-pale);  color: var(--c-warning); }
.badge--primary  { background: var(--c-primary-pale);  color: var(--c-primary); }

/* --- Inputs --- */
.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--c-text);
  background: var(--c-bg);
  outline: none;
  transition: border-color var(--transition-fast);
}
.input:focus { border-color: var(--c-primary); }
.input::placeholder { color: var(--c-text-disabled); }

/* --- Toast --- */
.toast {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-text);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  z-index: var(--z-toast);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
}
.toast.show { opacity: 1; }

/* --- Divisor --- */
.divider {
  height: 1px;
  background: var(--c-border);
  margin: var(--space-4) 0;
}

/* --- Spinner --- */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Chip / Tag --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.chip:hover,
.chip.active {
  background: var(--c-primary-pale);
  color: var(--c-primary);
  border-color: var(--c-primary);
}

/* --- Utilitários de texto --- */
.text-muted    { color: var(--c-text-muted); }
.text-primary  { color: var(--c-primary); }
.text-accent   { color: var(--c-accent); }
.text-success  { color: var(--c-success); }
.text-danger   { color: var(--c-danger); }
.text-sm       { font-size: var(--text-sm); }
.text-xs       { font-size: var(--text-xs); }
.font-head     { font-family: var(--font-head); }
.font-bold     { font-weight: 700; }
.font-semi     { font-weight: 600; }