/* ============================================================
   FARMAFLOW — DESIGN SYSTEM V3 (SaaS Premium)
   Arquivo: assets/css/main.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900&display=swap');

/* ── Design Tokens V3 ──────────────────────────────────────── */
:root {
  /* Deep Dark Mode (Landing Page) */
  --color-bg-deep:         #040C0A;
  --color-bg-dark:         #061210;
  --color-bg-soft:         #F4F9F6;

  /* Superfícies Dark */
  --color-surface-white:   #FFFFFF;
  --color-surface-soft:    #EDF5F0;
  --color-surface-dark:    #0C1E1A;
  --color-surface-card:    #112620;

  /* Primary (Verde Premium) */
  --color-primary:         #16C784;
  --color-primary-dark:    #0E9E69;
  --color-primary-light:   #5EE8AF;

  /* Accents */
  --color-accent-cyan:     #21D4FD;
  --color-accent-lime:     #A8F067;

  /* Textos Dark Mode — contraste WCAG AA corrigido */
  --color-text-main:       #0F172A;
  --color-text-muted:      #52637A;   /* ≥ 4.5:1 sobre fundo claro */
  --color-text-light:      #F1F7F4;
  --color-text-soft-light: #8DA89F;   /* usado em dark, ≥ 4.5:1 sobre #040C0A */
  --color-text-on-dark-soft: #7EA89F; /* subtítulos em seções dark */

  /* Bordas */
  --color-border-light:    #DDE8E2;
  --color-border-dark:     rgba(255,255,255,0.10);
  --color-border-dark-hover:rgba(255,255,255,0.18);

  /* Feedbacks */
  --color-danger:          #EF4444;
  --color-warning:         #F59E0B;
  --color-success:         #10B981;

  /* ── Tema Light (App Interno) ─────────────────────────────── */
  --theme-bg:              #F6FAF8;
  --theme-surface:         #FFFFFF;
  --theme-surface-hover:   #F0F7F4;
  --theme-border:          #E0EBE6;
  --theme-border-hover:    #C8D9D2;
  --theme-text:            #0F1F19;       /* AAA sobre branco */
  --theme-text-muted:      #445E55;       /* AA sobre branco */
  --theme-text-soft:       #637A72;       /* AA sobre branco */
  --theme-shadow-sm:       0 1px 3px rgba(15, 31, 25, 0.06), 0 1px 2px rgba(15, 31, 25, 0.04);
  --theme-shadow-md:       0 4px 12px rgba(15, 31, 25, 0.07), 0 2px 4px rgba(15, 31, 25, 0.04);
  --theme-shadow-lg:       0 12px 32px rgba(15, 31, 25, 0.08), 0 4px 8px rgba(15, 31, 25, 0.04);

  /* ── Tipografia ──────────────────────────────────────────── */
  --font-base:             'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-xs:               11px;
  --font-sm:               13px;
  --font-md:               15px;
  --font-lg:               17px;
  --font-xl:               20px;
  --font-2xl:              26px;
  --font-3xl:              38px;
  --font-4xl:              52px;
  --font-5xl:              68px;

  --fw-normal:             400;
  --fw-medium:             500;
  --fw-semi:               600;
  --fw-bold:               700;
  --fw-black:              800;

  /* ── Espaçamentos ────────────────────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-8:    48px;
  --space-10:   64px;
  --space-12:   96px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-full:  9999px;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-card:    0 20px 60px rgba(15, 23, 42, 0.10);
  --shadow-dark:    0 30px 80px rgba(0, 0, 0, 0.40);
  --shadow-glow:    0 0 60px rgba(22, 199, 132, 0.22);
  --shadow-glow-sm: 0 0 24px rgba(22, 199, 132, 0.14);

  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Reset Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-base);
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Tema Dark (Landing) ─────────────────────────────────────── */
body.theme-dark {
  background: var(--color-bg-deep);
  color: var(--color-text-light);
  --theme-bg:              var(--color-bg-deep);
  --theme-surface:         var(--color-surface-dark);
  --theme-surface-hover:   var(--color-surface-card);
  --theme-border:          var(--color-border-dark);
  --theme-border-hover:    var(--color-border-dark-hover);
  --theme-text:            var(--color-text-light);
  --theme-text-muted:      var(--color-text-soft-light);
  --theme-text-soft:       rgba(255,255,255,0.36);
  --theme-shadow-sm:       0 4px 12px rgba(0, 0, 0, 0.22);
  --theme-shadow-md:       var(--shadow-dark);
  --theme-shadow-lg:       0 40px 100px rgba(0, 0, 0, 0.55);
}

/* ── Tema Light (App) ────────────────────────────────────────── */
body.theme-light {
  background: var(--theme-bg);
  color: var(--theme-text);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: inherit;
}

h1 {
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
}
h2 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3 { font-size: clamp(18px, 2vw, 22px); font-weight: var(--fw-bold); }
h4 { font-size: 16px; font-weight: var(--fw-semi); }

::selection { background: var(--color-primary); color: #031413; }

/* ── Utilitários Tipográficos ────────────────────────────────── */
.text-xs     { font-size: var(--font-xs); }
.text-sm     { font-size: var(--font-sm); }
.text-md     { font-size: var(--font-md); }
.text-lg     { font-size: var(--font-lg); }
.text-xl     { font-size: var(--font-xl); }
.text-2xl    { font-size: var(--font-2xl); }
.text-3xl    { font-size: var(--font-3xl); }

.text-muted       { color: var(--theme-text-muted); }
.text-soft        { color: var(--theme-text-soft); }
.text-primary     { color: var(--color-primary); }
.text-primary-dark{ color: var(--color-primary-dark); }
.text-danger      { color: var(--color-danger); }
.text-success     { color: var(--color-success); }
.text-warning     { color: var(--color-warning); }

/* Dark mode: text-primary-dark fica legível */
body.theme-dark .text-primary-dark { color: var(--color-primary-light); }

.fw-normal   { font-weight: var(--fw-normal); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semi     { font-weight: var(--fw-semi); }
.fw-bold     { font-weight: var(--fw-bold); }
.fw-black    { font-weight: var(--fw-black); }

/* ── Botões Premium ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 50px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: var(--fw-bold);
  transition: var(--transition-base);
  white-space: nowrap;
  user-select: none;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Primary */
.btn-primary {
  background: linear-gradient(135deg, #16C784 0%, #0BA96E 100%);
  color: #031413;
  box-shadow: 0 8px 28px rgba(22, 199, 132, 0.30);
  border: 1px solid transparent;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(22, 199, 132, 0.38);
  filter: brightness(1.06);
}
.btn-primary:active { transform: translateY(0); }

/* Secondary */
.btn-secondary {
  background: var(--theme-surface);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  box-shadow: var(--theme-shadow-sm);
}
.btn-secondary:hover {
  background: var(--theme-surface-hover);
  border-color: var(--theme-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--theme-shadow-md);
}

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
}
.btn-outline:hover {
  background: rgba(22, 199, 132, 0.04);
  border-color: rgba(22, 199, 132, 0.3);
  color: var(--color-primary-dark);
}

/* Dark overrides */
body.theme-dark .btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-light);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
body.theme-dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.2);
}
body.theme-dark .btn-outline {
  color: var(--color-text-light);
  border-color: rgba(255,255,255,0.18);
}
body.theme-dark .btn-outline:hover {
  background: rgba(22, 199, 132, 0.08);
  border-color: rgba(22, 199, 132, 0.35);
  color: var(--color-primary-light);
}

