/* MiAgroPlus — tokens de diseño (generado desde el sistema de diseño MiAgroPlus).
   No editar a mano: cambia el sistema de diseño y regenera. Tema por defecto: light.
   El tema oscuro se activa con <html data-theme="dark">. */

:root,
[data-theme="light"] {
  --surface: #fafaf9;
  --surface-raised: #ffffff;
  --surface-sunken: #f5f5f4;
  --line: #e7e5e4;
  --line-strong: #857d77;
  --ink: #041818;
  --ink-muted: #57534e;
  --ink-subtle: #78716c;
  --brand: #81de60;
  --brand-hover: #a1ed86;
  --on-brand: #041818;
  --brand-strong: #108555;
  --brand-text: #0b6b45;
  --brand-soft: #f3fce9;
  --mint: #dff9f9;
  --nav: #041818;
  --on-nav: #ffffff;
  --on-nav-muted: #a9c2be;
  --focus: #108555;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --warning: #92400e;
  --warning-soft: #fffbeb;
  --warning-fill: #fbbf24;
  --info-soft: #dff9f9;
  --overlay: rgba(4, 24, 24, 0.5);
  --lime-50: #f3fce9;
  --lime-500: #81de60;
  --lime-600: #47c121;
  --lime-700: #108555;
  --lime-800: #0b6b45;
  --ink-soft: #072928;
  --shadow-sm: 0 1px 2px 0 rgba(4, 24, 24, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(4, 24, 24, 0.10);
  --shadow-lg: 0 16px 40px -8px rgba(4, 24, 24, 0.25);
}

[data-theme="dark"] {
  --surface: #041818;
  --surface-raised: #072928;
  --surface-sunken: #021010;
  --line: #164240;
  --line-strong: #5b807d;
  --ink: #eef7f4;
  --ink-muted: #a9c2be;
  --ink-subtle: #8fa9a5;
  --brand: #81de60;
  --brand-hover: #a1ed86;
  --on-brand: #041818;
  --brand-strong: #81de60;
  --brand-text: #a1ed86;
  --brand-soft: #0b3a2c;
  --mint: #0d3533;
  --nav: #021010;
  --on-nav: #eef7f4;
  --on-nav-muted: #a9c2be;
  --focus: #81de60;
  --danger: #f87171;
  --danger-soft: #3a1414;
  --warning: #fbbf24;
  --warning-soft: #332508;
  --warning-fill: #fbbf24;
  --info-soft: #0d3533;
  --overlay: rgba(0, 0, 0, 0.6);
  --lime-50: #f3fce9;
  --lime-500: #81de60;
  --lime-600: #47c121;
  --lime-700: #108555;
  --lime-800: #0b6b45;
  --ink-soft: #072928;
  --shadow-sm: none;
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.7);
}

:root {
  --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;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --target-min: 48px;
  --control-h: 52px;
  --topbar-h: 56px;
  --bottomnav-h: 68px;
  --rail-w: 264px;
  --content-max: 1200px;
  --form-max: 720px;
  --z-overlay: 10;
  --z-drawer: 20;
  --z-topbar: 30;
  --z-modal: 40;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}