/* ============================================================
   AgroManager Pro — Design Tokens (variables.css)
   Paleta oficial: Verde Escuro, Branco, Cinza Claro, Azul Petróleo.
   Mapeamento por domínio agronômico:
     verde   = crescimento / lavoura
     petróleo= água / irrigação
     âmbar   = colheita / safra
     terra   = solo / custos
   ============================================================ */

:root {
  /* ---- Marca / paleta base ---- */
  --brand-green-900: #0E2E20;
  --brand-green-800: #14432E;   /* Verde escuro principal */
  --brand-green-700: #1B5E3F;
  --brand-green-500: #2E8B57;
  --brand-green-300: #6FCF97;

  --brand-petrol-800: #0C4A4A;  /* Azul petróleo escuro */
  --brand-petrol-600: #0F6E6E;  /* Azul petróleo principal */
  --brand-petrol-400: #3AA6A6;

  --brand-amber-500: #E0A83E;   /* Colheita / safra */
  --brand-soil-500:  #A9744F;   /* Solo / custos */

  --white: #FFFFFF;
  --gray-50:  #F4F6F5;          /* Cinza claro */
  --gray-100: #EBEEED;
  --gray-200: #DDE3E1;
  --gray-300: #C7D0CD;
  --gray-400: #98A6A2;
  --gray-500: #6B7A76;
  --gray-600: #4B5854;
  --gray-700: #333D3A;
  --gray-800: #1E2624;
  --gray-900: #131917;

  /* ---- Estados ---- */
  --success: #2E8B57;
  --warning: #E0A83E;
  --danger:  #D0533B;
  --info:    #0F6E6E;

  /* ---- Tipografia ---- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.1rem;

  /* ---- Espaçamento / raio / sombra ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(19, 25, 23, 0.06);
  --shadow: 0 4px 16px rgba(19, 25, 23, 0.08);
  --shadow-lg: 0 12px 32px rgba(19, 25, 23, 0.12);

  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================== TEMA CLARO (padrão) ===================== */
:root,
[data-theme="light"] {
  --bg-app: var(--gray-50);
  --bg-surface: var(--white);
  --bg-surface-2: #FAFBFB;
  --bg-sidebar: var(--brand-green-800);
  --bg-sidebar-active: rgba(255, 255, 255, 0.14);
  --bg-sidebar-hover: rgba(255, 255, 255, 0.08);

  --text-strong: var(--gray-900);
  --text: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-on-brand: rgba(255, 255, 255, 0.92);
  --text-on-brand-muted: rgba(255, 255, 255, 0.6);

  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  --accent: var(--brand-green-700);
  --accent-contrast: var(--white);

  --input-bg: var(--white);
}

/* ===================== TEMA ESCURO ===================== */
[data-theme="dark"] {
  --bg-app: #0F1513;
  --bg-surface: #171F1C;
  --bg-surface-2: #1C2622;
  --bg-sidebar: #0C1512;
  --bg-sidebar-active: rgba(111, 207, 151, 0.18);
  --bg-sidebar-hover: rgba(255, 255, 255, 0.06);

  --text-strong: #F1F4F3;
  --text: #C7D0CD;
  --text-muted: #8A9793;
  --text-on-brand: rgba(255, 255, 255, 0.92);
  --text-on-brand-muted: rgba(255, 255, 255, 0.55);

  --border: #2A3531;
  --border-strong: #384540;

  --accent: var(--brand-green-300);
  --accent-contrast: #0F1513;

  --input-bg: #131A18;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}