.btn-sm    { height: 36px; padding: 0 var(--space-4); font-size: var(--font-xs); font-weight: var(--fw-semi); }
.btn-full  { width: 100%; }
.btn-lg    { height: 58px; padding: 0 var(--space-8); font-size: 16px; }

/* ── Formulários ─────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-label {
  font-size: 12px;
  font-weight: var(--fw-semi);
  color: var(--theme-text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.input-wrapper { position: relative; display: flex; align-items: center; }
.input-icon {
  position: absolute; left: var(--space-4); color: var(--theme-text-muted);
  width: 16px; height: 16px; pointer-events: none; flex-shrink: 0;
}

.form-input {
  height: 48px;
  width: 100%;
  background: var(--theme-surface);
  border: 1.5px solid var(--theme-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  font-size: var(--font-sm);
  color: var(--theme-text);
  transition: var(--transition-fast);
  outline: none;
  box-shadow: var(--theme-shadow-sm);
  -webkit-appearance: none;
}
.input-wrapper .form-input { padding-left: 42px; }
.form-input::placeholder { color: var(--theme-text-soft); }
.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(22, 199, 132, 0.14);
}
.form-input:hover:not(:focus) { border-color: var(--theme-border-hover); }

/* Dark form inputs */
body.theme-dark .form-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--color-text-light);
}
body.theme-dark .form-input::placeholder { color: rgba(255,255,255,0.3); }
body.theme-dark .form-input:focus {
  border-color: var(--color-primary);
  background: rgba(22,199,132,0.04);
}

/* ── Layout Utilitários ──────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center{ justify-content: center; }
.justify-between{justify-content: space-between; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.w-full { width: 100%; }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }

.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-0  { margin-bottom: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: var(--fw-semi);
  line-height: 1.4; letter-spacing: 0.03em;
}
/* Contraste corrigido — fundo escuro, texto claro suficiente */
.badge-success  { background: rgba(16, 185, 129, 0.12); color: #0A7A55; border: 1px solid rgba(16,185,129,0.2); }
.badge-warning  { background: rgba(245, 158, 11, 0.12);  color: #935D00; border: 1px solid rgba(245,158,11,0.2); }
.badge-danger   { background: rgba(239, 68, 68, 0.10);   color: #B91C1C; border: 1px solid rgba(239,68,68,0.15); }
.badge-neutral  { background: rgba(100, 116, 139, 0.10); color: var(--theme-text-muted); border: 1px solid rgba(100,116,139,0.15); }

body.theme-dark .badge-success  { background: rgba(22,199,132,0.12); color: #5EE8AF; border-color: rgba(22,199,132,0.2); }
body.theme-dark .badge-warning  { background: rgba(245,158,11,0.12);  color: #FBB849; border-color: rgba(245,158,11,0.2); }
body.theme-dark .badge-danger   { background: rgba(239,68,68,0.12);   color: #F87171; border-color: rgba(239,68,68,0.2); }
body.theme-dark .badge-neutral  { background: rgba(255,255,255,0.07); color: var(--color-text-soft-light); border-color: rgba(255,255,255,0.1); }

/* ── Cards ───────────────────────────────────────────────────── */
.card-dark {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.card-glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
}

/* ── Avatar ──────────────────────────────────────────────────── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  font-weight: var(--fw-bold); font-size: 13px;
  background: rgba(22, 199, 132, 0.15); color: var(--color-primary-dark);
  flex-shrink: 0;
}
body.theme-dark .avatar { color: var(--color-primary); }
.avatar-sm  { width: 30px;  height: 30px;  font-size: 11px; }
.avatar-md  { width: 38px;  height: 38px;  font-size: 13px; }
.avatar-lg  { width: 48px;  height: 48px;  font-size: 17px; }

/* ── Utilitários extras ──────────────────────────────────────── */
.relative      { position: relative; }
.absolute      { position: absolute; }
.overflow-hidden{ overflow: hidden; }
.uppercase     { text-transform: uppercase; }
.tracking-wider{ letter-spacing: 0.06em; }
.font-bold     { font-weight: var(--fw-bold); }
.px-2  { padding-left: var(--space-2); padding-right: var(--space-2); }
.py-1  { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.shrink-0 { flex-shrink: 0; }
.flex-1   { flex: 1; }
.min-w-0  { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.border-t   { border-top: 1px solid var(--theme-border); }
.pt-4  { padding-top: var(--space-4); }
.pt-6  { padding-top: var(--space-6); }
.pb-4  { padding-bottom: var(--space-4); }
.inline-flex { display: inline-flex; }

/* ── Animações Core ──────────────────────────────────────────── */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse    { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
@keyframes shimmer  { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes float    {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-8px); }
}
@keyframes floatCard {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-6px) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}